このテンプレートについて
Neon Logicはランディングページの仕様書として読める。値はページを組む前に書き出されていた。配色は深いのブルー #010103の下地、白 #FFFFFFの文字で、書体はSpace Mono。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。モーションは800msのトランジションに限っている。書いている間は開いておく。13,601文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- AI・SaaSプロダクトランディングページの外観を差し替えるグロース担当は、訴求コピーを変えても640x474の画角を保ちたい。
- このランディングページは、レイアウトの中で12px〜42pxの可変型サイズ、100vhのセクションが何を決めているのかを知りたい実装者に答える。
- 見出しをNeon Logicと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 余分を持たないバー. 細いバーをランディングページの上に重ね、左にワードマーク、リンクはSpace Monoで組みます。そのため構図はコンテンツが先、装飾は後に読めます。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。バーは独自の背景を持たずに640x474の構図の上に載るため、その下のメディアは端から端まで届きます。バー1つにつき操作は1つ。
- 明記された余白の刻み. リストは短く（12px〜42pxの可変型サイズ、100vhのセクション、14px刻みの余白、800msのトランジション）、システム全体を手作業で確認できる。リストは短く、確認者は要素ごとに突き合わせられる。数値がデザインで、残りは配置にすぎません。
- 1行にまとめた根拠. この行はランディングページの高い位置に、装飾ではなく根拠として置く。数字は周囲のコピーと同じベースラインに乗り、行が1つの塊として読める。この参考は640x474で収録しました。
- スケールがスタイルになる. Space Monoに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。サイズが大きくなるほど字間を詰めるため、12–42pxの範囲でディスプレイの行がまとまります。
モーションとインタラクション
状態変化にも時間を与える
コントロールは800msで変化し終えるので、触れられた時点でページが応答し、反応が遅れて見えることはない。スクロール位置を待つものはないので、触れた瞬間にページが反応する。状態変化は速く、スクロールのタイムラインは持たない。
中央にリアルタイムのキャンバス
ビジュアルは静止画として読み込むのではなく実行時に生成される（主要素にかかった3Dトランスフォーム）。だから640x474の画枠は素材が1つ少なくて済む。レンダリングは最後に整う要素なので、読み込まれる前の状態でもページが成立している必要がある。
ランディングページの再配置
コピーが長いと、先に崩れるのは狭い幅のレイアウト。ここでは12px〜42pxのクランプが変化を吸収し、文字サイズは12px〜42pxで可変、セクションは100vhに固定、ナビゲーションはモバイルメニューに畳まれる。再配置しても、どの幅でもアクションに届く。
ランディングページを支える数値
開発者に渡すなら、役に立つ成果物はブリーフだ。12px〜42pxの可変型サイズ、100vhのセクション、14px刻みの余白、800msのトランジションを明記しており、2人の間で解釈する余地を残さない。このランディングページに、初期値任せの部分はない。
ランディングページを支えるタイミング
既製のアニメーションライブラリならもっと動く。このブリーフが求めるのはその逆で、800msのトランジション、ホバー状態と押下状態、ライブキャンバスだけ、装飾は載せない。このランディングページで、動くために動く要素はない。
よくある質問（FAQ）
Neon Logicのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは13,601文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Neon Logicを作り直すのにReactとTailwind CSSは必要ですか？
Neon LogicはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Neon Logicの800msのトランジションはどう動きますか？
モーションはレイアウトと同じ粒度で指定されています。状態変化は800msの範囲で収束します。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。
