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