お客様の声・実績コード生成用
導入先の内訳を見せる帯グラフ
どんな業種に使われているかを、1本の帯で。
用途・説明
導入先の業種や企業規模の内訳を、1本の帯グラフと凡例で見せるパーツを作成します。「自分の業種でも使われている」と分かることが安心につながります。円グラフより場所を取らず、スマホでも読みやすい形です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：業種別の導入割合
[内訳のリスト]- 項目名と割合（%）を3〜5個。合計100%
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「導入先の内訳を見せる帯グラフ」を実装してください。 ## 表示内容 - 見出し：[見出し] - 内訳： [内訳のリスト] ## レイアウト - 最大幅 720px、中央配置 - 見出し → 帯グラフ → 凡例 の順に縦並び、すべて中央揃え - 凡例は横に並べ、スマホでは2列に折り返す ## デザイン - 見出し：18px、font-weight 700、色 #1B2A44 - 帯：高さ 32px、角丸 8px。各項目の幅を割合に合わせる。項目のあいだに 2px の白いすき間 - 色：割合の多い順に、#1463F0 → その55%の淡い色 → 25%の淡い色 → #DCE4F0 - 幅が十分にある項目は、帯のなかに割合を白い文字（12px、font-weight 700）で表示する。淡い色の上では文字色を #1B2A44 にする - 凡例：色の四角（12px、角丸 3px）、項目名と割合（14px、色 #47566E） ## 動作 - 凡例に hover またはフォーカスすると、対応する帯の部分以外を薄くする ## アクセシビリティ - 帯には role="img" と、内訳をすべて含む aria-label を付ける - 凡例は ul / li。色だけでなく、項目名と割合を必ず文字で示す - 合計が100%にならない場合は、コンソールに警告を出す ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。