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

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

Averra Testimonialsは制作会社・スタジオ向けのお客様の声セクションの作り方を一つ示し、それを生んだ手順も公開している。「A truly collaborative process from start to finish. The results completely exceeded our initial expectations」は、レイアウトが背負うために組まれた一行。ページ全体は白 #EBEFE5の下地、黒 #111111の文字、明るいのライム #A5E038のアクセントでできている。納品形式はReactとTailwind CSSなので、お客様の声セクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。モーションの予算は0.04sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)、ループする動画の下地。初見用ではなく、作り直しに耐える制作会社・スタジオのお客様の声セクションのブリーフとして扱う。

対象

モデルに指示を出すなら、お客様の声セクションから始めて1920x1208のフレームをプロンプトに保持させろ。
プロダクトマーケターで、コピーの背後に4.6sのループ映像があってもお客様の声セクションが読める状態を保ちたい。
このお客様の声セクションを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。

含まれる内容

一行に収めたナビゲーション. 短いリンク列と1つの操作がお客様の声セクションの上に載り、寸法は28px刻みの余白、0.04sのトランジションで抑えてある。背後の構図と競合しないためだ。リンクはワードマークより小さいサイズで組み、#A5E038の操作だけがバーの中で重みを持つ要素です。
最下層に置く動画. ブリーフは動画を1920x1208、ループを4.6sと指定し、すべてのテキスト要素はその画幅に合わせて置かれる。自動再生が使えないときは1920x1208のポスター画像が構図を保つため、レイアウトが崩れることはありません。
既定値に頼らない構成. サイズは継承ではなく明記されています（28px刻みの余白、0.04sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)のイージング）。書体やコピーを差し替えても、この関係は保たれます。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
大見出し級の数字. 統計はタイポグラフィとして扱います。数値はディスプレイサイズ、ラベルはブリーフ最小の段階、色付きのカードではなく#A5E038か文字色の上に置きます。数値だけが#A5E038のアクセントを持ち、周囲は文字色に留まります。

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

ホバーは控えめに

ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態、必要なときに内容を送るスライダー）。すべての要素を的にせずに、ページは反応して感じられる。各状態が変えるプロパティは1つなので、フィードバックが読み取りやすい。この参考は1920x1208で収録しました。

見出しが自ら組み上がる

一語ずつの入場だけで、ページ上のほかの要素は何も演じない。アニメーションライブラリではなく少数のトランジションで済ませているので、移植の負担が小さい。要素は一つに抑える。増やすとページが演じ始める。この参考は1920x1208で収録しました。

制作会社のブリーフが効く理由

このデザインは1画面で主張を完結させる。メディアは1920x1208の4.6sループ映像だ。雰囲気はメディアが、訴求はコピーが担い、両者を分けているのが28px刻みの余白、0.04sのトランジション。制作会社の読み手に、訴求へ至る最短の正直な道を示す。

Averra Testimonialsを仕様として読む

3,584文字のブリーフがそのまま完全な仕様になる。ただし構造を支えている部分は短く、実質は28px刻みの余白、0.04sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)のイージングに集約される。このお客様の声セクションに、初期値任せの部分はない。

Averra Testimonialsの最初の読みの順序

ブロックを入れ替えてもページは表示される。ただし主張としては読めなくなる。ナビゲーション、数値の行は順序であり、28px刻みの余白、0.04sのトランジションはその順序でしか機能しない。制作会社の読み手は、選択肢より先に訴求を受け取る。

よくある質問（FAQ）

このAverra Testimonialsの項目はどういう構成になっていますか？

このページに引用している内容はすべて、収録された3,584文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。

Averra Testimonialsのブリーフをコピーすると何が手に入りますか？

気分を書いた説明ではなく、制作のための仕様です。1920x1208のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。

この項目にReactとTailwind CSSが書かれているのはなぜですか？

Averra TestimonialsはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。