マイクロインタラクションからクリエイティブ表現まで！Tween24.jsを使った演出表現

2021/12/10 24 users WebGL Tween24.js クリエイティブ表現 CSS

ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書け... 続きを読む

UXにおけるマイクロインタラクション – U-Site

2019/05/28 17 users U-Site コンピュー エクスペリエンス トリガー ブランド

マイクロインタラクションは、システムの状態を伝達して、エラー防止を支援し、ブランドを伝達する。これは、トリガーによって引き起こされ、目的は1つだけで、エクスペリエンスを魅力的にする。 Microinteractions in User Experience by Alita Joyce on October 21, 2018 マイクロインタラクションとは何か コンピュー... 続きを読む

Webが進化中！参考にしたい話題の最新ウェブデザイン30個まとめ - PhotoshopVIP

2019/02/06 113 users インスピレーション 配色 PhotoshopVIP 注目 参考

デザイン制作のインスピレーションや参考にしたい、2019年に入って注目を集めている、最新ウェブサイトデザイン30個をまとめています。 落ち着いた配色や、美しいセリフ書体、繊細なアニメーション、マイクロインタラクションなどを利用したサイトが増えています。クリエイティブでユニークな最新ウェブデザインを体験し... 続きを読む

【総まとめ】2018年特に印象的だった世界のベストWebデザイン厳選51個 - PhotoshopVIP

2018/12/26 85 users PhotoshopVIP グリッドレイアウト エフェクト

当サイトでは、定期的に魅力的な最新ウェブサイトのデザインをまとめて紹介していますが、2018年は革新的なエフェクトやインタラクティブな仕掛けをつかったサイトが、たくさん登場しました。 サイトに動きを加えるマイクロインタラクションやホバーエフェクト、一般的なグリッドレイアウトを無視したり、マウスカーソル... 続きを読む

アニメーションを伴うマイクロインタラクションを作っていくために - Quipper Product Team Blog

2018/12/26 11 users アニメーション

デザイナーの@riku-kunishiです。 今年に入って、AirbnbがLottieを公開したり、InVision Studioのバージョン1.0が公開されたりと「動き」までデザインすることが当たり前になりつつあります。特に私が携わっているプロダクトのターゲットは学生なので、なるべく操作に対して自然な反応をしてあげるようなプロダクトを作... 続きを読む

イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA

2018/11/26 114 users いまどき インタラクション ICS MEDIA UIデザイン

ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横... 続きを読む

「好き」を促すマイクロインタラクションを考える｜sadakoa @デジタルプロダクトデザイナー｜note

2018/07/25 15 users フィ 目次 ストレス Note 資料

こんにちは、デジタルプロダクトデザイナーのさだこえ (@sadako_a_) と申します。今回は以前とあるイベントに登壇した時の資料を、改めてリファインして記事にまとめてみました。 目次 マイクロインタラクションとは何か 1.無意識にストレスなく利用できるようにする 2.欲しいものをすぐに提供する 3.人間味を感じるフィ... 続きを読む

ウェブサイトをもっと面白く！コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度 - PhotoshopVIP

2018/07/10 118 users グリッチエフェクト PhotoshopVIP テクニック

ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、... 続きを読む

マイクロインタラクションとバレエ｜深津 貴之 (fladdict)｜note

2018/06/07 153 users fladdict ローザンヌ 貴之 深津 バレリーナ

UIのモーションを考える時、よく脳内でバレリーナの動きを再生する。 妹がバレエをやっていたため実家の居間では、ローザンヌ国際バレエコンクールのビデオがよく流れていた。 ローザンヌは世界最強の若手バレリーナを決める大会だ。この番組はクロード・ベッシー女史というコメンテーターの、辛口実況がウリだった。彼女はパリオペラ座学校の校長先生でもあり、それゆえに評価のハードルが非常に高い。コンテストの登壇者は、... 続きを読む

CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron | コリス

2018/01/24 50 users Micron インタラクション コリス CSS ライブラリ

ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バ... 続きを読む

UI改善にキラリと役立つ！ 今こそ導入したいSVGアニメーションの作り方まとめ - ICS MEDIA

2017/07/12 156 users SVGアニメーション SVG UI改善 CSS アニメーション

SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「 SVGで始めるマイクロインタラクション入門 」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。... 続きを読む

CSS3だけで表現！ コピペで使えるマイクロインタラクション作りました - ICS MEDIA

2017/03/13 163 users ICS MEDIA Twitter Facebook コピペ

マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 例えばFacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラー... 続きを読む

マイクロインタラクションで気をつけたい5つのポイント | TechAcademyマガジン

2017/02/09 21 users ＩＳ TechAcademyマガジン 本稿 了解 オンライン

TechAcademyマガジンはオンラインのプログラミングスクール TechAcademy [テックアカデミー] が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。 本稿は、Free Code Campの ブログ記事 を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UX in Motionの設立者で、ワークショップを主宰しているIs... 続きを読む

[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt | コリス

2017/01/30 52 users jQuery GitHub tilt シャドウ グラデーション

カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ（jQueryのプラグインも可）を紹介します。 CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落... 続きを読む

適切なプロトタイピングツールを選ぶための５ステップ | UX MILK

2017/01/25 21 users プロトタイピングツール トランジション リソース 文書 ニーズ

プロトタイピングツールは、私たちデザイナーにとって重要なリソースとなっています。プロトタイピングツールにより、静的な文書では表現の難しい、アニメーション、トランジション、マイクロインタラクションなど多数の状態を表すことができるようになりました。 このニーズに対応するために、各企業はプロトタイピングツールを作成し始めています。そして今では、定期的に多くのツールが登場するのを目にしています。 しかし、... 続きを読む

あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA

2017/01/17 169 users ミソ ICS MEDIA スレ アニメーション ウェブアプリ

ICS MEDIA Web制作 2017/01/18 あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょ... 続きを読む

マイクロインタラクションを有効に活用するためのコツ | UX MILK

2017/01/13 13 users タスク Nick Babich アプリケーション 著者 瞬間

この記事はNick Babichからの翻訳転載です。配信元または著者の許可を得て配信しています。 Nick Babich - Best Practices for Microinteractions (2016-12-01) マイクロインタラクションは、１つのタスクを達成する際に生じるわずかな瞬間のことを指します。私たちの周りのほとんどのアプリケーションはマイクロインタラクションで満たされています... 続きを読む

2016年も大流行のマイクロインタラクション UX向上のカギは「イージング」 - WPJ

2016/12/21 37 users イージング WPJ トランジション ユーザーエクスペリエンス

2016年もUIデザイン界隈で大流行した「マイクロインタラクション」。自然なアニメーションでUXを向上させる鍵はイージングにありました。 アニメーションの長さやスピードを変更すると、非常にユニークなトランジションを作成したり、マイクロインタラクション（『「BMWのドア音」に学ぶ、完璧なUXデザインのためのマイクロインタラクション』参照）のユーザーエクスペリエンスが向上したりします。 オブジェクトを... 続きを読む

今っぽくなった！トレンドをおさえたjQuery プラグインまとめ | コムテブログ

2015/04/06 397 users コムテブログ トレンド ヒップアップ 細部 プラグイン

トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピップアップ。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプ... 続きを読む

「マイクロインタラクション」から考えるマクロなデザイン - くらげだらけ

2014/04/20 96 users くらげだらけ デザイン

photo by Neal.Lean Startupが出版された頃からでしょうか。起業ブームみたいなものと相まっていろいろとUXだとかLeanだとかの類の本が多く出版されていますね。私もそんな本を案外欠かさず買ってみては読んでみてもいるのですが、あまりピンとこないような内容であったり、手法の紹介についてばかり熱心に書いてあったりとどうしても眠い感じになってしまうようなものばかりだったように思うこと... 続きを読む

O'Reilly Japan - マイクロインタラクション

2014/03/04 126 users インタラクション O'Reilly Japan ディテール

UIのディテールをほんの少し工夫するだけでUXは劇的に改善します。本書では効果的なマイクロインタラクション――ひとつの作業だけをこなす最小単位のインタラクション――の意味、有効性、デザイン手法を学びます。マイクロインタラクションを「トリガー」「ルール」「フィードバック」「ループとモード」に分解して豊富な実例とともにていねいに解説し、さらにプロトタイプやドキュメント作成、テストといった実践的な手法も... 続きを読む