お客様の声・実績コード生成用
アンケート結果の横棒グラフ
「選んだ理由」などの回答を、多い順に並べる。
用途・説明
アンケートの回答を、多い順に横棒グラフで見せるパーツを作成します。「導入の決め手」「よかった点」など、複数回答の結果を伝えるのに向いています。いちばん多い回答だけ色を強くして、ひと目で分かるようにします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問]- 例：導入の決め手は？
[回答のリスト]- 項目名と割合（%）を4〜6個
[調査の概要]- 例：複数回答、回答 512名
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「アンケート結果の横棒グラフ」を実装してください。 ## 表示内容 - 質問：[質問] - 回答： [回答のリスト] - 調査の概要：[調査の概要] ## レイアウト - 全体をカードで囲む。最大幅 640px - 各行：左に項目名（幅 120px）、中央に棒、右に割合。スマホでは項目名を棒の上に置く - 割合の多い順に並べる（並べ替えはコードのなかで行う） ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 28px - 質問：18px、font-weight 700、色 #1B2A44 - 項目名：15px、色 #1B2A44 - 棒：高さ 20px、角丸 6px、背景 #EDF1F7 - 棒の塗り：1位は #1463F0、2位以下は #1463F0 の55%の淡い色 - 割合：15px、font-weight 700、色 #1463F0、右揃え、等幅の数字 - 調査の概要：12px、色 #5F6D84、カードの最後に ## 動作 - 画面に入ったときに、棒が左から伸びる（0.8秒、上の行から0.1秒ずつずらす） ## アクセシビリティ - 表としても読めるよう、table 要素（項目・割合）でマークアップし、棒は装飾として扱う - 色の違いだけに頼らず、順位が並び順で分かるようにする - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。