このテンプレートについて
Sparkformはランディングページの仕様書として読める。値はページを組む前に書き出されていた。色は明るいのオレンジ #EC612Cの下地、白 #FFFFFFの文字、ティール #89CFF0のアクセントに限り、Interで組んでいる。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。ページはモーションを0.05sのトランジション、ループする動画の下地にとどめる。書いている間は開いておく。6,724文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- 工数を見積もるプロダクトマネージャーは、1460x1080のフレームを作業範囲として読む。
- このランディングページを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく120vhのセクション、12px刻みの余白を渡せ。
- このランディングページは、制作会社のコピーが7.6sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
含まれる内容
- 意図的に細いナビゲーション. ワードマーク、リンク、#89CFF0の操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#89CFF0の操作だけがバーの中で重みを持つ要素です。行は1行に保つ。
- 明記された余白の刻み. 寸法は収録時点のブリーフに120vhのセクション、12px刻みの余白、0.05sのトランジションとして書かれている。再現は近似ではなく検証になる。リストは短く、確認者は要素ごとに突き合わせられる。
- 1本のクリップが担う. ブリーフは動画を1460x1080、ループを7.6sと指定し、すべてのテキスト要素はその画幅に合わせて置かれる。ループは7.6sと短く、目にはタイムラインではなくテクスチャとして映ります。
- 規律をもって使う1書体. 最上位の文字はInterで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。行の高さは単一の共通値ではなく、サイズの刻みに合わせる。
モーションとインタラクション
タイムラインではなくループ
環境の動きはスクロール演出ではなく7.6秒の1460x1080ループから生まれる。だからページは落ち着き、文字は読める。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。
インタラクティブな範囲は狭く
ポインターまわりの処理は小さく、仕様に書かれている。固定された要素が位置を保ち、その下を内容が流れるを、もともと操作できそうに見える要素にだけ適用する。押下状態もホバーと同様に指定されているので、タップでもクリックと同じ確認が返る。この参考は1460x1080で収録しました。
Sparkformで最初に変えるもの
自社の配色が重いなら、決める前に枠に当てて検証する。ページを支えるのは明るいのオレンジ #EC612Cなので、暗いアクセントには参考例より強いコントラストが要る。変えるべきなのは主題の部分だ。
ランディングページの背後にある順序
いまのページが機能を先頭に置いているなら、真似すべきはこの順序。ナビゲーション、数値の行、機能リストを前に、補足を後ろに、距離は120vhのセクション、12px刻みの余白が決める。制作会社の読み手は、選択肢より先に訴求を受け取る。
制作会社・スタジオに効くところ
6,724文字のブリーフが、余分のない1画面を生む。値は明示されており（120vhのセクション、12px刻みの余白）、言葉が変わっても構成が読めるのはそのため。制作会社の読み手に、訴求へ至る最短の正直な道を示す。
よくある質問（FAQ）
Sparkformのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは6,724文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
SparkformはReactとTailwind CSSにどこまで依存していますか？
SparkformはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Sparkformの0.05sのトランジションはどう動きますか？
登場の動きと状態変化は0.05sの範囲に収まります。スクロールライブラリではなく状態変化を起点に動き、コピーを待たせることもありません。
