ナビゲーションコード生成用
写真に重ねる透明ヘッダー
ファーストビューの写真の上に、白い文字のメニューを重ねる。
用途・説明
ファーストビューの写真や動画の上に重ねて表示する、背景が透明のヘッダーを作成します。写真を画面いっぱいに見せたいホテル、飲食店、ブランドサイトに向いています。スクロールして写真を過ぎたら、白い背景の通常のヘッダーに切り替わります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分に表示する名前
[メニュー項目]- 例：コンセプト、お部屋、お料理、アクセス
[ボタン文言]- 例：ご予約
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「写真に重ねる透明ヘッダー」を実装してください。 ## 表示内容 - ロゴ（テキスト「[サービス名]」で代用） - メニュー：[メニュー項目] - 右端のボタン：[ボタン文言] ## 2つの状態 - 写真の上：背景は透明、ロゴとメニューは #FFFFFF、ボタンは白い枠線（1px solid rgba(255, 255, 255, 0.9)）で文字も白 - 写真を過ぎたあと：背景 #FFFFFF、下に 1px solid #E2E8F0、ロゴとメニューは #1B2A44、ボタンは背景 #1463F0・文字 #FFFFFF - 切り替えは 0.2秒でなめらかに ## デザイン - position: fixed; top: 0。高さ 72px、左右padding 32px - メニュー：14px、letter-spacing 0.08em、項目の間隔 32px - 写真の上部には、文字を読みやすくするため、上から下へ薄くなる黒のグラデーション（rgba(0, 0, 0, 0.4) → 透明、高さ 160px）を重ねる ## 動作 - ファーストビューの要素を IntersectionObserver で監視し、画面から出たら状態を切り替える - ロゴが画像の場合に、白いロゴと色付きのロゴを切り替える方法をコメントで補足する ## レスポンシブ - 768px 未満ではメニューをハンバーガーメニューにまとめる。アイコンの色も状態に合わせて切り替える ## アクセシビリティ - header 要素と nav 要素（aria-label="メインメニュー"）を使う - 写真の上の白い文字は、どの写真でもコントラスト比 4.5:1 以上になるよう、グラデーションの濃さを調整する - focus-visible のリングは、どちらの状態でも見える色にする ## 出力形式 - [使用技術]のコードを1つ出力 - サンプルとして、写真の代わりのグラデーション背景を持つファーストビューを付ける
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。