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

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

Innovationは制作会社・スタジオ向けのランディングページの作り方を一つ示し、それを生んだ手順も公開している。カラースキームは深いのブルー #020D14の下地で、ページはInstrument Serifで組む。納品物はReactとTailwind CSSで、447x800で記録しているため、コードを書く前に枠が決まっている。モーションは500msのトランジションに限っている。制作会社・スタジオのランディングページが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。収録したプロンプトは447x800で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、447x800の枠から最小の余白ステップまで含む。

対象

ランディングページをモデルに指示する人は、8,996文字のプロンプトを出発点に使う。
見出しをInnovationと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
制作会社・スタジオランディングページを立ち上げる創業者には、開発者が着手する前にInstrument Serifとタイプスケールを確定させておく必要がある。

含まれる内容

1つの幅で折りたたむリンク. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてInstrument Serifで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに447x800の構図の上に載るため、その下のメディアは端から端まで届きます。
ビューポート基準の計測. 値そのものが仕様です。20px刻みの余白、500msのトランジションは447x800での収録値で、スクリーンショットから推測したものではありません。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
語るのは大見出しのサイズ. Instrument Serifに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。行の高さは単一の共通値ではなく、サイズの刻みに合わせる。
お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にInstrument Serifの最小段階で置き、その位置を争う要素はほかにありません。ピルはブリーフ最小の段階に置くため、第二のタイトルではなくラベルとして読めます。

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

短く揃えた時間

時間は短く揃っている（500ms）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。同じ再生時間を複数の操作要素で使い回しており、インタラクションが一つの仕組みとして揃って感じられる。イージングを変えるなら全体で変える。

反応はコントロールに返す

インタラクティブな要素はそれぞれ1つのことしかしない（すべてのカードではなくボタンとリンクのホバー状態）。状態が予測できるのはそのため。状態は仕様に明記されているので、ページはホバー効果のライブラリに依存しない。ポインターの効果はコントロールに留める。この参考は447x800で収録しました。

Innovationの最初の読みの順序

トレードオフは我慢を強いること。走査しやすいグリッドなら即座に渡す詳細を、このページは保留する。代わりに得るのは、ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドが読み違えられないファーストビュー。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は447x800で収録しました。

この構図が制作会社で効く理由

別々のカードの積み重ねとして作り直すこともできるが、失われるのは主張そのもの。このランディングページは1つの判断として読ませる。ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを1本の順序に置いている。制作会社の読み手に、訴求へ至る最短の正直な道を示す。この参考は447x800で収録しました。