お客様の声・実績コード生成用
濃い背景の実績の帯
ページの途中に、数字だけの力強い帯を。
用途・説明
濃い色の背景に、白い大きな数字で実績を並べる帯を作成します。ページの途中に置くと区切りになり、数字が強く印象に残ります。会社案内や採用ページで「数字で見る○○」として使うのにも向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：数字で見る実績
[実績のリスト]- ラベル・数字・単位のセットを3〜4つ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「濃い背景の実績の帯」を実装してください。 ## 表示内容 - 見出し：[見出し] [実績のリスト] ## レイアウト - 画面の幅いっぱいの帯。上下padding PC 72px / スマホ 48px - 見出しは中央揃え、その下 40px に実績を横並び（PC：3〜4列、スマホ：2列） - 各ブロックのあいだに、半透明の白い区切り線 ## デザイン - 背景：#1B2A44 - 見出し：18px、font-weight 700、色 #FFFFFF - 数字：PC 48px / スマホ 36px、font-weight 700、line-height 1.1、色 #FFFFFF - 単位：数字の40%の大きさ、色 #7FA9F7 - ラベル：13px、色 rgba(255,255,255,0.72) - 区切り線：1px solid rgba(255,255,255,0.16) ## アクセシビリティ - dl / dt / dd でマークアップする。見出しは h2 - ラベルの文字は、背景とのコントラスト比 4.5:1 以上を保つ - 数字と単位が、分かれずに続けて読み上げられるようにする ## 出力形式 - [使用技術]のコードを1つ出力 - 背景色を変える箇所をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。