インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
ヒーローの背景で風になびく布が、カーソルに押されてたわむ
-
スクロールでコーヒー缶が回り、横の説明が3段で入れ替わる
-
チャットのボタンから円が広がって開き、吹き出しが順に届く
-
写真の上の点を押すと、商品名と値段の吹き出しが開く
-
カーソルを合わせた部屋が持ち上がり、名前と広さが表示される立体の間取り図
-
興味のあるジャンルを押すと、タグがエリアへ飛び込んで積み重なる
-
小さな立方体が集まって組み上がり、崩れてはまた組み直すローダー
-
よくある質問をカテゴリで絞ると、残った質問が詰めて並ぶ
-
ティルトシフトでミニチュアに見える街並みが、背景をゆっくり流れる
-
ヒーローの画像が立方体に割れて崩れ落ち、奥から次の画像が現れる
-
押しているあいだ輪が声に揺れ、離すと紙飛行機になる録音ボタン
-
縦線の中を光が流れるスクロールボタン。押すと次のセクションへ
-
棚の立体の本にカーソルを合わせると、引き出されて書名のカードが開く
-
カーソルの通った跡に波紋が広がり、下の写真が水越しに揺らぐ
-
縦にうねる波が景色の画像を横切り、通った所から次の画像に替わる
-
流入元から行き先へ、人数ぶんの太さの流れが順に伸びるサンキー図
-
言語を切り替えると、メニューが一語ずつ縦に回って入れ替わる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。