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

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

Northstarは制作会社・スタジオ向けのランディングページの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。配色はティール #1D8FB8の下地、白 #EEF2F3の文字、くすんだのオレンジ #F0DAC8のアクセントで、書体はInstrument Serif。実装はvanilla JSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。動きは580msのトランジション、cubic-bezier(.16,1.3,1)だけで完結する。書いている間は開いておく。11,589文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは1280x956で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1280x956の枠から最小の余白ステップまで含む。

対象

このランディングページは、キックオフに同席していない相手へcubic-bezier(.16,1.3,1)のイージングを説明する必要があるチームに応える。
まず数値が要るデザイナー。100vhのセクション、14px刻みの余白、すべて仕様からの引用である。
見出しをNorthstarと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。

含まれる内容

1つの幅で折りたたむリンク. バーに載るのはワードマーク、セクションのリンク、#F0DAC8のボタン1つだけです。100vhのセクション、14px刻みの余白で測られているため、第二のヘッダーに膨らむことはありません。リンクはワードマークより小さいサイズで組み、#F0DAC8の操作だけがバーの中で重みを持つ要素です。
語るのは大見出しのサイズ. Instrument Serifに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。行の高さは単一の共通値ではなく、サイズの刻みに合わせる。大見出しは最後に組む。
刻みを名指しするブリーフ. サイズは継承ではなく明記されています（100vhのセクション、14px刻みの余白、580msのトランジション、cubic-bezier(.16,1.3,1)のイージング）。書体やコピーを差し替えても、この関係は保たれます。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。根拠がなさそうに見える値こそ残す。
ベースラインに乗る数字. 数値の行をファーストビューの中に置き、Instrument Serifのスケール最大で組みます。#F0DAC8は主張を担う数値だけに残します。数値だけが#F0DAC8のアクセントを持ち、周囲は文字色に留まります。最も狭い幅でこの行を確認する。

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

インタラクティブ層はコントロール

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。操作できそうに見えるコントロールは実際に反応するので、偽のアフォーダンスがない。この参考は1280x956で収録しました。

入場そのものが署名

行ごとのマスク表示が最初の画面を担う。その下の構図は静止したままなので、動きは装飾ではなくページが組み上がっていく過程として読める。動き終わった画面はブリーフが静止画として示す構図と同じなので、この動きは上乗せでしかない。この参考は1280x956で収録しました。

ランディングページの背後にある順序

マーケティングページが折り返しの下に実績を積んで期待するのに対し、このランディングページはナビゲーション、見出し、数値の行、背景のクリップ、フッターを読み手の前に出し、残りは引いておく。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は1280x956で収録しました。

制作会社・スタジオに効くところ

別々のカードの積み重ねとして作り直すこともできるが、失われるのは主張そのもの。このランディングページは1つの判断として読ませる。ナビゲーション、見出し、数値の行、背景のクリップ、フッターを1本の順序に置いている。 Northstarは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。この参考は1280x956で収録しました。