このテンプレートについて
Designy Footerはフッターの仕様書として読める。値はページを組む前に書き出されていた。ページ全体は白 #FAFAFAの下地、黒 #0A0A0Aの文字でできている。納品物はReactとTailwind CSSで、1922x1394で記録しているため、コードを書く前に枠が決まっている。モーションはループする動画の下地に限っている。 AI・SaaSプロダクトのフッターを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。このページの残りは、フッターをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、フッターを作り直すときに背後の意図を推測せずに済む。
対象
- 1回ごとの精算で進め、初回の前に13px〜14pxの可変型サイズ、13px刻みの余白を合意しておきたい制作会社のために作った。
- プロダクトマーケターで、コピーの背後に2.9sのループ映像があってもフッターが読める状態を保ちたい。
- AI・SaaSプロダクトフッターを制作するチームが、見積もりを出す前にReactとTailwind CSSを記録に残したい。
含まれる内容
- 余分を持たないバー. バーは1行のテキストと1つの操作だけで、13px〜14pxの可変型サイズ、13px刻みの余白として測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに1922x1394の構図の上に載るため、その下のメディアは端から端まで届きます。背景を付ける前に、自社の素材の上でバーを試す。
- ブリーフで固定した寸法. 値そのものが仕様です。13px〜14pxの可変型サイズ、13px刻みの余白は1922x1394での収録値で、スクリーンショットから推測したものではありません。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。調整の前に測る。
- 全画面の動画、パネルなし. ファーストビューは1922x1394のクリップ1本で、ほかの要素はすべてその上に配置されます。1922x1394以上で書き出せば、coverの切り抜きはそのまま機能する。
- 中段を担うパネル. 文章を流し込む場所にパネルを並べている。フッターを見渡せるのはそのためだ。パネルはUI書体を同じサイズで共有し、グリッドが第2のレイアウトにならないようにする。この参考は1922x1394で収録しました。
モーションとインタラクション
タイムラインではなくループ
環境の動きはスクロール演出ではなく2.9秒の1922x1394ループから生まれる。だからページは落ち着き、文字は読める。映像が短いので切れ目なくループでき、解像度よりもその点が効く。
インタラクションは局所に
フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。フィードバックは操作要素に限られるので、その周りの構図は静止したままだ。状態は絞り、そのぶん書き切る。この参考は1922x1394で収録しました。
AI・SaaSに効くところ
メディアがコピーより雄弁だとする。この構成はまさにその場合のためにある。メディアは1922x1394の2.9sループ映像だ。枠は静かなままで、13px〜14pxの可変型サイズ、13px刻みの余白が読み手を文字につなぎとめる。 Designy Footerは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
フッターの背後にある順序
ブロックを入れ替えてもページは表示される。ただし主張としては読めなくなる。ナビゲーション、数値の行、カードグリッド、フッターは順序であり、13px〜14pxの可変型サイズ、13px刻みの余白はその順序でしか機能しない。 SaaSの読み手は、選択肢より先に訴求を受け取る。
フッターを支える数値
この参考が再利用できる理由はここにある。13px〜14pxの可変型サイズ、13px刻みの余白。どこも初期値に委ねられていないので、これらの数値を保つ差し替えなら構図もそのまま残る。このフッターに、初期値任せの部分はない。
よくある質問（FAQ）
Designy Footerの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは3,029文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
手に入れたDesigny Footerのブリーフで、何ができますか？
このページに引用している内容はすべて、収録された3,029文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Designy Footerのフッターを別の技術スタックで作り直せますか？
Designy FooterはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
