このテンプレートについて
NexaCore ControlはAI・SaaSプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。「Constant re-verification because source data can't be trusted」は、レイアウトが背負うために組まれた一行。カラースキームは白 #EBEBEBの下地で、ページはMazzard Hで組む。納品物はReactとTailwind CSSで、640x468で記録しているため、コードを書く前に枠が決まっている。新しいセクションを足す前に機能紹介セクションの順序を決めたいときに使う。
対象
- まず3カラムのグリッド、角丸18pxから決めろ。配色は後からついてくる。この機能紹介セクションを読ませているのは余白だ。
- AI・SaaSプロダクト機能紹介セクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- 機能紹介セクションをモデルに指示する人は、8,666文字のプロンプトを出発点に使う。
含まれる内容
- ブリーフで固定した寸法. ここに目分量はありません。仕様が3カラムのグリッド、角丸18px、12px刻みの余白を固定し、残りのレイアウトはその値から導かれます。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
- 1行にまとめた根拠. 数字はMazzard Hで、本文よりも見出しに近いサイズで組む。この行は上の見出しと同じマージンに揃える。
- 構図そのものがコンテンツ. 構図全体が1画面に収まり、ReactとTailwind CSSで作られています。コピー、メディア、操作要素はブリーフで名指しされています。ページは640x468の1つの構図です。コピーが変わっても崩れないのはそのためです。ファーストビューに装飾は要りません。
- 語るのは大見出しのサイズ. 最上位の文字はMazzard Hで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。ウェイトは役割ごとに指定されているため、実装時に勘で階層を決めることはありません。
モーションとインタラクション
反応はコントロールに返す
ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態）。すべての要素を的にせずに、ページは反応して感じられる。押下状態もホバーと同様に指定されているので、タップでもクリックと同じ確認が返る。インタラクティブな層は小さく保つ。この参考は640x468で収録しました。
静止も設計
これは640x468の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。モーションは装飾ではなくフィードバックとして扱う。動きは操作要素にとどめる。
NexaCore Controlで動くもの
既製のアニメーションパックを使えば早く出せたはず。ブリーフはあえてホバー状態と押下状態を指定しており、ページが演出ではなく設計として読めるのはそのため。この機能紹介セクションで、動くために動く要素はない。この参考は640x468で収録しました。
NexaCore Controlの最初の読みの順序
この機能紹介セクションには明示された読みの経路がある。そこから視線はお知らせのピル、数値の行、カードグリッド、背景のクリップを順にたどる。1画面が箇条書きに見えないのはそのため。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は640x468で収録しました。
機能紹介セクションを支える数値
このページは見た目より多くの数値でできている。作り直しで守るべきなのは3カラムのグリッド、角丸18px、12px刻みの余白で、残りは動かしてよい。この機能紹介セクションに、初期値任せの部分はない。
よくある質問（FAQ）
NexaCore Controlの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは8,666文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
NexaCore ControlはReactとTailwind CSSにどこまで依存していますか？
NexaCore ControlはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
NexaCore Controlにはどこまでアニメーションが入っていますか？
登場の動きと状態変化は1秒未満の範囲に収まります。スクロールライブラリではなく状態変化を起点に動き、コピーを待たせることもありません。この参考は640x468で収録しました。
