このテンプレートについて
教育・コミュニティブランド向けにランディングページを作り直す前にNeo Museumを読むと、構成とそれを支える仕様がここに揃っていることが分かる。「Step into the natural world and discover the stories written millions of years ago」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。色は白 #FCFCFCの下地、黒 #0A0A0Aの文字に限り、Interで組んでいる。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。ブリーフはモーションの予算を2800msのトランジション、cubic-bezier(0.16,1,0.3,1)に使う。初見用ではなく、作り直しに耐える教育・コミュニティブランドのランディングページのブリーフとして扱う。
対象
- モデルに指示を出すなら、ランディングページから始めて640x468のフレームをプロンプトに保持させろ。
- 教育・コミュニティブランドランディングページを提案する制作会社が、12px〜15pxの可変型サイズ、75vhのセクションを提案書に書き込みたい。キックオフの後も見積もりが崩れないようにするためだ。
- 教育・コミュニティブランドランディングページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- 上段はワードマーク、リンク、操作1つ. バーはランディングページを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに640x468の構図の上に載るため、その下のメディアは端から端まで届きます。
- ファーストビューに置く根拠. 数値はカードではなく文字として組みます。ディスプレイサイズのInterに、1段下のラベルを添えます。数値はインターフェースと同じ書体を使うため、ページを中断させるのではなく、ページの一部になります。数字を枠で囲まない。
- 既定値に頼らない構成. 寸法は640x468のレンダリングから読み取った（12px〜15pxの可変型サイズ、75vhのセクション、10px刻みの余白、2800msのトランジション）。余白は文字と同じ単位で書かれ、そのまま比較できる。
- スケールがスタイルになる. 書体には混ぜるのではなく役割を割り当てています。 Interがディスプレイとインターフェースの両方を担います。サイズが大きくなるほど字間を詰めるため、12–15pxの範囲でディスプレイの行がまとまります。
モーションとインタラクション
時間も仕様に書く
時間は短く揃っている（2800ms、cubic-bezier(0.16,1,0.3,1)を使い）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。示された時間が覆うのは状態変化だけなので、動きのうち仕様に書かれているのはフィードバックの部分になる。
入ると数え出す数値
数字はビューポートに入ると数え上がる。書体はInterでディスプレイサイズ。ラベルも数字の周りのものも静止したままだ。
ランディングページの再配置
デスクトップの構図は640x468を基準に解かれ、狭い幅のレイアウトは継承ではなく設計されている（セクションは75vhに固定、ナビゲーションはモバイルメニューに畳まれる）。モーションには低減モーションの分岐があり、メディアにはポスターフレームがあるので、自動再生が使えない環境でもページは内容を伝える。幅が変えるのは寸法で、読みの経路ではない。
このランディングページが立てる主張
このランディングページの判断を数え上げると、すべて1つの文書に行き着く。640x468の枠、書体、リズムを記した15,036文字だ。教育の読み手に、訴求へ至る最短の正直な道を示す。
Neo Museumの最初の読みの順序
自社のコピーをこのランディングページに入れても順序は保たれる。要素が交換可能ではないからだ。ナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップはそれぞれ1つの役割を担う。教育の読み手は、選択肢より先に訴求を受け取る。この参考は640x468で収録しました。
よくある質問（FAQ）
Neo Museumのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは15,036文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Neo Museumのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された15,036文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Neo Museumを作り直すのにReactとTailwind CSSは必要ですか？
Neo MuseumはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
