お客様の声・実績コード生成用
段違いに並べるレビューの壁
長さの違う声を、すき間なくたくさん並べる。
用途・説明
長さの異なるレビューを、段違い（メイソンリー）のレイアウトでたくさん並べるセクションを作成します。「こんなに多くの人が使っている」という量の印象を伝えたいときに向いています。JavaScriptを使わず、CSSだけで組む指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[レビューのリスト]- コメント・名前・星の数を9〜12件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「段違いに並べるレビューの壁」を実装してください。 ## 表示内容 [レビューのリスト] （各カード：星の評価、コメント、アイコン、名前） ## レイアウト - CSS の columns を使った段組み。PC：3列、タブレット：2列、スマホ：1列 - 列の間隔 16px、カードの下の余白 16px - カードが列の途中で分割されないよう break-inside: avoid を指定する ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 20px - 星：14px、色 #F5B63F - コメント：14px、line-height 1.8、色 #1B2A44 - アイコン：28px の円。名前：13px、font-weight 700、色 #5F6D84 - スマホでは、最初の4件だけ表示し、「もっと見る」ボタン（枠線 #1463F0、文字 #1463F0）で残りを表示する - 「もっと見る」の上に、白へのグラデーションを重ねて続きがあることを示す ## アクセシビリティ - ul / li でマークアップし、各カードは figure - 星は「5段階中4」のように、画像ではなく文字で読み上げられるようにする（aria-label） - 「もっと見る」は button 要素で、aria-expanded を付ける ## 出力形式 - [使用技術]のコードを1つ出力 - レビューを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。