このテンプレートについて
LuminexはAI・SaaSプロダクト向けの実用的な参考だ。ヒーローセクションはすでに配置され、寸法も測られ、いつでも作り直せる。ページ全体は深いのブルー #010A12の下地、白 #CFDDD8の文字、ブルー #143F62のアクセントでできている。納品物はReactで、800x600で記録しているため、コードを書く前に枠が決まっている。新しいセクションを足す前にヒーローセクションの順序を決めたいときに使う。以下に引用する値はすべてこのブリーフのもので、800x600の枠から最小の余白ステップまで含む。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、ヒーローセクションを作り直すときに背後の意図を推測せずに済む。
対象
- AI・SaaSプロダクトヒーローセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- 複数案件を同時に進めるスタジオ責任者は、このヒーローセクションを他ページが踏襲する型として使う。
- ヒーローのコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
含まれる内容
- 上段はワードマーク、リンク、操作1つ. バーはヒーローセクションを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。リンクはワードマークより小さいサイズで組み、#143F62の操作だけがバーの中で重みを持つ要素です。6本目のリンクを足す前に、折りたたみ状態を設計する。
- コピーが先、装飾は後. 800x600で構図は完成しています。コピー、メディア、操作要素はすべてブリーフで名指しされています。ページは800x600の1つの構図です。コピーが変わっても崩れないのはそのためです。
- 1色のアクセント、1つの役割. 彩度は1つの値（#143F62）に集中し、コピーを読まなくても次の操作が見つかる。ほかはすべて深いのブルー #010A12の上にあり、彩度の高い配色でも読めるのはそのためです。
- ドロワーを持たない一行. バーはヒーローセクションを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。リンクはワードマークより小さいサイズで組み、#143F62の操作だけがバーの中で重みを持つ要素です。主張の強いファーストビューでも耐えるナビゲーションが必要なときに、このパターンをそのまま使ってください。
モーションとインタラクション
モーションはほぼない
スクロールライブラリはない。800x600の構図は静止したままで、動くのは自分に反応する要素だけだ。モーションは装飾ではなくフィードバックとして扱う。
邪魔をしないモーション
スクロールライブラリはない。800x600の構図は静止したままで、動くのは自分に反応する要素だけだ。モーションは装飾ではなくフィードバックとして扱う。スクロールのタイムラインは要らない。
Luminexの最初の読みの順序
ファーストビューを一度流し読みすれば、訴求はもう伝わっている。ナビゲーションは順に現れ、装飾的な区切りではなく800x600のフレームで隔てられる。 SaaSの読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションの再配置
設計された狭い幅のレイアウトは、詰め込みより多くの判断を要する。ブリーフはその分を先に払っている。スケールは段階式ではなく可変。実装時に発見するのではなく、明示されている。モバイル版は判断であり、代替ではない。この参考は800x600で収録しました。
Luminexで最初に変えるもの
一行、1書体、1アクセント。この3つの差し替えがデザインを最も変える。動かさないほうがよい値は800x600のフレーム。触れずにおくのは枠とスケール。
よくある質問（FAQ）
Luminexはクライアント案件で使えますか？
プロンプトはmotionsites.aiが公開したもので、ここに載せているプレビューはそのレンダリング結果です。構造とモーションの参考として扱い、出典サイトの規約を確認したうえで、自社のコピー、メディア、配色で構図を作り直してから公開してください。
このLuminexの項目はどういう構成になっていますか？
このページに引用している内容はすべて、収録された162文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Luminexの背後のブリーフには、実際に何が入っていますか？
気分を書いた説明ではなく、制作のための仕様です。800x600のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
