GODRICH

お客様の声 デザインの型9選、そのまま貼れる

· Godrich · 9種 · 12分で読める

LPセクションページテンプレート素のJSLPCTAボタン決済・EC

お客様の声 デザインで探しているのは、紹介文を並べただけでは伝わらない信頼を、画面の動きで示す区画のひな形です。ここにはレビュー3件の小さな帯から料金表の横の指標まで、九つの型をそのまま貼れるHTMLとSCSSでまとめました。どれもこの画面の中で実際に動きます。

01 proof-carousel-autoplay 02 proof-masonry-quote-grid 03 proof-single-quote-avatar-swipe 04 proof-rating-distribution-bars 05 proof-logo-marquee-band 06 proof-before-after-flip 07 proof-video-thumb-grid 08 proof-tweet-card-wall 09 proof-trust-metrics-band

自動再生 · タイルを押すとその項目へ · すべて1つのzip

並べた順は評判の順ではなく、信頼の材料が集まっていく順です。まず3件しかないレビューを一つの窓で順に見せ(01)、件数が増えたら高さの違うレンガ積みに広げ(02)、代表の一人を大きく立て(03)、文章の代わりに数字で要約し(04)、誰が使っているかをロゴで示し(05)、導入の前後をめくり(06)、顔と声のある動画に変えて(07)、SNSの短い反応を壁に集め(08)、最後に料金表の横で数字とバッジで受け止めます(09)。どれもキーボードで操作できて、色は九つとも共通のパレットトークンで組んであるので、自分のブランド色に置き換えても並びは崩れません。

01自動送りのレビューカルーセル

レビューカード3枚が同じ窓の中で順に出入りし、カードは複製せず、負のanimation-delayで3分の1周期ずつずらして同じキーフレームを回すので、出口と入口が重なる瞬間も画面が空きません。ドットは今のカードに合わせて横に広がり、右のボタンでその場で止められます。レビューが3〜4件だけのランディング中段の帯に収める型で、24コマ中6コマだけが動き、累積の変化面積は8.119%です。

translateXanimation-play-statearia-live
.pc.is-demo .pc__card {
  animation-name: pcSlide;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.pc.is-demo .pc__card--1 { animation-delay: -.16s; }
.pc.is-demo .pc__card--2 { animation-delay: -1.4933s; }
.pc.is-demo .pc__card--3 { animation-delay: -.8267s; }

@keyframes pcSlide {
  0%      { transform: translateX(100%); }
  8%      { transform: translateX(0); }
  33.33%  { transform: translateX(0); }
  41.33%  { transform: translateX(-100%); }
  70%     { transform: translateX(-100%); }
  70.01%  { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}

02高さの違う引用グリッド

長さがまちまちなレビュー5枚が、高さを揃えずにレンガのように積まれます。行の目盛りは8pxで、カードごとにgrid-row: spanで12・14・9・12・9行を占有し、順番に1枚ずつ前へ出ては戻ります。レビュー件数の多い製品ページ・レビュー一覧ページ向けで、累積の変化面積は28.994%、24コマ中14コマに動きがあります。

grid-rowscale:focus-visible
.qm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 8px;
  grid-auto-flow: row dense;
  column-gap: $sp-2;
  row-gap: 0;
  width: clamp(288px, 94vw, 420px);
  margin: 0;
}
.qm__card--1 { grid-row: span 12; }
.qm__card--2 { grid-row: span 14; }
.qm__card--3 { grid-row: span 9; }
.qm__card--4 { grid-row: span 12; }
.qm__card--5 { grid-row: span 9; }

03大きな引用とアバター切り替え

大きな引用の下に顔が4つ並び、選ばれた顔が変わる瞬間に引用も名前も1フレームで入れ替わります。入れ替えはsteps(1, end)の切り替えなので二枚が薄く重なるコマがなく、枠の移動だけが切り替えの直前にひと枠ずつ滑り、動きを支えます。代表顧客を一人ずつ大きく見せる企業紹介セクションの型で、24コマ中20コマに動きがあり、累積の変化面積は15.302%です。

steps(1, end)translateXaria-pressed
.qs__ring {
  grid-row: 1;
  grid-column: 1;
  border: 3px solid $pf-ink;
  border-radius: 50%;
  pointer-events: none;
  transform: translateX(calc(var(--i) * 100%));
  transition: transform $dur-base $easing;
}

.qs__cell {
  grid-row: 1;
  display: grid;
  place-items: center;
  width: var(--cell);
  height: var(--cell);
}
.qs__cell:nth-child(2) { grid-column: 1; }
.qs__cell:nth-child(3) { grid-column: 2; }
.qs__cell:nth-child(4) { grid-column: 3; }
.qs__cell:nth-child(5) { grid-column: 4; }

04評価分布のバー

5点から1点までの5行のバーが左から満ち、横の平均点とレビュー件数が最終値まで一段ずつ上がります。占有率は変数--pひとつで決まり、上から0.68・0.21・0.07・0.03・0.01、平均は4.7、件数は1,509件で最後まで留まります。ECの商品詳細の評価まとめ・アプリストア型の評点ブロック向けで、累積の変化面積は1.737%と九つの中で最も小さいです。

scaleXgrid-areaaria-label
.rd__row--5 { --p: .68; }
.rd__row--4 { --p: .21; }
.rd__row--3 { --p: .07; }
.rd__row--2 { --p: .03; }
.rd__row--1 { --p: .01; }

.rd__track { display: grid; }
.rd__bg, .rd__fill {
  grid-area: 1 / 1;
  height: 8px;
  border-radius: $r-pill;
}
.rd__bg { background: rgba(28, 27, 34, .12); }
.rd__fill {
  background: $color;
  transform: scaleX(var(--p));
  transform-origin: left center;
}

05ロゴ帯のマーキー

図形で作ったマーク8つが1行で流れ続け、帯の両端はmask-imageで舞台の色へ溶け、マークが急に切れません。速さは等速のlinearだけで、継ぎ目がずれないことは後の節で実測とともに示します。導入企業の帯・パートナー紹介の行に置く型で、24コマ中23コマまで動くのに累積の変化面積は4.311%、アニメーションは1本です。

translateXmargin-rightmask-image
.lm__band {
  box-sizing: border-box;
  width: 100%;
  padding-top: $sp-4;
  padding-bottom: $sp-4;
  border-top: 1px solid rgba(28, 27, 34, .14);
  border-bottom: 1px solid rgba(28, 27, 34, .14);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.lm__track {
  display: flex;
  align-items: center;
  width: max-content;
}

@keyframes lmRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

06前後の数値をめくるカード

導入前の数値が書かれたカードを押すとrotateY(180deg)で裏返り、導入後の数値が出ます。プレビューのループでは横向きの瞬間を見せず1フレームで表裏を切り替え、下の細いバーとバッジが中間のコマを埋めます。成果の数値を前後で比べる事例セクション向けで、24コマ中22コマに動きがあり、1コマ最大の変化面積は9.453%です。

rotateYbackface-visibilityaria-pressed
.ba__inner {
  position: relative;
  display: block;
  height: 96px;
  transform-style: preserve-3d;
  transition: transform $dur-enter $easing;
}
.ba__card[aria-pressed="true"] .ba__inner { transform: rotateY(180deg); }

.ba__face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: $sp-1;
  padding: $sp-3;
  border-radius: $r-card;
  overflow: hidden;
  backface-visibility: hidden;
  text-align: left;
}
.ba__face--front { background: $pf-cream; color: $pf-ink; }
.ba__face--back  { background: $pf-ink; color: $pf-cream; transform: rotateY(180deg); }

07動画レビューのサムネイルグリッド

再生マークの乗ったサムネイル4枚が並び、選んだ1枚が隣の枠を押しのけて広がり、常に見えている名前の下で一言が左から現れます。枠の広さはgrid-template-columnsそのものを1fr4つから2.2frへ動かしているので、押しのけられた枠も滑らかに縮みます。動画インタビューのあるレビューセクション向けで、累積の変化面積は36.411%、1コマ最大でも28.555%と九つで最も大きく動きます。

grid-template-columnsaria-expandedclip-path
.vg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: $sp-2;
  transition: grid-template-columns $dur-base $easing;
}
.vg__grid.is-open-0 { grid-template-columns: 2.2fr .6fr .6fr .6fr; }
.vg__grid.is-open-1 { grid-template-columns: .6fr 2.2fr .6fr .6fr; }
.vg__grid.is-open-2 { grid-template-columns: .6fr .6fr 2.2fr .6fr; }
.vg__grid.is-open-3 { grid-template-columns: .6fr .6fr .6fr 2.2fr; }

.vg__reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path $dur-base $ease-out;
}
.vg__item[aria-expanded="true"] .vg__reveal { clip-path: inset(0 0 0 0); }

@keyframes vgWipe {
  0%, 33%      { clip-path: inset(0 100% 0 0); }
  33.01%, 66%  { clip-path: inset(0 0 0 0); }
  66.01%, 100% { clip-path: inset(0 100% 0 0); }
}

08短文カードのウォール

短い一言のカード3枚が暗い地の上で浮かんでは沈みます。1枚は@propertyに登録した角度の変数を回すconic-gradientの縁の光が一周し、もう1枚はネオンの縁が明るさを呼吸します。SNSの反応をまとめて見せる暗いトーンのセクション向けで、平均の変化の強度は69.4で、02に次いで穏やかです。

@propertyconic-gradienttranslateY
@property --pw-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pw__card--a {
  border: 2px solid transparent;
  background:
    linear-gradient($pf-slate, $pf-slate) padding-box,
    conic-gradient(from var(--pw-angle), $pf-violet, $pf-mint, $pf-teal, $pf-violet) border-box;
}

@keyframes pwSpin {
  from { --pw-angle: 0deg; }
  to   { --pw-angle: 360deg; }
}

09信頼指標のバンド

顧客数と平均評価、初回応答時間の3枠が最終値まで一段ずつ上がり、その下の認証バッジが順にスタンプのように押されます。数字は812・1,140・1,382・1,509、3.9・4.2・4.5・4.7、38分・26分・17分・12分の四段階で切り替わり、右下のボタンで数え直せます。料金表の上下に置く信頼補強の帯の型で、累積の変化面積は8.078%、アニメーションは15本あります。

steps(1, end)grid-areaanimation-fill-mode
.tb__n {
  grid-area: 1 / 1;
  opacity: 0;
  color: $pf-cream;
  font-weight: 800;
  font-size: clamp(17px, 5.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.tb__n:last-child { opacity: 1; }

@keyframes tbSlot1 { 0% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes tbSlot2 { 0% { opacity: 0; } 22% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes tbSlot3 { 0% { opacity: 0; } 44% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes tbSlot4 { 0% { opacity: 0; } 66%, 100% { opacity: 1; } }

@keyframes tbStamp {
  0%        { transform: translateY(-8px) scale(.6); opacity: 0; }
  5%        { transform: translateY(-4px) scale(.82); opacity: 1; }
  14%       { transform: translateY(0) scale(1.08); opacity: 1; }
  22%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}

どこで壊れるか — 落とし穴

九つを仕上げるまでに、同じ失敗を五つの形で踏みました。

一つ目は、めくるカードの代表画像です。回転した面の幅はコサインで縮むため、1コマごとの面積の変化はサインに従い、90度の向きで必ず最大になります。等速でもイージングでもこの関係は変わらないので、06を素直に回すと横向きの線だけのコマが代表に選ばれました。そこでプレビューのループだけsteps(1, end)の切り替えに直し、訪問者が実際に押すときのtransition: transformは滑らかなまま残しました。切り替えだけでは動くコマが足りないので、下のバー(scaleX)とバッジ(translateY)で中間を埋めています。

二つ目は、流れるロゴの継ぎ目です。05のトラック幅を Playwright で測ると1858px、その半分は929pxです。マーク8個ぶんの幅はgetBoundingClientRect().width + margin-rightを足した合計で928.75pxとなり、半分とほぼ一致します。アニメーションの時計を0%と100%に置いて撮った2枚の絵のピクセルの差は最大でも0で、一周してもずれない証拠です。ここでflexのgapを使うと16個のマークの間に空くのは15か所だけになるため、-50%が間隔の半分だけ足りなくなって毎周跳ねます。

三つ目は、言葉の途中で切れた一枚です。24コマのサンプルは4.1667%間隔で撮られるので、長い演出は目盛りの間で切れた絵をいくつも生みます。07の一言を開く動きを30〜54%に引っ張っていたとき、韓国語の「주문서 흐름이 사」で切れたコマが代表画像に選ばれました。開く幅を1目盛りの中(33%から33.01%)へ縮め、枠の広がりはキーフレーム内のタイミング関数で後ろへ寄せ、閉じる側を長くのばして、全部開いて一言まで出たコマが勝つように直しました。

四つ目は、ループでは見えない重なりです。03の引用4枚と名前行4枚を同じgrid-area: 1 / 1に重ねていたところ、2行になる引用を選んだ瞬間に名前行が最終行の上に乗りました。自動検査はどれも.is-demoの状態しか見ないため何も拾えず、.is-demoを外して撮った Playwright の snapshot で初めて見えました。引用を1行目、名前行を2行目に分けるgrid-template-rows: auto autoで解決しています。

五つ目は、複製のいらない送りそのものです。01のカード3枚は同じ窓に重ね、-0.16s・-0.8267s・-1.4933sの負のanimation-delayで3分の1周期ずつずらして回します。70%の位置で初めて右へ戻るので、戻る瞬間は常に窓の外にあり、先頭のカードを複製して末尾に足す必要がありません。

アクセシビリティ

暗い面に明るい文字を置くこの配置は、それ自体がコントラストの試験です。九つで使った色の組み合わせを WCAG 2.1 の相対輝度の式で計算した結果が次の表で、下の4行は文字には使っていません。

前景 背景 実測コントラスト 本文の基準
クリーム #fbf7ef インク #1c1b22 15.99:1 合格
ミント #6ee7d7 インク #1c1b22 11.45:1 合格
クリーム #fbf7ef スレート #242230 14.6:1 合格
ミント #6ee7d7 スレート #242230 10.45:1 合格
インク #1c1b22 アンバー #ffd23f 11.83:1 合格
ストーン #565062 クリーム #fbf7ef 7.23:1 合格
白 #ffffff ティール #0b7269 5.79:1 合格
インク #1c1b22 オレンジ #ff4d1f 5.15:1 合格
オレンジ #ff4d1f クリーム #fbf7ef 3.1:1 不足 — 図形のみ
白 #ffffff オレンジ #ff4d1f 3.32:1 不足 — 使わない
紫 #5b3df5 スレート #242230 2.55:1 不足 — 縁の光のみ
白 #ffffff アンバー #ffd23f 1.44:1 不足 — 使わない

prefers-reduced-motion: reduceでは、九つとも動きの飾りだけを止めて、状態と情報を手元に残します。01は送りを止めてもis-onのカードと広がった点がそのまま見え、02は自動の巡回だけが止まり、ホバーとフォーカスへの浮き上がりは残ります。03は選ばれた引用と名前行だけをopacity: 1で示し、04は満ちたバーと最終値の4.7と1,509件を最初から表示します。05は流れを止めたうえでマーク8個を2行に折り返して全部見せ、両端のフェードも外します。06は回転を止めても押せば裏返る状態が残り、07は広がりを止めても開いた枠と一言が全部見えます。08は浮き沈みと光の回転が止まるだけで配置は変わらず、09は最終値の3枇とバッジを並べた姿で止まります。九つ分のSCSSとこの節までの切り替えの一式は、2htnhppuで解くzipにそのまま入っています。

読み上げの支えも地味に効きます。星の並びはrole="img"とaria-labelで「5点満点で5点」「5点満点で4点」のように伝わり(01・04)、いいねの数の128・86・47も同じ形で読まれます(08)。01の窓にはaria-live="off"を置いて自動送りを読み上げから外し、03の引用の入れ替えはaria-live="polite"で順番を待ちます。送りを止めるボタン・顔の選択・行の強調・カードの裏返しはaria-pressed(01・03・04・06)、開いた枠は07のaria-expanded、今の位置は01の点のaria-currentです。キーボードで触れる要素にはすべて:focus-visibleの輪郭を付けてあります。07のgrid-template-columnsの変化はcaniuse の実測で Chrome 107+・Firefox 66+・Safari 16.0+、08の@propertyは Chrome 85+・Firefox 128+・Safari 16.4+で動きます。05のmask-imageは標準の書き方で通りますが、古い Safari 向けに-webkit-mask-imageも併記してあります。根拠はMDN の animation-play-stateとMDN の @property、コントラストの基準はW3C の Understanding Contrast (Minimum)です。

ほかの区画のひな形はテンプレート一覧にまとまっています。同じ柱のフッター デザイン パターン9選や、09を置く料金表まわりの料金プランのインタラクション9種も合わせてどうぞ。

FAQ

レビューがまだ3件しかありません。どの型にすればよいですか

01のカルーセルがちょうど合います。3枚を複製せず負のanimation-delayで回す作りなので、3件であることが前提の構造です。件数が増えたら02のグリッドへ移り、カードのgrid-row: spanの行数を足すだけで同じ仕組みが流用できます。

自動で動く区画は、読んでいる人の邪魔になりませんか

なりません。01にはその場で止まるボタンとanimation-play-state: pausedがあり、05はポインタやフォーカスが載るとその場で止まり、07と09はポインタが載った時点でループを外して訪問者の操作に明け渡します。ほかの区画も初回の操作で自動再生を外す数行のスクリプトを載せており、04は行ごとのaria-pressedとis-pickedで選択を伝えます。04の累積の変化面積は1.737%と九つで最も小さく、数字の区画は動きで主張しません。

ロゴの帯(05)は、設定した幅のままで継ぎ目が出ませんか

出ません。実測したトラック幅は1858pxで、半分の929pxに対してマーク8個ぶんは928.75pxです。0%と100%で撮った絵を比べるとピクセルの差は最大0でした。ずれの原因はたいていgapで、間隔をmargin-rightに置き換えると半分が常にマーク8個ぶんと一致します。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。