お客様の声・実績コード生成用
満足度の円グラフ
「96%が満足」を、ドーナツ型のグラフで。
用途・説明
アンケートの満足度などを、ドーナツ型の円グラフと大きな数字で見せるパーツを作成します。グラフ用のライブラリを使わず、SVGだけで描きます。数字の根拠となる調査の概要を、すぐ横に添える指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[割合]- 例：96
[説明]- 例：「満足」と回答
[調査の概要]- 例：ご利用者アンケート（2025年3月、回答1,024名）
[使用技術]- 例：HTML/CSS + SVG、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「満足度の円グラフ」を実装してください。 ## 表示内容 - 割合：[割合]% - 説明：[説明] - 調査の概要：[調査の概要] ## レイアウト - PC：左に円グラフ、右に説明と調査の概要。間隔 40px、上下中央揃え - スマホ：円グラフ → 説明の順に縦並び、中央揃え - 円グラフの中央に、割合の数字を重ねる ## デザイン - 円グラフ：直径 160px、線の太さ 16px のドーナツ型。SVG の circle と stroke-dasharray で描く - 塗りの部分：#1463F0。残りの部分：#1463F0 の15%の淡い色 - グラフは真上（12時の位置）から時計回りに塗る。線の端は丸める - 中央の数字：40px、font-weight 700、色 #1463F0。「%」は数字の45%の大きさ - 説明：24px、font-weight 700、色 #1B2A44 - 調査の概要：13px、line-height 1.7、色 #5F6D84 ## 動作 - 画面に入ったときに、グラフが0%から目標の割合まで 1秒で伸びる - 割合の値を変えるだけで、グラフと数字の両方が変わるようにする ## アクセシビリティ - SVG に role="img" と aria-label（例：「96%が満足と回答」）を付ける - 動きは prefers-reduced-motion で無効化し、最初から最終的な状態を表示する ## 注意点 - 調査の概要を省略しない ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。