インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
虫めがねのアイコンの柄が伸びて × になり、検索語を消すボタンに替わる
-
一覧の行を押すと右に詳細のパネルが開き、別の行を押すと中身だけが入れ替わる
-
通知の設定で親のトグルを切ると、子のトグルがまとめて切れて畳まれる
-
横に溢れるタブが矢印で送られ、選んだタブが中央に寄る
-
スクロールで比較表のセクションの行が順に立ち上がり、丸とチェックが線で描かれる
-
電池のアイコンが左から満ちて色が移り、雷のマークが跳ねる
-
絞り込みのパネルが右から開き、選んだ条件がチップになって積まれ、閉じると一覧のカードが並び替わる
-
Wi-Fi のアイコンの弧が内側から順に立ち、つながると点が光る
-
本文の文字を選ぶと編集のツールバーが浮かび、選んだ範囲に合わせて動く
-
設定のシートが段に重なって開き、戻ると手前が滑って抜ける
-
狭い画面でパンくずリストが「…」に畳まれ、押すと中間の階層が開いて伸びる
-
表示切り替えのアイコンで、格子の四角が一覧の行へ組み替わる
-
工程のセクションでカードが重なった束から扇状に広がって並ぶ
-
スマートフォンのメニューで階層が右から滑り込んで深くなり、戻ると左へ戻る
-
地図のセクションで拠点のピンが順に落ちて立ち、弧で結ばれる
-
日付の入力欄を押すとカレンダーが開き、選んだ日に丸いマーカーが滑って移る
-
積み上げの面グラフが下の層から順に満ちて現れる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。