ナビゲーションコード生成用
スクロールで細くなる固定ヘッダー
読み進めると高さが縮み、画面を広く使える。
用途・説明
ページの上部に固定され、スクロールすると高さが縮んで影が付くヘッダーを作成します。最初はゆったり見せつつ、読み進めたあとは本文の邪魔をしません。縦に長いランディングページや、記事の多いサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分に表示する名前
[メニュー項目]- 例：機能、料金、事例
[ボタン文言]- 例：無料ではじめる
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「スクロールで細くなる固定ヘッダー」を実装してください。 ## 表示内容 - ロゴ（テキスト「[サービス名]」で代用） - メニュー：[メニュー項目] - 右端のボタン：[ボタン文言] ## 2つの状態 - ページ最上部：高さ 80px、背景は透明、影なし、ロゴ 22px - スクロール後（40px 以上）：高さ 56px、背景 rgba(255, 255, 255, 0.92) にぼかし（backdrop-filter: blur(8px)）、下に 1px solid #E2E8F0、ロゴ 18px - 切り替えは 0.2秒でなめらかに ## デザイン - position: sticky; top: 0。コンテンツの最大幅 1120px、左右padding 24px - メニュー：15px、色 #1B2A44、項目の間隔 32px。hover で #1463F0 - ボタン：背景 #1463F0、文字 #FFFFFF、角丸 999px。縮んだ状態では高さ 36px ## 動作 - スクロールの検知は IntersectionObserver（ページ上部に置いた目印の要素）で行う - ヘッダーの高さが変わっても、下のコンテンツが動かないようにする（高さの変化はヘッダーの内側の余白で行う） - ページ内リンクで移動したとき、見出しがヘッダーに隠れないよう scroll-margin-top を指定する ## レスポンシブ - 768px 未満ではメニューをハンバーガーメニューにまとめる。高さは 56px で固定し、縮む動きはしない ## アクセシビリティ - header 要素と nav 要素（aria-label="メインメニュー"）を使う - 現在のページには aria-current="page" - 高さの変化は prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。