このテンプレートについて
Peakflow FooterはAI・SaaSプロダクト向けの実用的な参考だ。フッターはすでに配置され、寸法も測られ、いつでも作り直せる。カラースキームは黒 #111111の下地、白 #FAFAFAの文字で、ページはInterで組む。納品物はTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。ページはモーションを100msのトランジション、cubic-bezier(0.5, 0, 0, 1)、ループする動画の下地にとどめる。記録されたブリーフから始め、フッターをゼロから作り直すのではなく編集する。収録したプロンプトは1920x1470で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1920x1470の枠から最小の余白ステップまで含む。
対象
- このフッターは、SaaSのコピーが7.9sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- 複数案件を同時に進めるスタジオ責任者は、このフッターを他ページが踏襲する型として使う。
- AI・SaaSプロダクトフッターを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- 明記された余白の刻み. 寸法は収録時点のブリーフに30px刻みの余白、100msのトランジション、cubic-bezier(0.5, 0, 0, 1)のイージングとして書かれている。再現は近似ではなく検証になる。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
- 文字の後ろのメディア. 動画は1920x1470の構図の最下層にあり、文字はその上に配置され、間に何も挟まない。1920x1470以上で書き出せば、coverの切り抜きはそのまま機能する。書き出しは1920x1470以上にして、トリミングを正確に保ってください。
- 1つずつ役割を持つ書体. 書体には混ぜるのではなく役割を割り当てています。 Interがディスプレイとインターフェースの両方を担います。ブリーフが置いたサイズと字重を動かさなければ、書体の差し替えは安全だ。
- 1書体、2つの役割. Interがディスプレイとインターフェースの両方を担います。ブリーフが置いたサイズと字重を動かさなければ、書体の差し替えは安全だ。スケールは明記されています。それを使ってください。
モーションとインタラクション
短く揃えた時間
ブリーフはトランジションの値を100msに固定しているので、作り直すときに遅い既定値で代用できない。スクロール位置を待つものはないので、触れた瞬間にページが反応する。時間は仕上げではなくデザインの一部だ。
タイムラインではなくループ
環境の動きは7.9秒の映像1本を1920x1470で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。ほかに連続して動くものがないので、注意を引くのは映像だけだ。
AI・SaaSに効くところ
3,693文字のブリーフが、余分のない1画面を生む。値は明示されており（30px刻みの余白、100msのトランジション）、言葉が変わっても構成が読めるのはそのため。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。
Peakflow Footerで最初に変えるもの
ブリーフはInterを指定し、その隣にスケールを置いている。同じ比率を持つ書体に差し替えるかぎり、構成は保たれる。フレームとスケールは保ち、変えるべきなのは題材のほうです。
フッターの再配置
デスクトップの構図は1920x1470を基準に解かれ、狭い幅のレイアウトは継承ではなく設計されている（スケールは段階式ではなく可変）。モーションには低減モーションの分岐があり、メディアにはポスターフレームがあるので、自動再生が使えない環境でもページは内容を伝える。狭い幅でも重要な要素は削られない。
よくある質問（FAQ）
Peakflow Footerの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは3,693文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Peakflow Footerのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された3,693文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Peakflow Footerを作り直すのにTailwind CSSは必要ですか？
この参考例はたまたまTailwind CSSで作られているだけで、レイアウトのどの部分もその選択に依存していません。余白、書体、モーションの値は、すでに使っている環境へそのまま持ち込めます。
