検索バーのあるヘッダー

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[サービス名]

ロゴ部分に表示する名前

[検索欄の文言]

例：商品名・キーワードで探す

[右側のアイコン]

例：お気に入り、カート、ログイン

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「検索バーのあるヘッダー」を実装してください。

## 表示内容
- 左：ロゴ（テキスト「[サービス名]」で代用）
- 中央：検索欄（プレースホルダー：[検索欄の文言]）
- 右：[右側のアイコン]（アイコンの下に小さなラベル）

## レイアウト
- 高さ 72px、背景 #FFFFFF、下に 1px solid #E2E8F0
- 検索欄は残りの幅いっぱい（最大 560px）。ロゴとアイコンとの間隔 32px
- アイコンの間隔 20px

## デザイン
- 検索欄：高さ 44px、角丸 999px、背景 #F1F5FC、枠線なし、左に虫めがねのアイコン（18px、色 #5F6D84）、文字 15px
- 検索欄のフォーカス時：背景 #FFFFFF、枠線 2px solid #1463F0
- アイコン：線のアイコン 22px、色 #1B2A44。ラベルは 10px、色 #5F6D84
- カートに商品があるときは、アイコンの右上に件数のバッジ（#1463F0）を付ける

## 動作
- 検索欄で Enter を押すと検索結果ページへ移動する（form 要素、method="get"）
- 入力中は右端に「×」（入力を消す）ボタンを表示する

## レスポンシブ
- 768px 未満：1段目にロゴとアイコン、2段目に検索欄を全幅で置く
- アイコンのラベルはスマホでは非表示にし、aria-label で補う

## アクセシビリティ
- 検索欄は form 要素に role="search" を付け、入力欄に見えないラベル（aria-label="サイト内検索"）を付ける
- アイコンのボタンは 44×44px 以上のタップ領域
- 件数のバッジは aria-label に含める（例：カート、2点）

## 出力形式
- [使用技術]のコードを1つ出力