Tenlas FooterのAI・SaaSフッターデザインとプロンプト

このテンプレートについて

Tenlas FooterはAI・SaaSプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。「Take control of your productivity today」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は黒 #050505の下地、白 #F5F5F2の文字、明るいのイエロー #DBFF00のアクセントに絞り、書体はInter。この項目は、ページを生んだ技術スタック（Tailwindと素のJavaScript）を隠さずに書いている。モーションの予算は50msのトランジション、ループする動画の下地。 AI・SaaSのフッターが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。以下に引用する値はすべてこのブリーフのもので、1920x1556の枠から最小の余白ステップまで含む。

対象

工数を見積もるプロダクトマネージャーは、Tailwindと素のJavaScriptを作業範囲として読む。
Tailwindと素のJavaScriptから組み始めるなら、先に14px〜18pxの可変型サイズ、50vhのセクションを取り出せ。グリッドが固まるまでは配色に触るな。
自社の見出しを書き、そのうえで計測値を変えずにTailwindと素のJavaScriptでこのフッターを組み直せ。

含まれる内容

操作より前に置くリンク. 上段に載るのはワードマーク、4〜5本のリンク、#DBFF00に染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。リンクはワードマークより小さいサイズで組み、#DBFF00の操作だけがバーの中で重みを持つ要素です。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
既定値に頼らない構成. 値そのものが仕様です。14px〜18pxの可変型サイズ、50vhのセクション、18px刻みの余白、50msのトランジションは1920x1556での収録値で、スクリーンショットから推測したものではありません。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
文字と画幅で1つの尺度. 値そのものが仕様です。14px〜18pxの可変型サイズ、50vhのセクション、18px刻みの余白、50msのトランジションは1920x1556での収録値で、スクリーンショットから推測したものではありません。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。数値がデザインで、残りは配置にすぎません。
1本のクリップが担う. 動画は1920x1556の構図の最下層にあり、文字はその上に配置され、間に何も挟まない。ループは8.8sと短く、目にはタイムラインではなくテクスチャとして映ります。

モーションとインタラクション

動くのはコピーだけ

入場のモーションは一つの要素にだけ使う（セクションはビューポートに入るたびに現れる）。要素の多い最初の画面が煩くならないのはそのためだ。動き終わった画面はブリーフが静止画として示す構図と同じなので、この動きは上乗せでしかない。狙いを写し取り、正確なカーブは真似なくてよい。要点は現れる順序にある。この参考は1920x1556で収録しました。

短く揃えた時間

仕様では状態変化ごとに時間が指定されている。トランジションは50ms前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。値が短いので、作り直しでこれを遅くすればすぐに分かる。

Tenlas Footerで最初に変えるもの

先に中身を変え、枠は後から確認する。コピーを差し替えている間、壊してはいけない値が14px〜18pxの可変型サイズ、50vhのセクション、18px刻みの余白、50msのトランジションだ。ここを動かすと、あとで枠ごと組み直すことになる。別のブランドでも枠ごと再利用できる。

Tenlas Footerで動くもの

モーションは50msのトランジション、8.8sのメディアループ、スクロール連動の表示演出に限られる。入場時に一度だけ走り、あとは道を譲る。フッターの可読性を保つにはそのくらいの予算が適切である。このフッターで、動くために動く要素はない。

Tenlas Footerを仕様として読む

ここでの決定はほぼすべて、確認できる値である。14px〜18pxの可変型サイズ、50vhのセクション、18px刻みの余白、50msのトランジション。メディアは1920x1556の8.8sループ映像だ。書体はInterのままなので、差し替える側も同じ比率を守る必要がある。このフッターに、初期値任せの部分はない。