カードコード生成用
星評価付きのレビューカード
星の評価・感想・名前を載せる、口コミ用のカード。
用途・説明
商品やサービスの口コミを、星の評価と一緒に見せるカードを作成します。ネットショップの商品ページ、店舗サイト、アプリの紹介ページなどに向いています。星は0.5刻みで表示でき、評価の数値も文字で伝えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[レビューデータの例]- 評価（1〜5）・感想・名前・日付を3件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「星評価付きのレビューカード」を実装してください。 ## 表示内容 [レビューデータの例] （各カード：星の評価、感想、名前、日付） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カード間隔 20px - カード内は上から 星 → 感想 → 名前と日付 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 20px 24px - 星：5つ並べ、1つ 18px、間隔 2px。評価ぶんは #1463F0、残りは #DCE4F0。0.5刻みに対応 - 感想：15px、line-height 1.8、色 #1B2A44、最大4行で省略。星の下 12px - 名前と日付：12px、色 #5F6D84。カードの下端に揃える ## 状態 - 動きは付けない - 感想が省略された場合は「続きを読む」で全文を開けるようにする案を併記する ## マークアップ・アクセシビリティ - 一覧は ul / li - 星の並びは装飾として aria-hidden="true" を付け、「5点中4.5点」のテキストをスクリーンリーダー向けに用意する - 星の色と、残りの星の色の違いが、色覚の違いに関係なく区別できること ## 出力形式 - [使用技術]のコードを1つ出力 - レビューデータを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。