検索バー前面ヘッダー
このヘッダーは、ロゴのすぐ横に幅の広い検索バーを置き、検索を主役に据えた構成です。全体を display:flex で横並びにし、検索ボックスには flex:1 を与えて空きスペースを広く占有させています。
このパーツの使いどころと実装ポイント
このヘッダーは、ロゴのすぐ横に幅の広い検索バーを置き、検索を主役に据えた構成です。全体を display:flex で横並びにし、検索ボックスには flex:1 を与えて空きスペースを広く占有させています。入力欄には type="search" を使い、虫眼鏡アイコン付きの送信ボタンを枠内に収めて、入力欄とボタンが一体の角丸ボックスに見えるようにまとめています。
向いている場面
- 商品点数が多く、検索からの導線が中心になる EC サイト
- 記事やコンテンツを探して読むメディア・ブログ
- 図書・資料・データベースなど一覧性より検索性が重要なサービス
カスタマイズと注意点
差し替えどころは、プレースホルダーの文言（何で検索できるかを具体的に書く）と、検索フォームの最大幅です。広すぎると間延びするため max-width で上限を設けています。実装上は、入力欄を form で囲み、ボタンを type="submit" にして Enter キーでも送信できるようにしてください。アイコンだけのボタンは目的が伝わりにくいので、aria-label で「検索」と補足します。狭い画面ではロゴと検索を縦積みにするか検索を折りたたみアイコンに退避させると、横幅不足での崩れを防げます。
よくある質問
検索ボタンがアイコンだけですが問題ありませんか
見た目はアイコンのみで構いませんが、音声読み上げや目的の伝達のために、ボタンにaria-labelで検索という説明を付けてください。あわせてボタンをsubmit扱いにし、入力欄でEnterを押しても送信できるようにすると操作性が上がります。
スマホで検索バーが入りきりません
横幅が足りない場合は、ロゴと検索バーを縦に積むか、通常は検索アイコンだけを表示してタップで入力欄を開く方式にします。検索を主役にする構成のままでも、狭い画面では一段表示に切り替えると崩れません。