アイコン
開く・閉じるといった状態の切り替えを、形の変化で伝えるアイコンの演出です。ハンバーガーのアイコンが × に変わって戻る動きなどを、デモとコードで紹介しています。
アイコンのインタラクション（24件）
-
-
設定の歯車のアイコンが 2 つ噛み合って回り、止まると軽く戻る
-
虫めがねのアイコンの柄が伸びて × になり、検索語を消すボタンに替わる
-
電池のアイコンが左から満ちて色が移り、雷のマークが跳ねる
-
Wi-Fi のアイコンの弧が内側から順に立ち、つながると点が光る
-
表示切り替えのアイコンで、格子の四角が一覧の行へ組み替わる
-
鍵のアイコンのつるが上がって開き、また閉じる
-
ゴミ箱のアイコンのふたが開いて紙が落ち、閉じる
-
紙飛行機のアイコンが飛び去り、反対側から戻る
-
音量のアイコンの波が順に出て、ミュートで × に変わる
-
コピーのアイコンを押すとチェックに変わって戻る
-
地図のピンのアイコンが落ちて弾み、足元の影が縮んで濃くなる
-
更新の矢印のアイコンが回り、終わるとチェックに変わる
-
カメラのシャッターのアイコンで、羽根が回りながら閉じて開く
-
ブックマークのアイコンを押すと下から満ちて保存され、リボンが揺れる
-
＋ のアイコンが回って － に変わり、アコーディオンの開閉を示す
-
封筒のアイコンのふたが開き、中の手紙がのぞく
-
ベルのアイコンが揺れ、通知の点が付く
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。