お客様の声・実績コード生成用
導入前と導入後の声
使う前の悩みと、使ったあとの変化を並べる。
用途・説明
お客様の「導入前の悩み」と「導入後の変化」を、矢印でつないで見せるカードを作成します。何がどう良くなったかが具体的に伝わるため、業務改善のツールやサービス、スクール、施術などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[事例のリスト]- 導入前・導入後・お客様の名前を2〜3件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「導入前と導入後の声」を実装してください。 ## 表示内容 [事例のリスト] （各事例：導入前の悩み、導入後の変化、お客様の名前・業種） ## レイアウト - 1つの事例は、左に「導入前」のカード、中央に右向きの矢印、右に「導入後」のカード - スマホでは縦に並べ、矢印を下向きにする - 事例どうしの間隔 32px。各事例の下に、お客様の名前・業種を右揃えで添える ## デザイン - カード共通：背景 #FFFFFF、角丸 12px、padding 24px - 「導入前」のカード：枠線 1px solid #E2E8F0。ラベルは背景 #EDF1F7・文字 #5F6D84 - 「導入後」のカード：枠線 2px solid #1463F0。ラベルは背景 #1463F0・文字 #FFFFFF - ラベル：12px、font-weight 700、角丸 999px、padding 4px 14px - 本文：16px、font-weight 700、line-height 1.7、色 #1B2A44。数字が入る場合は、数字だけ #1463F0 にする - 矢印：24px、色 #1463F0 - 名前・業種：13px、色 #5F6D84 ## アクセシビリティ - 各事例は article 要素。「導入前」「導入後」は見出し（h3）としてマークアップする - 矢印は aria-hidden="true" - 色だけでなく、ラベルの文字で導入前と導入後を区別できるようにする ## 出力形式 - [使用技術]のコードを1つ出力 - 事例を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。