Webパーツ辞典

オーバーレイ

今の画面の上に重なって出る部品。モーダル・ツールチップ・ドロップダウンなど、閉じ方まで含めて設計するもの。

  • モーダルModal

    画面の上に重ねて出し、閉じるまで背後を操作させない窓。操作を1つのモード（mode）に閉じ込める、という意味の modal が名前の由来。

    • 重ね
    • フォーカス

  • ダイアログDialog

    利用者に判断を求める小さな窓。削除の確認のように、取り返しのつかない操作の直前に出す。

    • 重ね
    • 確認

  • オーバーレイOverlay

    モーダルやドロワーを出したときに、背後を覆う半透明の膜。背後が操作できないことを見た目で伝える。

    • 重ね

  • ボトムシートBottom sheet

    画面の下から上がってくるパネル。スマートフォンで、親指の届く位置に選択肢を出したいときに使う。

    • 重ね
    • スマホ

  • ポップオーバーPopover

    押した要素のそばに、小さな窓を重ねて出す部品。背後の操作は止めない点がモーダルと違う。

    • 重ね

  • ツールチップTooltip

    要素に触れたり、フォーカスしたときに出る短い説明。アイコンだけのボタンの意味を補うのによく使う。

    • 重ね
    • 補助

  • ドロップダウンメニューDropdown menu

    押すと下に選択肢が開くメニュー。入力欄ではなく、操作を選ばせる点がセレクトボックスと違う。

    • 重ね
    • 操作

  • コンテキストメニューContext menu

    右クリックや長押しで、その場所に応じた操作を出すメニュー。対象を指したまま操作を選べる。

    • 重ね
    • 操作

  • コマンドパレットCommand palette

    Ctrl+K（Macは⌘K）で画面の上に出る、検索窓つきの一覧。文字を打つと操作やページの候補が絞られ、矢印キーで選んで Enter で実行する。

    • 重ね
    • 操作
    • 検索

  • コーチマークCoach mark

    初めて使う人に、画面の部品を1つずつ指して説明する案内。周りを暗くして対象だけを明るく残し、「1 / 3」「次へ」「スキップ」の小窓を添える。

    • 重ね
    • 案内

  • ポップ確認Popconfirm

    削除ボタンを押すと、そのすぐそばに「削除しますか？」の小窓が出て、キャンセルと削除するの2つのボタンで答える部品。画面全体は暗くならない。

    • 重ね
    • 確認

  • トグルチップToggletip

    項目名の横の小さな「i」や「?」のボタン。押すと短い説明の吹き出しが出て、Esc か外側を押すまで出たままになる。

    • 重ね
    • 補助

  • 三点メニューKebab menu

    一覧の行やカードの右端にある「⋮」や「…」のボタン。押すと、その項目だけに効く名前の変更・共有・削除などの操作が小さく開く。

    • 重ね
    • 操作

見分け方