インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
ドーナツグラフが区分ごとに順に埋まり、中央の数字が増える
-
ページ遷移で次のページが上に重なって滑り込み、前のページが奥へ下がる
-
スクロールでセクションに合わせて背景色と文字色が切り替わる
-
セクションの本文の語にマーカーが引かれる
-
KPI カードの数字と前月比が現れ、スパークラインのグラフが描かれる
-
ローディングが終わるとカーテンが上がってページが現れる
-
ボトムシートが下から上がり、ハンドルを引き下げて離すと閉じる
-
タブの下線が滑って移り、中身が向きに合わせて切り替わる
-
カーソルが通った跡に画像が次々と置かれて消える
-
ボタンのクリックした位置から波紋が広がる
-
ページ遷移でクリック位置から円が広がって次のページが現れる
-
太陽のアイコンが月に変わり、ページが暗くなる
-
スクロールで固定したセクションが横に流れる
-
いいねのハートのアイコンが弾け、粒が飛ぶ
-
再生と一時停止のアイコンが形を変えて切り替わる
-
チェックボックスにチェックが描かれる
-
ホバーでツールチップの吹き出しが矢印の先から弾んで出る
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。