お客様の声・実績コード生成用
吹き出しで見せるお客様の声
会話のような吹き出しで、親しみやすく。
用途・説明
お客様の声を、アイコンと吹き出しで会話のように並べるセクションを作成します。かしこまった印象を避けたい、個人向けのサービスやお店、スクールなどに向いています。左右交互に並べて、リズムのある見た目にします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[お客様の声リスト]- コメントと属性（例：30代・会社員）を3〜4件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「吹き出しで見せるお客様の声」を実装してください。 ## 表示内容 [お客様の声リスト] （各行：人物のアイコン、吹き出しのなかにコメント、アイコンの下に属性） ## レイアウト - 最大幅 720px、中央配置。行の間隔 24px - 奇数行は左にアイコン・右に吹き出し、偶数行は左右を逆にする - 吹き出しの幅は、内容に合わせつつ最大 80% ## デザイン - アイコン：56px の円。画像がない場合は、淡い背景色の円に人物のシルエット - 属性：12px、色 #5F6D84、アイコンの下に中央揃え - 奇数行の吹き出し：背景 #FFFFFF、枠線 1px solid #E2E8F0、文字色 #1B2A44 - 偶数行の吹き出し：背景 #1463F0、文字色 #FFFFFF - 吹き出し共通：角丸 18px、padding 16px 20px、文字 16px・font-weight 700・line-height 1.7 - 吹き出しのしっぽは、アイコン側の角だけ角丸を 4px にして表現する（三角形は付けない） ## 動作 - 画面に入ったときに、1件ずつ下から 8px 浮き上がって表示する（0.4秒、0.1秒ずつずらす） ## アクセシビリティ - ul / li でマークアップし、コメントは blockquote - 左右の並びは見た目だけにし、読み上げの順番は上から下にする - 動きは prefers-reduced-motion で無効化 - #1463F0 の上の白い文字が、コントラスト比 4.5:1 以上になるか確認する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。