お客様の声・実績コード生成用
SNSの投稿風に見せる声
SNSでの感想を、投稿カードの見た目で並べる。
用途・説明
SNSに寄せられた感想を、投稿カードのような見た目で並べるセクションを作成します。外部の埋め込みコードを使わないため表示が速く、デザインもサイトに合わせられます。掲載の許可を取る前提で、元の投稿へのリンクを付ける指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[投稿のリスト]- 表示名・ID・本文・いいね数・元の投稿のURLを4〜6件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「SNSの投稿風に見せるお客様の声」を実装してください。 ## 表示内容 [投稿のリスト] （各カード：アイコン、表示名、ID、本文、いいねの数、元の投稿へのリンク） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カードの間隔 16px - カード内：上にアイコンと名前、中央に本文、下にいいねの数 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 20px - アイコン：40px の円 - 表示名：14px、font-weight 700、色 #1B2A44。ID：13px、色 #5F6D84 - 本文：15px、line-height 1.8、色 #1B2A44 - 本文のなかのハッシュタグは #1463F0 にする（リンクにはしない） - いいねの数：13px、色 #8A96AA。ハートの線のアイコンを添える - hover：枠線を #1463F0 にする ## 注意点 - 特定のSNSのロゴや、公式の見た目そのものは使わない（汎用的なカードにする） - 掲載には投稿者の許可が必要であることを、コードの冒頭にコメントで明記する - 本文は改変しない ## アクセシビリティ - カード全体を、元の投稿への a 要素にする（target="_blank"、rel="noopener noreferrer"、「新しいタブで開く」ことを伝える） - アイコンの alt は空にする - いいねの数は「いいね 128件」と読み上げられるようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。