このテンプレートについて
AI・SaaSプロダクト向けにAboutページを作り直す前にBuild With Usを読むと、構成とそれを支える仕様がここに揃っていることが分かる。配色は白 #FFFFFFの下地、深いのイエロー #434437の文字、ブルー #337EC8のアクセントに絞り、書体はInter。納品形式はReactとTailwind CSSなので、Aboutページ全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。新しいセクションを足す前にAboutページの順序を決めたいときに使う。このページの残りは、Aboutページをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、Aboutページを作り直すときに背後の意図を推測せずに済む。
対象
- AIビルダーを使う人で、モデルに任せるのではなく640x472のフレームが最初から入った仕様を求めている。
- AI・SaaSプロダクトのAboutページを作るチームで、スクリーンショットを写すのではなく実測値（100vhのセクション、48px刻みの余白）を求めている。
- Aboutのコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
含まれる内容
- ページのグリッドに乗るバー. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#337EC8の1つだけ。いずれも独自の背景を持たずにAboutページの上に載ります。バーは独自の背景を持たずに640x472の構図の上に載るため、その下のメディアは端から端まで届きます。6本目のリンクを足す前に、折りたたみ状態を設計する。
- ブリーフで固定した寸法. 寸法は収録時点のブリーフに100vhのセクション、48px刻みの余白として書かれている。再現は近似ではなく検証になる。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。差し替えるのは書体かコピーで、スケールではありません。
- 書体が決める階層. 大見出しはInterで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。行の高さは単一の共通値ではなく、サイズの刻みに合わせる。
- 中段を担うパネル. 構造はグリッドそのものだ。同じ大きさのパネルをInterで組み、視線が下ではなく横へ動くように並べる。各パネルは1つの考えとアイコンを組み合わせるため、視線の流れは横方向に保たれます。
モーションとインタラクション
インタラクションは局所に
インタラクティブな層は小さく予測可能だ（すべてのカードではなくボタンとリンクのホバー状態）。ほかは静止したままで、構図への集中が保たれる。モーダルを開いたりスクロールを乗っ取ったりする要素はなく、インタラクションは要素の内側にとどまる。この参考は640x472で収録しました。
モーションはほぼない
仕様はアニメーションを省き、640x472のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。モーションは装飾ではなくフィードバックとして扱う。スクロールのタイムラインは要らない。
このAboutページが正しい理由
Build With Usが機能するのは、階層を飾りではなく判断で決めているから。ブリーフが100vhのセクション、48px刻みの余白を定めているので、新しいコピーは枠を開き直さず、その中に収まる。 Build With Usは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
Build With Usで最初に変えるもの
多くの人はアクセントカラーから始める。代わりに訴求から始める。見出しの一行を書き換え、ブルー #337EC8を自社のメディアで検証し直す。色に触る前に、見出しの一行を書き換える。
Aboutページの再配置
流動的なスケールと段階的なスケールは、広い画面では似て見える。ビューポートを狭めると差が出る。32px〜48pxのクランプか、固定の跳ね幅かという違いだ。ビューポートに応じて変わるのは尺度で、順番は変わりません。
よくある質問（FAQ）
Build With Usのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは6,252文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Build With Usのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された6,252文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Build With UsのAboutページを別の技術スタックで作り直せますか？
Build With UsはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
