4 件グリッドお客様の声
この「4 件グリッドお客様の声」は、短いひと言コメントを 4 枚のカードで均等に並べ、声の量感をコンパクトに見せるパーツです。レイアウトは grid-template-columns:repeat(4,1fr) の 4 列で、各カードは左端に border-left:3px solid のアクセント罫線、本文 &l…
このパーツの使いどころと実装ポイント
この「4 件グリッドお客様の声」は、短いひと言コメントを 4 枚のカードで均等に並べ、声の量感をコンパクトに見せるパーツです。レイアウトは grid-template-columns:repeat(4,1fr) の 4 列で、各カードは左端に border-left:3px solid のアクセント罫線、本文 <p> と <cite> の発言者名だけのミニマル構成。1 件ごとの情報を絞ることで、限られた縦幅に多くの声を詰め込めます。
向いている場面
飲食店やサロン、アプリ、ECなど、短い感想が数多く集まるサービスに向きます。「対応が早い」「提案が的確」といった一言が並ぶことで、特定の評価軸への安心感を面で伝えられます。長文の体験談を読ませたい高関与商材より、軽快に信頼を積み上げたい場面向きです。
カスタマイズと注意点
- コメントは 角度を散らすと効果的です。スピード・品質・サポートなど評価点が重ならないよう選びます。
- 4 列は情報密度が高い分、文字が小さめ（
13px）です。スマホでは720px以下で 2 列に折り返す指定があり、それでも読みづらければ件数を絞ってください。 - カードを増減するときは
repeat()の数値を列数に合わせて変更します。
よくある質問
コメントは何件まで増やせますか？
グリッドなのでカードを足すだけで増やせますが、列数の指定 repeat(4,1fr) を件数に合わせて変えるとバランスが整います。1 行に詰め込みすぎると文字が小さくなるため、4 件または 8 件など列数で割り切れる数にそろえるのがおすすめです。
短いコメントしかなくても使えますか？
むしろ短いひと言コメントを並べることを前提にしたパーツです。長い体験談を入れるとカードの高さがそろわず見栄えが崩れるため、長文を見せたい場合は大型引用型など別の声パーツを使ってください。