ファーストビューコード生成用
実績の数字を並べたファーストビュー
見出しの下に3つの数字を置いて、信頼の根拠を最初に見せる。
用途・説明
見出しとボタンの下に、導入社数・継続率・満足度などの数字を3つ横に並べるファーストビューを作成します。「選ばれている」ことを最初の画面で伝えられるので、BtoBサービス、スクール、士業、施工会社など、実績が判断材料になるサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：経理の仕事を、半分の時間で。
[ボタン文言]- 例：資料をダウンロード
[実績]- 数字・単位・ラベルを3つ。例：1,200社／導入企業
[数字の注記]- 例：2026年3月時点
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「実績の数字を並べたファーストビュー」を実装してください。 ## 表示内容 - 見出し：[見出し] - ボタン：[ボタン文言] - 実績：[実績] - 注記：[数字の注記] ## レイアウト - 中央揃え。上から 見出し → ボタン → 実績の3列 - 実績は横に3つ並べ、あいだを 1px solid #E2E8F0 の縦線で区切る。ボタンとの間隔 56px - スマホ：実績は3列のまま、文字を小さくする（入りきらない場合は縦に並べる） ## デザイン - 背景 #FFFFFF - 見出し：PC 48px / スマホ 30px、font-weight 700、line-height 1.35、色 #1B2A44 - ボタン：高さ 56px、角丸 999px、背景 #1463F0、文字 #FFFFFF・font-weight 700 - 数字：PC 40px / スマホ 26px、font-weight 700、色 #1463F0。単位は 16px、色 #1B2A44 - ラベル：14px、色 #5F6D84、数字の下 4px - 注記：12px、色 #5F6D84、実績の下 16px ## 動き - 画面に入ったとき、数字が 0 から実際の値まで 1秒で増える - prefers-reduced-motion のときは、最初から実際の値を表示する ## アクセシビリティ - 実績は dl / dt / dd でマークアップし、ラベルと数字の関係を伝える - 数字が増える途中の値は読み上げさせない（aria-hidden を使い、実際の値を別に持たせる） - 見出しは h1 ## 出力形式 - [使用技術]のコードを1つ出力 - 数字は事実だけを載せ、根拠（時点・対象）を注記に書く旨を最後に補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。