インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
見出しの語の下に手描きの下線が引かれて消える
-
ローディング中に 12 本の線が順に濃くなるスピナー
-
ローディング中に丸の中を波打つ液体が満ちていく
-
ローディング中に粘りのある玉がくっついて離れる
-
ヒーローの見出しの後ろで円錐グラデーションの光が回る
-
グラデーションの光の筋が見出しの文字を横切る
-
ヒーローの背景で網点の大きさが波のように膨らんでは引く
-
バッジの円周に沿った文字がゆっくり回る
-
見出しの同じ単語が縦に重なり、波のようにずれる
-
ヒーローの背景でノイズの流れに沿って無数の光の線が流れる
-
カードが途切れず横に流れ続けるカルーセル
-
1 年分のカレンダーのマス目が順に色づくグラフ
-
ローディング中に二重らせんの点が回り続ける
-
同心円のメーターが順に満ちるリング型のグラフ
-
ローディング中に円弧が伸び縮みしながら回る
-
文字化けしながら単語が切り替わる
-
ヒーローの背景でぼかした色の塊が漂うオーロラ
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。