インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
横棒グラフの順位が、値の伸びに合わせて入れ替わる
-
ホバーで商品カードの画像が別の角度に替わり、カートに入れるボタンがせり上がる
-
ホバーでメンバーカードの写真が白黒から色づき、SNS のアイコンが順に出る
-
ホバーで記事カードの見出しに下線が引かれ、矢印が右へ抜けて戻る
-
チャットの返信を待つローディングの点が波打ち、そのまま届いたメッセージの吹き出しに広がる
-
ページ遷移で上端の進捗バーが伸びきると、次のページへ切り替わる
-
ページ遷移で画面が左右の扉のように割れて開き、次のページが奥から現れる
-
画像のローディング中はぼかした仮の画像を見せ、届いたものからピントが合って鮮明になる
-
スクロールでセクションのベントグリッドのタイルが順に現れる
-
入力欄の文字数カウンターの輪が満ち、上限に近づくと色が変わる
-
Cookie の同意バナーが下からせり上がり、選ぶと畳まれて消える
-
セレクトボックスを開くと選択肢が順に降り、選ぶと閉じる
-
検索のオーバーレイが全画面に広がり、候補が順に現れる
-
カーソルの輪がボタンに吸い付いて形を変え、離れると戻る
-
ラジオボタンの選択を示すマーカーが、前の選択肢から滑って移る
-
サムネイルを押すと、ライトボックスで画像がその場から拡大して開く
-
ドロワーメニューが左から滑り込み、ページを押しのけて背景が暗くなる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。