このテンプレートについて
NeuralynはAI・SaaSプロダクト向けの実用的な参考だ。ヒーローセクションはすでに配置され、寸法も測られ、いつでも作り直せる。「One Clear Overview」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は黒 #000000の下地で、書体はInter。納品物はReactとTailwind CSSで、800x590で記録しているため、コードを書く前に枠が決まっている。ページはモーションを0.6sのトランジションにとどめる。書いている間は開いておく。5,257文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは800x590で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、800x590の枠から最小の余白ステップまで含む。
対象
- 見出しをNeuralynと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- Interを導入済みで、800x590の書き出しを用意し、今週ビルド枠が取れるチームのために作った。
- Interを残し、それを軸にヒーローセクションを組み直せ。自社ブランド用に新しいタイプスケールを開くな。
含まれる内容
- ページのグリッドに乗るバー. バーは1行のテキストと1つの操作だけで、0.6sのトランジションとして測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに800x590の構図の上に載るため、その下のメディアは端から端まで届きます。
- 中段を担うパネル. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。パネルの順序が読む順序で、位置の手がかりに頼らない。
- 刻みを名指しするブリーフ. レイアウトは固定値（0.6sのトランジション）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。余白は文字と同じ単位で書かれ、そのまま比較できる。
- 大きくなるほど詰まる字間. 大見出しはInterで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。キャプションの刻みは、図の下に置いてもページのリズムを変えない大きさだ。役割が明確な1ファミリーは、競い合う2つに勝ります。
モーションとインタラクション
スクロールが構図を進める
パララックスはページが動いている間だけ走るので、構図には明確な静止状態がある。この効果はセクションの読み順を変えない。この参考は800x590で収録しました。
時間はブリーフ由来
コントロールの動きは短く、繰り返しに耐える。状態が変わるたびに0.6s。イージングは再生時間と一緒に指定されている（0.6s）ので、作り直しの際に別の感触へ黙って差し替わることはない。見た目を作り替えても再生時間は残す。
ヒーローセクションの背後にある順序
いまのページが機能を先頭に置いているなら、真似すべきはこの順序。ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを前に、補足を後ろに、距離は0.6sのトランジションが決める。 SaaSの読み手は、選択肢より先に訴求を受け取る。
Neuralynで動くもの
ここのトランジションにはすべて数値が付いている。0.6sのトランジション、パララックスレイヤー、固定要素を勘で調整し直すのではなく、値ごと移植できるのはそのため。このヒーローセクションで、動くために動く要素はない。
ヒーローセクションを自社のものにする
先に中身を変え、枠は後から確認する。コピーを差し替えている間、壊してはいけない値が0.6sのトランジションだ。ここを動かすと、あとで枠ごと組み直すことになる。触れずにおくのは枠とスケール。
よくある質問（FAQ）
Neuralynのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは5,257文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
NeuralynはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Neuralynはクライアント案件で使えますか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x590で収録しました。
