このテンプレートについて
Vinylはランディングページの仕様書として読める。値はページを組む前に書き出されていた。配色はスカイ #DBE6EEの下地、#0B0B0Cの文字で、書体はInstrument Serif。納品物は自己完結したHTMLファイル1つ。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。ページはモーションを1.2sのトランジション、cubic-bezier(.22,1.36,1)、ループする動画の下地にとどめる。ライフスタイルブランドのランディングページを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。収録したプロンプトは1920x1420で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- 参考がただの出発点なら、デザイナーはcubic-bezier(.22,1.36,1)のイージングを残し、ランディングページの残りを組み直せる。
- 制作の仕様を書き、批判的に検討する材料として自己完結したHTMLファイル1つを探しているStudioのチーム。
- AIビルダーを使う人で、モデルに任せるのではなく380pxのブレイクポイントが最初から入った仕様を求めている。
含まれる内容
- 意図的に細いナビゲーション. バーはランディングページを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。380px以下では、リンクは2行目に折り返さず折りたたむ。
- オーバーレイなしのメディア. 雰囲気を作るのは1920x1420の6.6sクリップです。ブリーフはトリミングを固定し、その上の文字には手を加えていません。1920x1420以上で書き出せば、coverの切り抜きはそのまま機能する。
- 役割が明確な2書体. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのInstrument Serif、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。サイズの刻みが固定値なので、書体を差し替えても同じ階層を保てる。
- 段階ではなくクランプで可変. ブリーフは見出しに24px〜22pxのクランプを使っています。長い行が不格好に折れないのはそのためです。スケールがクランプされているため、ディスプレイの行がブレイクポイント間で跳ねることはありません。スマートフォンでファーストビューを確認してください。
モーションとインタラクション
入場の動きが決め手
入場の動きはページを囲む枠ではなく、ページ自身のメッセージに使う。各行がoverflow-hiddenの窓からせり上がる。低減モーションでは要素がそのまま現れるだけで、レイアウトは変わらない。この参考は1920x1420で収録しました。
意図を感じる速さ
1つの時間がすべてのインタラクションを覆う（1.2s、cubic-bezier(.22,1.36,1)を使い）。ホバーと押下が同じ体系に読めるのはそのため。イージングは再生時間と一緒に指定されている（1.2s）ので、作り直しの際に別の感触へ黙って差し替わることはない。時間は仕上げではなくデザインの一部だ。
Vinylを仕様として読む
スクリーンショットはページがどう見えるかを伝え、ブリーフはなぜそうなのかを伝える。100vhのセクション、22px刻みの余白、1.2sのトランジション、cubic-bezier(.22,1.36,1)のイージング、380pxのブレイクポイントがその間を埋める。このランディングページに、初期値任せの部分はない。
ランディングページを支えるタイミング
既製のアニメーションパックを使えば早く出せたはず。ブリーフはあえて1.2sのトランジション、6.6sのメディアループ、行ごとのマスク表示を指定しており、ページが演出ではなく設計として読めるのはそのため。このランディングページで、動くために動く要素はない。
ランディングページを自社のものにする
テーマが部品を渡すのに対し、このブリーフは構成を渡す。100vhのセクション、22px刻みの余白、1.2sのトランジション、cubic-bezier(.22,1.36,1)のイージングとメディア枠、そして主題は自社に委ねられる。フレームとスケールは保ち、変えるべきなのは題材のほうです。
よくある質問（FAQ）
Vinylの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは18,878文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Vinylのランディングページを別の技術スタックで作り直せますか？
Vinylは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Vinylのプロンプトはなぜここに掲載されていないのですか？
このページに引用している内容はすべて、収録された18,878文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
