Cliently Testimonialsの制作会社・スタジオお客様の声セクションデザインとプロンプト

このテンプレートについて

Cliently Testimonialsは判断の履歴を残しており、このお客様の声セクションを生んだブリーフは4,333文字。「Here's what they shared about their experience working with our team」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。ページ全体は黒 #18181Bの下地、白 #F4F4F5の文字でできている。納品物はReactとTailwind CSSで、1920x1392で記録しているため、コードを書く前に枠が決まっている。モーションの予算は1500msのトランジション、ループする動画の下地。主題ではなく構造を借りる。お客様の声セクションとその数値は、そのまま自社ブランドに移せる。

対象

このお客様の声セクションを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく14px〜56pxの可変型サイズ、46px刻みの余白を渡せ。
お客様の声のコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
複数案件を同時に進めるスタジオ責任者は、このお客様の声セクションを他ページが踏襲する型として使う。

含まれる内容

邪魔にならないナビゲーションバー. 短いリンク列と1つの操作がお客様の声セクションの上に載り、寸法は14px〜56pxの可変型サイズ、46px刻みの余白で抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに1920x1392の構図の上に載るため、その下のメディアは端から端まで届きます。
目分量ではなく実測. リストは短く（14px〜56pxの可変型サイズ、46px刻みの余白、1500msのトランジション）、システム全体を手作業で確認できる。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。再現は同じ数値で検証する。
ループが背景になる. 動画は1920x1392の構図の最下層にあり、文字はその上に配置され、間に何も挟まない。自動再生が使えないときは1920x1392のポスター画像が構図を保つため、レイアウトが崩れることはありません。
枠線のないカード. 文章を流し込む場所にパネルを並べている。お客様の声セクションを見渡せるのはそのためだ。パネルは罫線ではなく余白で区切るため、グリッドは静かに見えます。パネル1枚につき1つの考え。この参考は1920x1392で収録しました。

モーションとインタラクション

文字が分割して現れる

ページの入場は一語ずつの入場だけなので、維持すべき動きのアイデアは1つで済む。タイミングは1つの値から導かれるので、行が長ければ手で調整しなくても長くなる。この参考は1920x1392で収録しました。

ミリ秒で書かれた時間

コントロールは1500msで変化し終えるので、触れられた時点でページが応答し、反応が遅れて見えることはない。状態変化ごとに値が書かれているので、ブラウザの初期値が使われることはない。挙動1つにつき時間1つ。

お客様の声セクションの再配置

ここでのレスポンシブは尺度が変わるという意味であり、階層は変わらない（スケールは段階式ではなく可変）。テキストはファーストビュー内に残り、操作部はタップできる大きさを保ち、低減モーションも尊重されている。再配置しても、どの幅でもアクションに届く。この参考は1920x1392で収録しました。

お客様の声セクションの背後にある順序

注意は散らばらず、導かれる。「Here's what they shared about their experience working with our team」が最初のフレームからその役割を担っている。視線はまず表示サイズの一行に落ち、次に支えるコピー、最後に操作へ向かう。実績は、載る場合でもお客様の声の壁ではなく帯か1行に留まる。その順番が設計そのものである。制作会社の読み手は、選択肢より先に訴求を受け取る。