カードコード生成用
お客様の声カード
コメント・名前・肩書きを、信頼感のある形で。
用途・説明
利用者のコメントを、引用符のアイコン・本文・顔写真（またはイニシャル）・名前と肩書きで構成するカードとして並べます。導入事例やレビューのセクションに使えます。コメントの長さが違っても崩れないレイアウトを指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[お客様の声リスト]- コメント・名前・肩書きのセットを3件程度
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「お客様の声カード」のセクションを実装してください。 ## 表示内容 [お客様の声リスト] （各カード：コメント本文、顔写真またはイニシャル、名前、肩書き） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カード間隔 24px - 行ごとにカードの高さを揃え、名前と肩書きのブロックは常にカードの下端に配置する - カード内は上から 引用符アイコン → コメント本文 → 人物情報 の順 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 28px - 引用符アイコン：24px、色は#1463F0の30%程度の淡い色 - コメント本文：15px、line-height 1.9、色 #1B2A44 - 顔写真：40px の円形。画像がない場合は、イニシャル1文字を淡い背景色の円に表示する - 名前：14px、font-weight 700。肩書き：12px、色 #5F6D84 ## マークアップ - 各カードは figure 要素、コメントは blockquote、人物情報は figcaption で実装する - 引用符アイコンは装飾扱い（aria-hidden="true"） - 顔写真の alt は空にする（名前がすぐ横にあるため） - セクションの見出しは h2 ## 注意点 - コメントが長い場合も省略（…）せず、全文を表示する - 実在の人物の声として掲載するため、コメントの文言を勝手に書き換えないこと。サンプル文を入れる場合は、仮の文章だと分かるコメントを残す ## 出力形式 - [使用技術]のコードを1つ出力 - カードを1件追加・削除するときの手順をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。