ナビゲーションコード生成用
シンプルなヘッダーナビ
ロゴ・メニュー・ボタンを1行にまとめた、定番のヘッダー。
用途・説明
ロゴ、ページ内メニュー、CTAボタンを横1行に並べるヘッダーを作成します。スマホではハンバーガーメニューに切り替わり、キーボード操作にも対応したコードが得られます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分に表示する名前
[メニュー項目]- 例：機能、料金、導入事例、よくある質問
[ボタン文言]- 例：お問い合わせ
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で、サイト共通ヘッダーを実装してください。 ## 表示内容 - 左：ロゴ（テキスト「[サービス名]」で代用） - 中央〜右：メニュー [メニュー項目] - 右端：CTAボタン「[ボタン文言]」 ## レイアウト・デザイン - 高さ 64px、背景 #FFFFFF、下端に 1px solid #E2E8F0 - 画面上部に固定（position: sticky） - コンテンツ最大幅 1200px、左右 padding 24px - メニュー文字：15px、色 #1B2A44、項目間の間隔 28px - 現在のページのメニューは文字色 #1463F0 と下線（2px）で示す - CTAボタン：高さ 40px、角丸 9999px、背景 #1463F0、文字 #FFFFFF ## スマホ（768px未満） - メニューとCTAを隠し、右端にハンバーガーボタン（44×44px）を表示 - ボタンを押すと、ヘッダー直下に全幅のメニューパネルを開く - パネル内はメニューを縦並び（各行の高さ 48px 以上）、最後にCTAボタン ## アクセシビリティ - <header> と <nav aria-label="メインメニュー"> を使用 - 現在のページには aria-current="page" - ハンバーガーボタンに aria-expanded と aria-controls、ラベル「メニューを開く／閉じる」 - Escapeキーでメニューを閉じ、フォーカスをボタンに戻す - focus-visible のスタイルを全リンク・ボタンに用意 ## 出力形式 - [使用技術]のコードを1つ出力 - JavaScriptはメニュー開閉に必要な最小限にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。