製品画面を見せるファーストビュー

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

書き換える項目

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

[キャッチコピー]

例：予約の管理を、ひとつの画面で。

[サブコピー]

見出しを補足する1〜2文

[ボタン文言]

例：無料ではじめる

[画像のパス]

製品のスクリーンショット。例：/images/app.png

[画像の説明]

例：予約一覧が並ぶ管理画面

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはLP制作に慣れたWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「製品画面を見せるファーストビュー」を実装してください。

## 表示内容
- メイン見出し：[キャッチコピー]
- サブコピー：[サブコピー]
- メインボタン：[ボタン文言]
- ボタンの下の補足：「クレジットカード不要」のような短い一文を置ける場所（中身は仮でよい）
- 製品のスクリーンショット：[画像のパス]（内容：[画像の説明]）

## レイアウト
- すべて中央揃えで、上から 見出し → サブコピー → ボタン → 補足 → スクリーンショット
- テキスト部分の最大幅 760px、スクリーンショットの最大幅 1080px
- セクション上の余白 PC 96px / スマホ 56px。下の余白は 0 にして、スクリーンショットがセクションの下端で切れるようにする
- ボタンとスクリーンショットの間隔 PC 64px / スマホ 40px
- スマホでも、最初の画面内に見出しとボタンが収まること

## デザイン
- 背景：上から下へ #F7F9FC → #EBF2FF のグラデーション
- 見出し：clamp(32px, 5.5vw, 56px)、font-weight 700、line-height 1.3、色 #1B2A44、text-wrap: balance
- サブコピー：17px（スマホ 15px）、line-height 1.9、色 #5F6D84、見出しの下 20px
- ボタン：高さ 56px、左右の padding 32px、角丸 9999px、背景 #1463F0、文字 #FFFFFF・16px・font-weight 700、サブコピーの下 32px
- 補足：13px、色 #5F6D84、ボタンの下 12px

## スクリーンショットの見せ方
- ブラウザ風の枠で囲む：上部に高さ 36px のバー（背景 #F4F6FA、左に直径 10px の丸を3つ）
- 枠：角丸は上だけ 16px、枠線 1px solid #E2E8F0、影 0 24px 64px rgba(27,42,68,.16)
- 画像は枠の幅いっぱいに表示し、下側 20% ほどをセクションの下端で切る（overflow: hidden）
- 画像がまだない場合に備え、同じ比率（16:10）の仮の画面（淡い色の四角と線）を用意する

## 画像の扱い
- img 要素で実装し、width と height を指定してレイアウトのずれを防ぐ
- 最初に見える画像なので loading="lazy" は付けず、fetchpriority="high" を付ける
- スマホ用に幅の小さい画像を出し分けられるよう、srcset と sizes を書く

## アクセシビリティ
- 見出しは h1。ページ内に h1 は1つだけ
- スクリーンショットの alt には[画像の説明]を入れる
- ブラウザ風の枠の丸などの装飾は、スクリーンリーダーに読み上げられないようにする
- ボタンのコントラスト比 4.5:1 以上、フォーカスリングを表示

## 出力形式
- [使用技術]のコードを1つ出力
- スクリーンショットの差し替え方と、切れる量を調整する箇所をコメントで説明