インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
目標の線に向かって実績の棒グラフが伸び、届いた項目に「達成」のバッジが付く
-
「コードを再送信」のボタンを押すと、待ち時間の秒数が縦に送られて減り、0 になると押せる状態に戻る
-
ページ遷移で階層を下りると今のページが左へ押し出され、パンくずに 1 段増える
-
予約の時間枠が並び、選んだ枠へハイライトが移り、埋まった枠は選べない形で示される
-
ページ遷移でページの角が紙のようにめくれて、下から次のページが現れる
-
分割ボタンの ▾ を押すと操作の候補が開き、選ぶとボタンの文言がその操作に替わる
-
ページ遷移で一覧の項目名が大きくなりながら移り、そのまま次のページの見出しになる
-
見出しの横のキャラクターの目がカーソルを追い、近づくとまばたきする
-
面積で割合を見せるツリーマップのグラフが、タブの切り替えで組み替わる
-
設定の歯車のアイコンが 2 つ噛み合って回り、止まると軽く戻る
-
郵便番号を入れると、都道府県・市区町村・町名が順に流れ込んで埋まる
-
カーソルが通った本文の語に淡いマーカーが引かれ、少しずつ消えていく
-
表示中の文字を押すとその場で入力欄になり、保存すると元の表示に戻る
-
ページ遷移で点の格子が押した所から膨らんで画面を埋め、しぼむと次のページになっている
-
右下のヘルプの丸がパネルへ形を変えて広がり、よくある質問が吹き出しで順に出る
-
カーソルの丸が、乗った丸いボタン・カード・リンクの行と同じ形に変わって重なる
-
アンケートの賛否の棒グラフが中央の線から左右に伸び、質問ごとに比べられる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。