オーバーレイ
ポップオーバー
Popover
ポップオーバーとは、トリガーを押すとその隣に現れ、ボタンや入力欄など直接操作できる要素を入れられる小さなパネルです。
定義
ポップオーバーは、ある要素、つまりトリガーを押したときにそのすぐ隣に現れる小さなパネルです。 ツールチップが短い説明を見せるだけで終わるのに対して、ポップオーバーの中にはボタンや入力欄、 リストのように直接操作できる要素を入れられます。たとえば共有ボタンを押すと隣に浮かぶ リンクコピー用のパネルや、フィルターアイコンの横に開く条件選択パネルがポップオーバーです。 画面全体を覆わずトリガーの近くにくっついて浮かぶので、ユーザーは自分がたった今なにを押して このパネルが出たのか、その文脈を見失わずに済みます。
なぜ重要か
ポップオーバーは、ツールチップとモーダルのあいだの空きをちょうど埋めるパターンです。 ツールチップのように軽くトリガーの脇にくっつきますが中で実際に操作でき、モーダルのように 操作を含みつつも画面を暗く覆って流れを断ち切ることはありません。だから細かい設定を変えたり、 短いメニューを選んだり、リンクをコピーしたりといった、少しで終わる作業によく合います。 必要なときだけそっと開き、用事が済めば静かに消えるので、そのつどページを移動したり大きな ウィンドウを出したりしなくても、小さな作業をその場で片づけられます。こうして重いモーダルを ここぞという時のために取っておくと ユーザーの流れはずっと滑らかになり、画面も必要以上に複雑になりません。結局ポップオーバーを うまく使う画面は、小さなことはその場で軽く、大きな決断だけモーダルで重く処理するリズムを 持つようになります。
よくある間違い
- ポップオーバーとツールチップを混同して使うことです。ただの説明にすぎないのにクリックで開く ポップオーバーに入れたり、逆にボタンが入る操作パネルをホバーで出るツールチップに入れると、 ユーザーはいつなにを期待すればいいのか迷います。
- 外側を押しても閉じないようにしてしまうことです。ポップオーバーはさっと使ってすぐ離れる軽い パネルなので、別の場所を押したときに自動で閉じないと、画面に残り続けて邪魔になります。
- 画面をほとんど覆うほど大きく複雑な内容をポップオーバーに詰め込むことです。ここまで重い作業は トリガーの脇にくっつく小さなパネルよりモーダルや別ページが向いていて、無理にポップオーバーへ 入れると位置がずれたり画面の外にはみ出して切れやすくなります。
実務のヒント
- ポップオーバーはクリックで開き中で操作できる点でツールチップと違い、画面を覆わずトリガーの脇に くっつく点でモーダルと違います。この性格を活かして、共有やフィルター、簡単なメニューのように 文脈を保ったまま少しだけ処理したいことに使いましょう。
- 外側の領域を押すかESCキーを押したときにポップオーバーが閉じるようにしましょう。開け閉めが 軽いほど、ユーザーは気軽に開いてみて、用事が済めば自然に次へ進めます。
- トリガーとパネルを視覚的につないでおきましょう。矢印のしっぽを付けたり位置をぴったり寄せて、 このパネルがたった今押したそのボタンから出たという関係が一目で見えるようにすると、文脈が 崩れません。
AIに頼む
下に貼り付けるUI要件が、ポップオーバー・ツールチップ・モーダルのどれに合うか判定して。基準はこう考えて：クリックで開いて、中にボタン・入力欄・リストみたいに直接操作する要素が入るならポップオーバー、ホバーで浮かんで短い説明だけ見せるならツールチップ、画面を暗く覆うくらい重くて複雑な作業ならモーダル。[機能説明 — 例：共有ボタンの横のリンクコピーパネル]について3つのうち1つを選んで、理由を一行で添えて。ポップオーバーと判定したらトリガーのすぐ横に付けて文脈が保たれるように、重い作業ならモーダルか別ページに移すよう教えて。
[トリガー — 例：フィルターアイコンボタン]を押すと、そのすぐ横に出るポップオーバーを作って。トリガーをクリックしたときに横に付けて開くようにして、中には[入れる内容 — 例：条件選択のチェックボックスと適用ボタン]を入れて。外側をクリックするかESCキーを押すと閉じるようにして、吹き出しの矢印（しっぽ）を付けるかトリガーにぴったり寄せて、このパネルがさっき押したボタンから出たことが一目でわかるようにして。トリガーが画面の端にあってもパネルが画面外に切れないように、位置を反対側に反転させる（flip）処理も入れて。画面をほぼ覆うくらい大きくならないように、中身はちょっとで終わる程度に抑えて。
下に貼り付けるポップオーバーのコードを点検して、ルールに反する部分を直して。まず外側クリックとESCキーの両方でちゃんと閉じるか確認して、抜けがあれば追加して。ホバーでしか出ないのに中にボタン・入力欄が入っているなら、クリックで開くポップオーバーに変えて、逆に短い説明だけならツールチップに整理して。トリガーが画面の端にあるときパネルが画面外に切れないように位置を反転させて、トリガーとのつながりが見えないなら吹き出しの矢印（しっぽ）を付けるか、位置をトリガーに寄せて。変えた項目を「問題→修正」の形でまとめて。