お客様の声・実績コード生成用
星評価のまとめ
平均点と、星ごとの割合をひと目で。
用途・説明
レビューの平均点を大きく表示し、その横に星5〜星1の割合を横棒で示すパーツを作成します。ECサイトの商品ページや、アプリ・サービスのレビュー一覧の冒頭に置きます。星ごとの行をクリックして絞り込める形にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[平均点とレビュー数]- 例：4.8、1,204件
[星ごとの件数]- 星5〜星1それぞれの件数
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「星評価のまとめ」を実装してください。 ## 表示内容 - 平均点とレビュー数：[平均点とレビュー数] - 星ごとの件数：[星ごとの件数] ## レイアウト - PC：左に平均点のブロック、右に星ごとの横棒グラフ。間隔 40px - スマホ：平均点 → 横棒グラフの順に縦並び - 横棒グラフの各行：左に星の数、中央に棒、右に割合（%） ## デザイン - 全体：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px 32px - 平均点：48px、font-weight 700、色 #1B2A44 - 星：18px、色 #F5B63F。小数点は、星を部分的に塗って表す - レビュー数：13px、色 #5F6D84 - 棒：高さ 8px、角丸 999px、背景 #EDF1F7、塗りは #1463F0 - 行の文字：13px、色 #5F6D84。行の間隔 8px ## 動作 - 割合は件数から計算する（合計が0件のときは、すべて0%にして「まだレビューがありません」と表示） - 行をクリックすると、その星の数で絞り込むコールバックを呼ぶ - 表示されたときに、棒が左から伸びる（0.6秒） ## アクセシビリティ - 平均点は「5段階中4.8」と読み上げられるようにする - 各行は button 要素にし、「星5のレビュー 940件で絞り込む」のような aria-label を付ける - 棒の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。