中央検索ヒーロー

このパーツの使いどころと実装ポイント

大きな見出しと検索ボックスを画面中央に配置した、ポータルやメディア向けのヒーローセクションです。検索ボックスは display:flex で入力欄とボタンを一体化し、border-radius:9999px でまるく仕上げて柔らかい余白の背景に浮かせています。下には人気タグへのリンクを並べ、検索の入口とよく使われる導線を同時に示す構成です。背景はクリーム色から白へのやさしいグラデーションになっています。

向いている場面

記事数の多いメディア、求人やイベントの検索サイト、店舗・施設を探すポータル、ヘルプセンターのトップなど、来訪者がまず「探す」行動をとるサービスに向きます。タグで人気カテゴリへ素早く誘導できるのも利点です。

カスタマイズの勘所

• タグ部分は実際によく検索される語に差し替えると、回遊のきっかけになります
• 見出しの h1 はページの主題を端的に表す一文にします
• 検索ボックスの角丸や影を弱めると、より落ち着いた印象に調整できます

実装上は、入力欄にラベルを関連付けるか aria-label を付けると、読み上げ環境でも検索欄だと伝わります。検索ボックスは form で包み、Enter キーでも送信できるようにしてください。狭い画面では max-width:520px の指定で横幅が抑えられ、入力欄とボタンが横並びのまま自然に縮みます。