実績を添えたファーストビュー

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

書き換える項目

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

[キャッチコピー]

例：請求書づくりを、3分で。

[サブコピー]

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

[ボタン文言]

例：無料ではじめる

[実績]

事実のみ。例：導入1,200社以上、評価4.8（レビュー320件）

[ロゴ画像]

導入企業のロゴ。4〜6社ぶんのパスと社名

[使用技術]

例：HTML/CSS、React + Tailwind CSS

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

## 表示内容
- メイン見出し：[キャッチコピー]
- サブコピー：[サブコピー]
- メインボタン：[ボタン文言]
- 実績：[実績]
- 導入企業のロゴ：[ロゴ画像]

## レイアウト
- すべて中央揃えで、上から 見出し → サブコピー → ボタン → 実績 → ロゴの列
- テキスト部分の最大幅 760px、ロゴの列の最大幅 960px
- 上下の padding PC 96px / スマホ 56px
- スマホでも、最初の画面内に見出し・ボタン・実績の1行目までが収まること

## デザイン
- 背景：#FFFFFF
- 見出し：clamp(30px, 5vw, 52px)、font-weight 700、line-height 1.3、色 #1B2A44
- サブコピー：17px（スマホ 15px）、line-height 1.9、色 #5F6D84、見出しの下 20px
- ボタン：高さ 56px、左右の padding 32px、角丸 9999px、背景 #1463F0、文字 #FFFFFF・16px・font-weight 700、サブコピーの下 32px

## 実績の見せ方
- ボタンの下 28px に、実績を横に並べる（項目の間隔 32px、あいだに 1px の縦線 #E2E8F0）。スマホでは折り返す
- 評価：星5つ（16px、色 #F5B63F）＋数字（16px、font-weight 700）＋件数（13px、色 #5F6D84）
- 数字の実績：数字を 20px・font-weight 700・色 #1B2A44、ラベルを 13px・色 #5F6D84
- 星は小数の評価に合わせて、一部だけ塗れるようにする（例：4.8 なら5つ目を8割）

## ロゴの列
- 実績の下 48px に「導入企業」などの小さな見出し（12px、letter-spacing 0.15em、色 #8A96AA）
- ロゴは高さ 28px に揃えて横に並べる（間隔 48px、スマホは 3列のグリッドで折り返す）
- ロゴはグレー1色（不透明度 60%）に揃え、主張しすぎないようにする
- ロゴが用意できない場合に備え、社名のテキストで代用できるようにする

## 実装方法
- 実績の数字とロゴは、データ（配列）にまとめて差し替えやすくする
- ロゴ画像は width / height を指定し、loading="lazy" は付けない（最初に見えるため）
- 評価の情報を構造化データ（JSON-LD）に入れる場合の注意点を、コメントで1〜2文補足する

## アクセシビリティ
- 見出しは h1
- 星の評価は「5点満点中4.8点」のように読み上げられるラベルを付け、星そのものは aria-hidden="true"
- ロゴの alt には社名を入れる
- ボタンのコントラスト比 4.5:1 以上、フォーカスリングを表示

## 出力形式
- [使用技術]のコードを1つ出力
- 掲載前に確認すべき点（数字の時点、ロゴの使用許可）をコメントで挙げる