ナビゲーションコード生成用
2段組みのヘッダー
上段に電話や補助リンク、下段にメインメニューを分けて置く。
用途・説明
上段に電話番号・営業時間・補助的なリンク、下段にロゴとメインメニューを置く、2段組みのヘッダーを作成します。情報量の多いコーポレートサイト、病院、学校、自治体、工務店などのサイトに向いています。スクロールすると上段だけが隠れ、下段が固定されます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分に表示する名前
[上段の内容]- 例：電話番号、受付時間、採用情報、English
[メニュー項目]- 例：診療案内、医師紹介、アクセス、お知らせ
[ボタン文言]- 例：Web予約
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「2段組みのヘッダー」を実装してください。 ## 表示内容 - 上段：[上段の内容] - 下段：ロゴ（テキスト「[サービス名]」で代用）、メニュー：[メニュー項目]、ボタン：[ボタン文言] ## レイアウト - 上段：高さ 36px。左に電話番号と受付時間、右に補助リンクを置く - 下段：高さ 72px。左にロゴ、中央〜右にメニュー、右端にボタン - コンテンツの最大幅 1120px、左右padding 24px ## デザイン - 上段：背景 #1B2A44、文字 rgba(255, 255, 255, 0.85)・12px。電話番号は font-weight 700 で #FFFFFF - 下段：背景 #FFFFFF、下に 1px solid #E2E8F0 - メニュー：15px、font-weight 700、色 #1B2A44、項目の間隔 28px。hover で #1463F0 - ボタン：高さ 44px、背景 #1463F0、文字 #FFFFFF、角丸 8px ## 動作 - 下段だけを position: sticky; top: 0 にし、スクロールすると上段は画面の外へ流れる - 電話番号は tel: リンクにする ## レスポンシブ - 768px 未満：上段は電話番号だけを残す（または非表示にして、下段に電話のアイコンボタンを置く） - メニューはハンバーガーメニューにまとめ、上段の補助リンクはメニューの最後に入れる ## アクセシビリティ - 上段の補助リンクは nav 要素（aria-label="サブメニュー"）、下段は nav 要素（aria-label="メインメニュー"）にして区別する - 上段の小さな文字も、背景とのコントラスト比 4.5:1 以上 - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。