部品 · CompactSearchBar
検索バー
検索導線、状態、選択パネル、モバイル全画面選択
- 利用範囲
- トップ / 店舗検索 / クチコミ一覧
- 更新日
- 2026-07-10
プレビュー
状態と使い方
操作例
解剖図 · PC
1エリアから探す+
2こだわりから探す
3キーワード（例：店名）
4検索する
状態
エリアから探す
こだわりから探す
キーワード（例：店名）
検索する
渋谷区
こだわりから探す3
テラス
検索する
SPモーダル
エリアから探す
関東
渋谷区
中央区
港区
新宿区
決定する
主な部品
この仕様に含まれるUI
1 件
CompactSearchBar
検索
解剖
エリアセル
アコーディオンを開く。選択済みは青緑テキスト、未選択は通常テキスト。
こだわりセル
タグパネルを開く。選択件数は青緑の丸バッジで表示する。
キーワード入力
透明背景、枠線なし。日本語IME確定中のEnter検索を抑制する。
検索ボタン
gray-900の統合CTA。PCは右端、SPは最下段に置き、押下時はscaleで軽く沈む。
状態
初期
エリア、こだわり、キーワードが空。検索ボタンだけ強く見せる。
入力済み
選択セルと件数バッジに青緑を使い、条件が入っていることを伝える。
モバイル
セルを縦積みにし、エリアとタグは画面全体を使う下方向スライドの選択面で選ぶ。
送信
Enterまたは検索ボタンで同じURL生成ロジックへ流す。
仕様値
- 高さ
- PC 56px / SP stacked
- 角丸
- PC 16px / SP 12px
- 影
- shadow-lg、面はwhite
- CTA
- gray-900、PC min 160px、検索面へ統合
- キーボード
- Enter送信、Escでパネルを閉じる
- パネル
- fixed portal、viewport残高からmax-height算出
運用ルール
検索実行はgray-900
検索実行はサイト主色ではなくgray-900の統合セルとし、主色は選択状態に残す。
パネルは本文を押し流さない
PCはポータル配置、SPはモーダルで開き、本文のレイアウトを崩さない。
検索条件は見える化する
選択件数、選択エリア、キーワードが検索前に分かる状態を保つ。