Innovation Labの制作会社・スタジオランディングページデザインとプロンプト

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

Innovation Labは制作会社・スタジオ向けの実用的な参考だ。ランディングページはすでに配置され、寸法も測られ、いつでも作り直せる。「We push past conventions, reshaping the virtual terrain with next-level technologies」は、レイアウトが背負うために組まれた一行。カラースキームは深いのインディゴ #080219の下地、白 #F8F3EFの文字で、ページはInterで組む。納品物はReactとTailwind CSSで、1466x1080で記録しているため、コードを書く前に枠が決まっている。結局、動きは0.2sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地に尽きる。書いている間は開いておく。6,911文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

このランディングページは、制作会社のコピーが6.9sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
見出しをInnovation Labと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
同じ速さで同じ組み上がりが欲しいなら、0.2sの入場とcubic-bezier(0.16, 1, 0.3, 1)の曲線をそのまま写せ。

含まれる内容

邪魔にならないナビゲーションバー. ナビゲーションは1行だけで、下に第2階層を持たない。バーは独自の背景を持たずに1466x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
既定値に頼らない構成. レイアウトは比率ではなく絶対値で組む（12px刻みの余白、0.2sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）。余白は文字と同じ単位で書かれ、そのまま比較できる。
大見出し級の数字. 数値はカードではなく文字として組みます。ディスプレイサイズのInterに、1段下のラベルを添えます。数値はインターフェースと同じ書体を使うため、ページを中断させるのではなく、ページの一部になります。
オーバーレイなしのメディア. ブリーフは動画を1466x1080、ループを6.9sと指定し、すべてのテキスト要素はその画幅に合わせて置かれる。1466x1080以上で書き出せば、coverの切り抜きはそのまま機能する。

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

スクロールライブラリなしの環境モーション

環境の動きは6.9秒の映像1本を1466x1080で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。1466x1080以上で撮影または書き出す。

入場そのものが署名

動きは1つの挙動に集中しているので（各行がoverflow-hiddenの窓からせり上がる）、ページがエフェクトの詰め合わせには読めない。入場は名指しした要素に限定されるので、レイアウトの残りは一切動かない。この参考は1466x1080で収録しました。

Innovation Labで最初に変えるもの

最初に配色を変えるのがよくある失敗。構成に触れないまま雰囲気だけが変わり、レイアウトを支えるのは結局12px刻みの余白、0.2sのトランジション。コピーとメディアを先に、配色は最後にする。フレームとスケールは保ち、変えるべきなのは題材のほうです。

ランディングページを支える数値

ここでの決定はほぼすべて、確認できる値である。12px刻みの余白、0.2sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング。メディアは1466x1080の6.9sループ映像だ。書体はInterのままなので、差し替える側も同じ比率を守る必要がある。このランディングページに、初期値任せの部分はない。