お客様の声・実績コード生成用
成果の数字つき導入事例の一覧
「作業時間 −60%」など、成果を先に見せる。
用途・説明
導入事例を、成果の数字を先頭に置いたカードで並べる一覧を作成します。会社名や写真より先に「何がどれだけ変わったか」が目に入るため、読む人が自分の課題と結びつけやすくなります。事例の個別ページへの入口として使います。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[事例のリスト]- 成果の項目・数字・会社名・概要・業種を3〜6件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「成果の数字つき導入事例の一覧」を実装してください。 ## 表示内容 [事例のリスト] （各カード：成果の項目と数字、会社名、概要、業種のタグ、「事例を読む」のリンク） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カードの間隔 24px - カード内：上に成果の帯、その下に会社名・概要・タグ - 行ごとにカードの高さをそろえ、リンクはカードの下端に置く ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow: hidden - 成果の帯：背景は #1463F0 の9%の淡い色、padding 16px 20px。左に項目（13px、font-weight 700、色 #5F6D84）、右に数字（32px、font-weight 700、色 #1463F0） - 会社名：16px、font-weight 700、色 #1B2A44 - 概要：14px、line-height 1.8、色 #5F6D84、3行で省略 - タグ：12px、背景 #EDF1F7、色 #5F6D84、角丸 999px - リンク：14px、font-weight 700、色 #1463F0 - hover：枠線を #1463F0 にし、カードを 2px 持ち上げる ## アクセシビリティ - 各カードは article 要素。会社名は h3 のなかの a 要素にし、カード全体をクリックできるようにする - 数字の「−」「+」が読み上げで伝わるよう、aria-label で「作業時間 60%減」のように補う - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。