このテンプレートについて
Arceage StatsはAI・SaaSプロダクト向けの実用的な参考だ。機能紹介セクションはすでに配置され、寸法も測られ、いつでも作り直せる。ページ自身の見出しは「Maximize Your Yield」で、構図はその言葉をそのまま中心に組まれている。配色は黒 #101010の下地で、書体はInstrument Serif。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。最初の画面で意図が伝わる必要があるAI・SaaSプロダクトの機能紹介セクションには、この参考が適している。
対象
- この機能紹介セクションは、640x470の画角をクライアントの3回の修正に耐えさせたい制作会社のために作った。
- この機能紹介セクションにブロックを足していく社内チームには、56pxで固定した表示サイズ、120px刻みの余白を変えずに新しいブロックへ引き継ぐ必要がある。
- 機能紹介セクションをモデルに指示する人は、7,826文字のプロンプトを出発点に使う。
含まれる内容
- 刻みを名指しするブリーフ. リストは短く（56pxで固定した表示サイズ、120px刻みの余白）、システム全体を手作業で確認できる。余白は文字と同じ単位で書かれ、そのまま比較できる。
- ファーストビューに置く根拠. 数値はカードではなく文字として組みます。ディスプレイサイズのInstrument Serifに、1段下のラベルを添えます。ラベルは数値の下、ブリーフ最小の段階に置くため、その行は装飾ではなくデータとして読めます。数値は1行に収めてください。
- 1画面に収まる構造. 機能紹介セクションは、コピーが何より先に届くように組まれています。階層は文字が担い、640x470のフレームが構図を保ち、補助の値は静かに留まります。ページは640x470の1つの構図です。コピーが変わっても崩れないのはそのためです。
- スケールがスタイルになる. 書体はサイズと一緒に書いてある（Instrument Serif、56px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、56pxの範囲でディスプレイの行がまとまります。
モーションとインタラクション
入場の動きが決め手
見出しは一括でフェードインしない。タイプライターのように導入文が打ち出される。文字が現れる順序そのものが語りを担うため、静止画との差はここで生まれる。実装はいくつかのトランジションで、アニメーションライブラリは使っていない。この参考は640x470で収録しました。
静止も設計
これは640x470の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。静止も有効な選択だ。
Arceage Statsで動くもの
トレードオフは、アニメーションを見返す楽しみがないこと。報われるのは読み順で、タイプライター演出は装飾ではなく状態を確認するために動く。この機能紹介セクションで、動くために動く要素はない。この参考は640x470で収録しました。
機能紹介セクションを自社のものにする
素直な差し替えには限界がある。製品が別の階層を必要とするなら、56pxで固定した表示サイズ、120px刻みの余白が邪魔になる。その場合は順序を先に、値を後に変える。自社のアクセントも、参考例のアクセントと同じコントラスト検証を通過する必要がある。
機能紹介セクションの背後にある順序
機能訴求型のレイアウトは製品の機能を並べる。これは読み手を1つの判断へ導く。その経路は見出し、数値の行、背景のクリップと、56pxで固定した表示サイズ、120px刻みの余白の取り方に表れる。 SaaSの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Arceage Statsの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは7,826文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Arceage Statsの機能紹介セクションを別の技術スタックで作り直せますか？
Arceage StatsはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Arceage Statsのトランジションを残したまま、時間だけ変えることはできますか？
モーションはレイアウトと同じ粒度で指定されています。状態変化は1秒未満の範囲で収束します。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。この参考は640x470で収録しました。
