【Next.js】お客様の声セクションの作り方を解説

公開日: 2026年9月12日 · 読了目安 8 分

Next.js のお客様の声（導入事例）セクションの作り方。引用の型、顔写真と社名の並べ方、カルーセルにしない判断、完成セクションの流用まで。

先に結論：声は「人数」より「具体」

お客様の声は、星5つを並べる場所ではありません。誰が、何を、どのくらい改善したかを1カードに収める場所です。抽象的な称賛は、ダミーに見えます。

BtoB なら役職と社名、数値、導入前の課題を1つ。BtoC なら利用シーンと結果を1つ。カードは3〜6枚が読みやすいです。

動きは、入場の遅延か、横スクロールの弱いマーキーに留めます。自動で高速に切り替わるカルーセルは、引用を読めません。

1つ目は、顔写真だけが大きく、本文が短いことです。先に引用、後に名前です。

2つ目は、全部同じ長さのテンプレ文なことです。1枚だけ数字を入れると、他のカードも具体に見えます。

3つ目は、自動再生カルーセルです。読んでいる途中で次へ行くと、証明になりません。

md 以上は3列、モバイルは1列です。引用、名前、役職、任意でロゴ。カードの高さは揃えた方が今っぽく見えます。

引用符の装飾より、本文の行間を優先してください。

6枚以上あるなら、snap-x の横スクロールが扱いやすいです。ドットより、はみ出しが見える方が「続きがある」と分かります。

自動再生は付けないか、停止ボタンを先に置きます。

カードの入場、引用のタイポ、ロゴの配置まで揃った塊は、shadcn/ui の Card を並べるだけでは出ません。

DesignLayer でライブプレビューし、引用文と社名だけ差し替えてください。https://design-layer.com/components

無料コピーは1日3回です。今日事例1本、で足ります。

実装と原稿で繰り返し出る質問です。

公開してはいけません。プレビュー段階のプレースホルダは、公開前に実名と許諾のある文へ差し替えます。

機能紹介のあと、料金の前が扱いやすいです。BtoB はヒーロー直後にロゴマーキー、そのあと声、でもよいです。