このテンプレートについて
Vize FooterはAI・SaaSプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。配色は黒 #000000の下地、明るいのブルー #31A8FFのアクセントで、書体はInter。納品物はReactとTailwind CSSで、1838x1350で記録しているため、コードを書く前に枠が決まっている。初見用ではなく、作り直しに耐えるAI・SaaSプロダクトのフッターのブリーフとして扱う。収録したプロンプトは1838x1350で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1838x1350の枠から最小の余白ステップまで含む。
対象
- このフッターは、レイアウトの中で14px〜26pxの可変型サイズ、10px刻みの余白が何を決めているのかを知りたい実装者に答える。
- フッターをモデルに指示する人は、7,734文字のプロンプトを出発点に使う。
- 見出しをVize Footerと同じ長さに保ったままフッターを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 検証できる数値. ここでは文字と余白を同じ1つのリストから取る（14px〜26pxの可変型サイズ、10px刻みの余白）。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。ブリーフが触れていない箇所は、意図的に触れていません。
- 根拠を置く位置に数値. 数値の行をファーストビューの中に置き、Interのスケール最大で組みます。#31A8FFは主張を担う数値だけに残します。数値だけが#31A8FFのアクセントを持ち、周囲は文字色に留まります。
- 役割ごとに指定した字重. 書体はサイズと一緒に書いてある（Inter、14–26px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、14–26pxの範囲でディスプレイの行がまとまります。
- 構造を作るのはカード. 構造はグリッドそのものだ。同じ大きさのパネルをInterで組み、視線が下ではなく横へ動くように並べる。どのパネルも内部の配置は同じで、グリッドは形で見渡せる。パネルの順序がそのまま読み順です。
モーションとインタラクション
インタラクションは局所に
インタラクティブな層は小さく予測可能だ（すべてのカードではなくボタンとリンクのホバー状態）。ほかは静止したままで、構図への集中が保たれる。モーダルを開いたりスクロールを乗っ取ったりする要素はなく、インタラクションは要素の内側にとどまる。この参考は1838x1350で収録しました。
静止も設計
スクロールライブラリはない。1838x1350の構図は静止したままで、動くのは自分に反応する要素だけだ。動くのはポインターに反応する要素だけだ。
Vize Footerで最初に変えるもの
最初に配色を変えるのがよくある失敗。構成に触れないまま雰囲気だけが変わり、レイアウトを支えるのは結局14px〜26pxの可変型サイズ、10px刻みの余白。コピーとメディアを先に、配色は最後にする。再利用できるのは構図のほうで、別のブランドでもそのまま成立します。
Vize Footerの最初の読みの順序
注意は散らばらず、導かれる。視線はまず表示サイズの一行に落ち、次に支えるコピー、最後に操作へ向かう。実績は、載る場合でもお客様の声の壁ではなく帯か1行に留まる。その順番が設計そのものである。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1838x1350で収録しました。
Vize Footerで動くもの
モーションはホバー状態と押下状態に限られる。入場時に一度だけ走り、あとは道を譲る。フッターの可読性を保つにはそのくらいの予算が適切である。このフッターで、動くために動く要素はない。この参考は1838x1350で収録しました。
よくある質問（FAQ）
Vize Footerの土台になっているプロンプトはどれくらいの長さですか？
気分を書いた説明ではなく、制作のための仕様です。1838x1350のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Vize FooterはReactとTailwind CSSにどこまで依存していますか？
Vize FooterはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Vize Footerのデザインはどこから来たものですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1838x1350で収録しました。
