このテンプレートについて
JungleMindはAI・SaaSプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。配色は#5C5C5Cの下地、#111111の文字に絞り、書体はPoppins。納品物はvanilla JS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。ブリーフはモーションの予算を70msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地に使う。書いている間は開いておく。36,531文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- 制作会社に発注する創業者は、1回目の受け入れ判定に1920x1422の画角を使う。
- AI・SaaSプロダクトのランディングページを作るチームで、スクリーンショットを写すのではなく実測値（12px〜25pxの可変型サイズ、100vhのセクション）を求めている。
- このランディングページは、SaaSのコピーが6.9sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
含まれる内容
- 邪魔にならないナビゲーションバー. バーは1行のテキストと1つの操作だけで、12px〜25pxの可変型サイズ、100vhのセクションとして測ってある。太い帯ではなく細い一行として読ませるためだ。340px以下では、リンクは2行目に折り返さず折りたたむ。バー1つにつき操作は1つ。
- 雰囲気を担うメディア1つ. 雰囲気を作るのは1920x1422の6.9sクリップです。ブリーフはトリミングを固定し、その上の文字には手を加えていません。自動再生が使えないときは1920x1422のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- 表ではなく統計の一行. 数字はPoppinsで、本文よりも見出しに近いサイズで組む。この行は独立した帯ではなくファーストビューに属し、根拠が主張の近くに留まります。
- 刻みを名指しするブリーフ. レイアウトは固定値（12px〜25pxの可変型サイズ、100vhのセクション、角丸9px、16px刻みの余白）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
モーションとインタラクション
ホバーは意味のある場所だけに
ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態）。すべての要素を的にせずに、ページは反応して感じられる。フィードバックは操作要素に限られるので、その周りの構図は静止したままだ。ホバーでレイアウトにアニメーションを付けない。この参考は1920x1422で収録しました。
静かな分岐を用意する
仕様にはprefers-reduced-motionの分岐が含まれる。入場とループを切ってもレイアウトは失われない。この分岐はそのまま自分の実装に写してよい。この分岐は後付けではなく仕様の一部だ。レイアウトはアニメーションなしでも成立させる。この参考は1920x1422で収録しました。
AI・SaaSプロダクトがここで得るもの
テンプレートのヒーローと比べると、違いは引かれているものにある。カードグリッドもカルーセルも第二のCTAもなく、ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドだけが12px〜25pxの可変型サイズ、100vhのセクションに合わせて寸法を取る。 JungleMindは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
ランディングページを支える数値
2人で作り直すとき、構成を目分量で合わせることはできない。ブリーフは議論を消す。12px〜25pxの可変型サイズ、100vhのセクション、角丸9px、16px刻みの余白、70msのトランジションを一度だけ明記している。このランディングページに、初期値任せの部分はない。
ランディングページの再配置
このランディングページは1920x1422で構成し、狭い幅向けに組み直す。文字サイズは12px〜25pxで可変、レイアウトは340pxで切り替わる、セクションは100vhに固定。スマートフォン版は詰め込みではなく判断になっている。どちらの状態も同じブリーフに書かれている。
よくある質問（FAQ）
JungleMindの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは36,531文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
JungleMindのランディングページを別の技術スタックで作り直せますか？
JungleMindはvanilla JSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
JungleMindのトランジションを残したまま、時間だけ変えることはできますか？
トランジションはスクロールのタイムラインではなく、インターフェースの状態に紐づいており、70msの範囲で収束します、cubic-bezier(0.16, 1, 0.3, 1)を使い。値はブリーフに記録されているので、移植のたびに勘で合わせる必要はありません。
