オーバーレイ
ページの上に重ねて表示する、モーダルや通知の演出です。背景を暗くして弾みながら開くモーダルや、画面の隅から滑り込んで時間がたつと消えるトーストを、デモとコードで紹介しています。
オーバーレイのインタラクション（23件）
-
-
右下のヘルプの丸がパネルへ形を変えて広がり、よくある質問が吹き出しで順に出る
-
一覧の行を押すと右に詳細のパネルが開き、別の行を押すと中身だけが入れ替わる
-
絞り込みのパネルが右から開き、選んだ条件がチップになって積まれ、閉じると一覧のカードが並び替わる
-
本文の文字を選ぶと編集のツールバーが浮かび、選んだ範囲に合わせて動く
-
設定のシートが段に重なって開き、戻ると手前が滑って抜ける
-
カートに入れると右からカートのパネルが入り、追加した行が光る
-
リアクションのボタンに重ねると絵文字が並んで弾み、カーソルに近いものが大きくなる
-
ニュースレターの登録ポップアップが、画面の右下の隅から弾んで出る
-
使い方ツアーで、暗い幕に開いた穴が部品から部品へ形を変えて移り、吹き出しが付いていく
-
「…」のボタンを押すと、メニューがボタンの角から広がって開く
-
リンクにホバーすると、行き先のプレビューのカードが少し遅れて浮かぶ
-
ページの上端からお知らせのバーが降りてきて、閉じると畳まれてページが詰まる
-
Cookie の同意バナーが下からせり上がり、選ぶと畳まれて消える
-
検索のオーバーレイが全画面に広がり、候補が順に現れる
-
サムネイルを押すと、ライトボックスで画像がその場から拡大して開く
-
ドロワーメニューが左から滑り込み、ページを押しのけて背景が暗くなる
-
トーストの通知が次々と奥へ重なり、ホバーで縦に広がる
業務画面に組み込む場合は、WEBアプリケーションのページをご覧ください。
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。