インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
読み進めると「トップへ戻る」ボタンが弾んで出て、押すと先頭へ戻る
-
単色のパネルが走り抜けたあとに画像が現れる
-
見出しの筆記体の文字が書き順どおりに描かれる
-
ローディングのバーと数字が 0 → 100% に進む
-
ローディングの % に合わせて大きな文字の中が下から満ちる
-
ブロブが形と色を変えながら回る
-
見出しの文字の太さが波のように変わる
-
レーダーグラフが中心から広がり、2 つの系列を比べる
-
見出しをタイプライター風に打ち出し、カーソルが点滅する
-
ローディング中にロゴマークを線で描いてから塗る
-
ローディング中に長さの変わるバーが流れ続ける不定進捗バー
-
ローディング中に波紋が広がって消える
-
見出しの字間が詰まりながら現れる
-
ローディング中に立方体が転がるように回る
-
ローディング中に四角が 3D で裏返り続ける
-
ローディング中に点が円周を追いかけ合う
-
見出しが色ずれしながら乱れる（グリッチ）
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。