インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
動画のサムネイルが、押した位置から再生画面へ広がる
-
絞り込みアイコンのハンドルが滑り、押すと × に組み替わる
-
駅から店までの道順が地図に描かれ、角ごとに説明が添えられる
-
色見本を選ぶと商品画像が切り替わり、色の名前が入れ替わる
-
ページ遷移でページが少し縮んでフィルムのように縦に送られ、次のページで止まって元の大きさに戻る
-
縦書きの見出しと本文が、スクロールに合わせて右の行から順に現れる
-
利用規約を最後まで読むと、同意のチェックと送信のボタンが順に使えるようになる
-
「確認する」のボタンを押すと、はんこが落ちて押され、にじんだ朱の跡が残る
-
作品の画像が石積みの格子へ上から落ちて収まり、隙間なく並ぶ
-
円グラフの扇がほどけて、同じ値の棒グラフへ形を変える
-
カーソルを光源にして、並んだ積み木の影の向きと長さが変わる
-
ページ遷移で今のページの中身が行ごとに上へ抜け、次のページの中身が下から順に入る
-
お知らせの一覧が日付と区分のラベルつきで順に現れ、行に重ねると矢印が伸びる
-
割合の積み上げ横棒グラフが年ごとに並び、区分の移り変わりが見える
-
カーソルの横の小さなラベルが、乗っている物に合わせて文言と幅を替える
-
工程表のグラフのバーが順に伸び、今日の線が進んで済んだ分が濃く塗られる
-
削除の確認ダイアログで、確かめの言葉を打つと削除のボタンが使えるようになる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。