インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
折れ線グラフが描かれ、点と値が現れる
-
抽象ロゴの列が 2 段で逆向きに途切れず流れ続ける
-
ハンバーガーを押すとメニューのパネルが滑り込み、リンクが順に出る
-
ヒーローの巨大な文字の穴から景色が見え、スクロールで画面いっぱいに抜ける
-
ヒーローの背景でネオン管の図形が発光してまたたく
-
スクロールで実績の数字がカウントアップする
-
棒グラフが順に伸びて値のラベルが出る
-
ヒーローの背景でグラデーションが溶け合いながら流れる
-
ページ遷移で、縁が曲線になったカーテンが下から上がって画面を覆い、上へ抜ける
-
カードがカーソルに合わせて 3D で傾き、光沢が走る
-
アコーディオンの質問を押すと答えが開き、別の質問で入れ替わる
-
ローディングの点が ∞ の軌跡を走る
-
コード欄のコピーボタンで文字が回り、チェックが描かれる
-
ハンバーガーのアイコンが × に変わって戻る
-
見出しを 1 文字ずつせり上げる
-
ローディングの進捗が円形のゲージと % で 0 から 100 に進む
-
トグルスイッチが切り替わる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。