オーバーレイ
ページの上に重ねて表示する、モーダルや通知の演出です。背景を暗くして弾みながら開くモーダルや、画面の隅から滑り込んで時間がたつと消えるトーストを、デモとコードで紹介しています。
オーバーレイのインタラクション（26件）
-
-
ドロワーメニューが左から滑り込み、ページを押しのけて背景が暗くなる
-
トーストの通知が次々と奥へ重なり、ホバーで縦に広がる
-
コマンドパレットが ⌘K で開き、打つたびに候補が絞られる
-
ボトムシートが下から上がり、ハンドルを引き下げて離すと閉じる
-
ホバーでツールチップの吹き出しが矢印の先から弾んで出る
-
トーストの通知が右上から滑り込み、タイマーが尽きると消える
-
背景が暗くなり、モーダルが弾みながら拡大して開く
業務画面に組み込む場合は、WEBアプリケーションのページをご覧ください。
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。