お客様の声・実績コード生成用
大きな引用で見せる1件の声
いちばん伝えたい声を、1件だけ大きく。
用途・説明
代表的なお客様の声を1件だけ選び、大きな引用として見せるセクションを作成します。セクションの区切りや、料金表の直前など、背中を押したい場所に置くと効果的です。画像を使わず、文字と余白だけで印象に残る構成にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[引用文]- 2行程度の短いコメント
[名前と肩書き]- 例：佐藤 健（サンプル工業 営業部長）
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはタイポグラフィに強いWebデザイナーです。 以下の条件で「大きな引用で見せる1件の声」のセクションを実装してください。 ## 表示内容 - 引用文：[引用文] - 人物：[名前と肩書き]（顔写真またはイニシャルの円を添える） ## レイアウト - すべて中央揃え。最大幅 800px、左右中央に配置 - 上から 引用符 → 引用文 → 人物情報 の順 - セクションの上下に PC 120px / スマホ 72px の余白 ## デザイン - 引用符：セリフ体の「“」を 96px で、色は #1463F0 の25%の淡い色 - 引用文：PC 32px / スマホ 22px、font-weight 700、line-height 1.6、色 #1B2A44、明朝体（セリフ体） - 顔写真：48px の円 - 名前：14px、font-weight 700、色 #1B2A44。肩書き：12px、色 #5F6D84 - 引用文と人物情報の間：32px ## マークアップ - figure のなかに blockquote と figcaption - 引用符は装飾なので疑似要素で描き、読み上げさせない - 引用文の改行は、意味のまとまりで折り返すよう工夫する（text-wrap: balance を使う） ## 注意点 - 実在の方の声を載せる前提のため、文言を勝手に書き換えない ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。