アプリ紹介のファーストビュー

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

書き換える項目

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

[アプリ名]

例：Toolly

[キャッチコピー]

例：毎日の記録を、10秒で。

[サブコピー]

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

[ストアのURL]

iPhone版とAndroid版、それぞれのリンク先

[画像のパス]

アプリ画面のスクリーンショット（縦長）

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはLP制作に慣れたWebデザイナー兼フロントエンドエンジニアです。
以下の条件で、[アプリ名]の「アプリ紹介のファーストビュー」を実装してください。

## 表示内容
- アプリのアイコン（角丸の四角）とアプリ名
- メイン見出し：[キャッチコピー]
- サブコピー：[サブコピー]
- ストアへのボタン：iPhone版とAndroid版の2つ（リンク先：[ストアのURL]）
- QRコードを置く場所（PCのみ表示）
- スマホの形の枠に入れたアプリ画面：[画像のパス]

## レイアウト
- PC：2カラム（テキスト 6 : スマホの枠 5）、縦方向は中央揃え
- コンテンツ最大幅 1120px、上の padding 96px、下の padding 0（スマホの枠の下側がセクションの下端で切れるようにする）
- 768px未満：テキスト → スマホの枠の縦並び、中央揃え。上の padding 48px
- スマホでも、最初の画面内に見出しとストアへのボタンが収まること

## デザイン
- 背景：#EBF2FF
- アイコン：48px、角丸 12px、背景 #1463F0。右にアプリ名（16px、font-weight 700）
- 見出し：clamp(30px, 5vw, 52px)、font-weight 700、line-height 1.3、色 #1B2A44、アイコンの下 24px
- サブコピー：17px（スマホ 15px）、line-height 1.9、色 #5F6D84
- ストアへのボタン：各ストアが配布している公式のバッジ画像を使う。高さ 48px に揃え、横に並べる（間隔 12px）
- 公式バッジが用意できるまでの仮として、高さ 48px・角丸 10px・背景 #1B2A44・文字 #FFFFFF のボタンを置く
- QRコード：96px 四方、白い枠（padding 8px、角丸 12px）。横に「スマホで読み取る」（12px）

## スマホの枠
- 幅 280px、角丸 40px、枠線 10px solid #1B2A44、影 0 24px 64px rgba(27,42,68,.2)
- 上部中央に、カメラ部分を表す小さな丸い切り欠きを描く
- 中にアプリ画面の画像を表示する（object-fit: cover）
- 画像がまだない場合に備え、淡い色の四角と線で仮の画面を用意する

## 実装方法
- スマホの枠はCSSだけで描く（端末の写真は使わない）
- 見ている端末に合わせて、iPhoneではiPhone版、AndroidではAndroid版のボタンを先に並べる処理を入れてもよい（判定できないときは両方出す）
- 画像は width / height を指定し、fetchpriority="high" を付ける

## アクセシビリティ
- 見出しは h1
- ストアへのボタンには「iPhone版をダウンロード」「Android版をダウンロード」のように読み上げられるラベルを付ける
- アプリ画面の alt には、画面の内容を短く書く
- スマホの枠や切り欠きなどの装飾は、スクリーンリーダーに読み上げられないようにする

## 出力形式
- [使用技術]のコードを1つ出力
- 公式バッジは各ストアの利用ガイドライン（大きさ・余白・色を変えない）に従う必要があることを、コメントで補足