このテンプレートについて
Cortexa FAQはAI・SaaSプロダクト向けのFAQセクションの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。ページ自身の見出しは「How do I start the process of buying a home?」で、構図はその言葉をそのまま中心に組まれている。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。動きは400msのトランジション、ループする動画の下地だけで完結する。書いている間は開いておく。4,955文字のブリーフが、自社ページにそのまま持ち込める部分。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、FAQセクションを作り直すときに背後の意図を推測せずに済む。
対象
- 引き継ぎメモに1826x1302のフレームを書け。次のビルドがページから導き直さずに済む。
- このFAQセクションは、SaaSのコピーが0.1sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- 複数案件を同時に進めるスタジオ責任者は、このFAQセクションを他ページが踏襲する型として使う。
含まれる内容
- 実装まで持ち込む数値. ブリーフの寸法はすべて、測り直せる数値だ（15px刻みの余白、400msのトランジション）。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
- 全画面の動画、パネルなし. ミュートしたループクリップ1本が1826x1302のフレームを覆い、0.1sで再生されます。 cover指定で配置し、コピーはその上に重なります。ブリーフは動画にオーバーレイを載せないため、色は曇りません。自動再生が使えないときは1826x1302のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- 文字の背後に全面配置したクリップ. メディアは物語ではなく雰囲気を担う。1826x1302の0.1sループがすべての後ろに敷かれる。自動再生が使えないときは1826x1302のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- 構図そのものが登録フォーム. ここでする判断は1つだけです。フォームに入力するか、離れるか。画面のほかの要素はすべてその判断を支えます。入力欄は1列に積むため、タブ順は読み順と一致します。この参考は1826x1302で収録しました。
モーションとインタラクション
状態変化にも時間を与える
時間は短く揃っている（400ms）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。ページが設計されているように読めるのは時間が短いからで、既定の遅い値ならこの構図は崩れる。
タイムラインではなくループ
背景の映像は0.1秒、1826x1302でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。映像はミュートかつインラインなので、操作なしで最初のフレームが出る。
Cortexa FAQを仕様として読む
このページの関係はすべて検証できる値になっている。15px刻みの余白、400msのトランジション。 Cortexa FAQが単に再現できるだけでなく作り直せるのはそのため。このFAQセクションに、初期値任せの部分はない。
Cortexa FAQの最初の読みの順序
このページの上部と、よくあるSaaSのランディング画面を比べる。どちらも見出しとアクションを持つが、ここではフォームが同じ強さで競合せず、固定の順序に収まる。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1826x1302で収録しました。
FAQセクションを自社のものにする
白紙から始める場合と比べる。ここでは枠（1826x1302）と15px刻みの余白、400msのトランジションがすでに決まっているので、作業は構成ではなく差し替えになる。新しいコピーも同じ表示サイズで組み、何かを足す前にコントラストを確認し直します。
よくある質問（FAQ）
Cortexa FAQの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは4,955文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Cortexa FAQはReactとTailwind CSSにどこまで依存していますか？
Cortexa FAQはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Cortexa FAQから作り直したページを、クレジット表記なしで公開してもよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1826x1302で収録しました。
