結果プレビュー付き検索モーダル
ボタンか ⌘K で検索モーダルを開き、左の結果リストを ↑↓ で辿ると右にプレビューが出る。空のときは「最近開いた」と「おすすめ」。Enter か「開く」で確定、Esc で閉じる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 検索は「開く前に中身を確かめたい」場面が多い。プレビューがあれば、開いて違って戻る往復を1回に畳める
- 空の状態を空のままにしない。最近開いたものは高確率で目的地なので、入力前に並べる
- 閉じたら開いたボタンへフォーカスを戻す。キーボード利用者は「どこにいたか」を失うと戻れない
実装メモ
プレビューは枠内に収めるためオーバーレイを position:absolute（ステージ基準）にしています。実ページでは position:fixed にして body 直下に置き、開いている間は背後を inert にしてください。
コード（コピーして使えます）
<div class="smp-stage" id="smp-stage">
<header class="smp-app">
<span class="smp-logo">ミナト社内ドキュメント</span>
<button id="smp-open" class="smp-open" type="button">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<span>検索</span><kbd>⌘K</kbd>
</button>
</header>
<div class="smp-body" aria-hidden="true">
<div class="smp-ghost" style="width:60%"></div>
<div class="smp-ghost" style="width:82%"></div>
<div class="smp-ghost" style="width:74%"></div>
<div class="smp-ghost" style="width:40%"></div>
</div>
<div id="smp-overlay" class="smp-overlay" hidden>
<div class="smp-modal" role="dialog" aria-modal="true" aria-label="検索">
<div class="smp-search">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input id="smp-q" class="smp-input" type="text" placeholder="ドキュメント・人・議事録を検索" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="smp-list">
<button id="smp-close" class="smp-close" type="button" aria-label="閉じる">Esc</button>
</div>
<div class="smp-panes">
<ul id="smp-list" class="smp-list" role="listbox" aria-label="検索結果"></ul>
<section class="smp-preview" id="smp-preview" aria-live="polite"></section>
</div>
</div>
</div>
<p id="smp-status" class="smp-status" aria-live="polite"></p>
</div>