このテンプレートについて
Luminaは、教育・コミュニティブランドがフッターで抱える課題を記録済みのブリーフ1本で解く。見出しは「Lumina provides premium clarity on global events and cosmic wonders - shared with all for free」で、フッターの残りはその周りに配置されている。色はブルー #2F4458の下地、グレー #CFC2B7の文字に限り、Helveticaで組んでいる。納品形式はReactとTailwind CSSなので、フッター全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。新しいセクションを足す前にフッターの順序を決めたいときに使う。以下に引用する値はすべてこのブリーフのもので、800x585の枠から最小の余白ステップまで含む。
対象
- 1回ごとの精算で進め、初回の前に115vhのセクション、10px刻みの余白を合意しておきたい制作会社のために作った。
- このフッターを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。
- フッターのコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
含まれる内容
- 検証できる数値. ブリーフは115vhのセクション、10px刻みの余白を固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
- スケールがスタイルになる. タイポグラフィはHelveticaです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。キャプションの刻みは、図の下に置いてもページのリズムを変えない大きさだ。
- リンクの山ではなく列. リンクは列にまとめ、ワードマークは独立したブロックに置きます。長いフッターが単なる一覧にならず、読める状態に保たれます。列は上のページと同じグリッドに揃うため、フッターも同じデザインに感じられます。リンクはまとめてください。並べるだけにしないでください。この参考は800x585で収録しました。
- 表ではなく統計の一行. 数値の行が根拠になります。1行に3〜4つの数字、その下に小さなラベル、インターフェースと同じHelveticaで組むため、装飾ではなくデータとして読めます。数字は1つの字重で組み、行の中で統計に序列を付けない。
モーションとインタラクション
インタラクティブな範囲は狭く
インタラクティブな層は小さく予測可能だ（すべてのカードではなくボタンとリンクのホバー状態）。ほかは静止したままで、構図への集中が保たれる。状態は仕様に明記されているので、ページはホバー効果のライブラリに依存しない。この参考は800x585で収録しました。
モーションはほぼない
スクロールライブラリはない。800x585の構図は静止したままで、動くのは自分に反応する要素だけだ。動くのはポインターに反応する要素だけだ。
Luminaを仕様として読む
余白を好みと呼ぶテンプレートと比べる。ここでは同じ値に名前が付いている（115vhのセクション、10px刻みの余白）ので、編集はそれを守るか、構成を目に見えて壊すかのどちらかになる。このフッターに、初期値任せの部分はない。
Luminaの最初の読みの順序
ファーストビューを一度流し読みすれば、訴求はもう伝わっている。数値の行、背景のクリップ、フッターは順に現れ、装飾的な区切りではなく115vhのセクション、10px刻みの余白で隔てられる。教育の読み手は、選択肢より先に訴求を受け取る。
このフッターが立てる主張
既製のヒーローとこのフッターは同じ部品を使う。違うのは、数値の行、背景のクリップ、フッターで順序づけ、115vhのセクション、10px刻みの余白で測っている点。だから画面は入れ物ではなく順序として読める。 Luminaは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
よくある質問（FAQ）
Luminaの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは5,113文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Luminaのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された5,113文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Luminaのフッターを別の技術スタックで作り直せますか？
LuminaはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
