このテンプレートについて
Vela Ulは書き下ろされたブリーフ1本から組んだSaaSの機能紹介セクションで、このページはそのブリーフを記録している。色は#16120Cの下地、#F7F5F2の文字に限り、Arial, Helveticaで組んでいる。納品形式は自己完結したHTMLファイル1つなので、機能紹介セクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。モーションは720msのトランジション、cubic-bezier(.22,1.36,1)、ループする動画の下地で、コピーが主役のままになる程度に抑えている。 AI・SaaSプロダクトの機能紹介セクションを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。以下に引用する値はすべてこのブリーフのもので、1920x1418の枠から最小の余白ステップまで含む。
対象
- 機能紹介セクションの構造はまるごと借り、cubic-bezier(.22,1.36,1)のイージングに照らして行ごとにコピーを差し替えろ。
- プロトタイプを作らずに410pxの挙動をクライアントへ説明する必要がある制作会社のために作った。
- 自社の見出しを書き、そのうえで計測値を変えずに自己完結したHTMLファイル1つでこの機能紹介セクションを組み直せ。
含まれる内容
- 1つの幅で折りたたむリンク. ナビゲーションは1行だけで、下に第2階層を持たない。410px未満では、リンクが全画面オーバーレイに畳まれます。ラベルは410pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
- 最下層に置く動画. クリップは1920x1418で4.7s再生し、継ぎ目が見えないままループする。映像ではなく表面として読める。1920x1418以上で書き出せば、coverの切り抜きはそのまま機能する。
- 1行にまとめた根拠. 数字はArial, Helveticaで、本文よりも見出しに近いサイズで組む。ラベルは1つのサイズで組み、長いラベルでも行の高さが変わらない。数字を枠で囲まない。
- 幅ごとに定義された挙動. 幅の変化は文字自体で処理します。14px〜20pxのクランプが見出しをスマートフォンからデスクトップまで運び、モバイル専用の構図を必要としません。操作要素はタップできる大きさを保ち、コピーはどの幅でも読み順を変えません。
モーションとインタラクション
短く、明記された時間
状態変化は720msと指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。ページが設計されているように読めるのは時間が短いからで、既定の遅い値ならこの構図は崩れる。状態変化は速く、スクロールのタイムラインは持たない。
タイムラインではなくループ
背景の映像は4.7秒、1920x1418でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。映像が短いので切れ目なくループでき、解像度よりもその点が効く。
Vela Ulで最初に変えるもの
変える順番はコピーとメディアが先、色が次、レイアウトが最後である。1920x1418のフレームとArial, Helveticaのスケールがページを支えているので、それらを貫くのではなく、その周りで差し替える。新しいコピーも同じ表示サイズで組み、何かを足す前にコントラストを確認し直します。
AI・SaaSプロダクトがここで得るもの
Vela Ulが機能するのは、階層を飾りではなく判断で決めているから。ブリーフが25pxで固定した表示サイズ、100vhのセクション、3カラムのグリッド、20px刻みの余白を定めているので、新しいコピーは枠を開き直さず、その中に収まる。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。
機能紹介セクションの再配置
ここでは書体を段階的ではなくクランプで決めており（14px〜20pxのクランプ）、幅を変えても見出しのサイズが跳ねない。再配置を越えて残るのは階層だ。
よくある質問（FAQ）
Vela Ulの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは25,889文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目に自己完結したHTMLファイル1つが書かれているのはなぜですか？
Vela Ulは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
手に入れたVela Ulのブリーフで、何ができますか？
このページに引用している内容はすべて、収録された25,889文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
