お客様の声・実績コード生成用
業種で絞り込めるお客様の声
自分に近い人の声を、すぐに見つけられる。
用途・説明
業種や利用目的のチップで、お客様の声を絞り込めるセクションを作成します。読む人が「自分と同じ立場の人の声」を見つけやすくなり、声の数が多いサービスに向いています。絞り込んだ結果の件数も伝える指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[お客様の声リスト]- コメント・名前・業種のセットを6〜9件
[業種のリスト]- 例：製造、小売、医療、IT
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「業種で絞り込めるお客様の声」を実装してください。 ## 表示内容 - 絞り込みのチップ：すべて、[業種のリスト] - お客様の声： [お客様の声リスト] （各カード：業種のラベル、コメント、アイコン、名前） ## レイアウト - 上にチップを横並び（スマホでは横スクロール） - その下にカードを PC：3列、タブレット：2列、スマホ：1列。間隔 16px ## デザイン - チップ：高さ 36px、左右padding 16px、角丸 999px、枠線 1px solid #DCE4F0、背景 #FFFFFF、文字 14px・font-weight 700・色 #5F6D84 - 選択中のチップ：背景 #1463F0、枠線 #1463F0、文字 #FFFFFF - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px - 業種のラベル：12px、font-weight 700、背景 #EDF1F7、色 #5F6D84、角丸 999px - コメント：15px、line-height 1.8、色 #1B2A44 - 名前：13px、font-weight 700、色 #5F6D84 ## 動作 - チップを押すと、その業種のカードだけを表示する。「すべて」で全件に戻す - 該当する声が0件のときは「この業種の声は準備中です」と表示する - 選んだ業種を URL のクエリ（?industry=）に反映し、再読み込みしても保たれるようにする ## アクセシビリティ - チップは button 要素で、aria-pressed を切り替える - 絞り込んだ結果の件数を aria-live="polite" で伝える（例：「製造の声 3件」） - 色だけでなく、選択中のチップにはチェックマークを添える ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。