インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
料金表のセクションで列が順に立ち上がり、おすすめの列が一段高くなる
-
地図のピンのアイコンが落ちて弾み、足元の影が縮んで濃くなる
-
矢印のカーソルが進む向きに回り、止まると元の向きに戻る
-
カートに入れると右からカートのパネルが入り、追加した行が光る
-
ページ末の呼びかけのセクションで、見出しがスクロールに合わせて大きく迫り、ボタンが現れる
-
更新の矢印のアイコンが回り、終わるとチェックに変わる
-
口コミのセクションで、カードが縦 3 列に並び、交互の向きに流れ続ける
-
リアクションのボタンに重ねると絵文字が並んで弾み、カーソルに近いものが大きくなる
-
商品の画像の上で、カーソルの周りが虫めがねのように拡大される
-
クリックした所から小さな図形が弾けて散る
-
ニュースレターの登録ポップアップが、画面の右下の隅から弾んで出る
-
カメラのシャッターのアイコンで、羽根が回りながら閉じて開く
-
数量の ＋ と － のボタンで、数字が上下に回って変わる
-
やることにチェックすると取り消し線が引かれ、行が下へ移る
-
ファネルのグラフの段が順に伸び、段ごとの転換率が現れる
-
ページ遷移でページが立方体の面のように回り、次のページが横から来る
-
ページ遷移で今のページがカードの大きさに縮んで横へ送られ、次のカードが広がる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。