このテンプレートについて
Cognitra Featureは640x470で記録し、ギャラリー用の画像ではなく仕様として残した。「We provide all-in-one AI automation services in one place」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。色はくすんだのオレンジ #877A73の下地、グレー #D2CDC5の文字に限り、Helvetica, Arialで組んでいる。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。動きは0.08sのトランジションだけで完結する。初見用ではなく、作り直しに耐えるAI・SaaSプロダクトの機能紹介セクションのブリーフとして扱う。
対象
- この機能紹介セクションは、キックオフに同席していない相手へ260pxのブレイクポイントを説明する必要があるチームに応える。
- 機能紹介セクションをモデルに指示する人は、3,241文字のプロンプトを出発点に使う。
- 見出しをCognitra Featureと同じ長さに保ったまま機能紹介セクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 意図的に細いナビゲーション. 細いバーを機能紹介セクションの上に重ね、左にワードマーク、リンクはHelvetica, Arialで組みます。そのため構図はコンテンツが先、装飾は後に読めます。260px未満では、リンクが全画面オーバーレイに畳まれます。ラベルは260pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。バーの要素はわずか数個なので、コンポーネントライブラリなしで組み直せます。
- 必要な箇所だけ可変. 文字サイズは固定の段階ではなく26px〜32pxのクランプで指定するため、ディスプレイの行はブレイクポイント間で飛ばずに比例を保ちます。操作要素はタップできる大きさを保ち、コピーはどの幅でも読み順を変えません。
- 構図そのものがコンテンツ. 640x470で構図は完成しています。コピー、メディア、操作要素はすべてブリーフで名指しされています。ページは640x470の1つの構図です。コピーが変わっても崩れないのはそのためです。フレームはそのまま、主題だけを変えてください。
- ブリーフで固定した寸法. ブリーフの寸法はすべて、測り直せる数値だ（14pxで固定した表示サイズ、100vhのセクション、32px刻みの余白、0.08sのトランジション）。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
モーションとインタラクション
ミリ秒で書かれた時間
アニメーションの予算は小さく、明示されている。0.08s。適用先は入場ではなく状態変化だ。イージングは再生時間と一緒に指定されている（0.08s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
静止も設計
スクロールライブラリはない。640x470の構図は静止したままで、動くのは自分に反応する要素だけだ。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。
AI・SaaSプロダクトがここで得るもの
SaaSの機能紹介セクションを発注するとき難しいのは、ファーストビューが何を言わないかを決めること。 Cognitra Featureはそれを先に答えている。見出しの一行と、その後ろのナビゲーション、数値の行、背景のクリップだ。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。この参考は640x470で収録しました。
機能紹介セクションを支える数値
具体的な数値は古びる。640x470に合う値が自社の枠に合うとは限らない。それでもブリーフが14pxで固定した表示サイズ、100vhのセクションを書くのは、明示された値のほうが明示されていない値より変更しやすいから。この機能紹介セクションに、初期値任せの部分はない。
機能紹介セクションを自社のものにする
一行、1書体、1アクセント。この3つの差し替えがデザインを最も変える。動かさないほうがよい値は14pxで固定した表示サイズ、100vhのセクション、32px刻みの余白、0.08sのトランジション、260pxのブレイクポイント。変えるべきなのは主題の部分だ。
よくある質問（FAQ）
Cognitra Featureのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは3,241文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Cognitra FeatureはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Cognitra Featureのトランジションを残したまま、時間だけ変えることはできますか？
モーションはレイアウトと同じ粒度で指定されています。状態変化は0.08sの範囲で収束します。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。
