Email Landing PageのAI・SaaSランディングページデザインとプロンプト

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

Email Landing Pageは判断の履歴を残しており、このランディングページを生んだブリーフは19,431文字。カラースキームは深いのブルー #091020の下地、くすんだのティール #A4F4FDの文字、明るいのティール #00D2FFのアクセントで、ページはInterで組む。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。動きは0.3sのトランジション、cubic-bezier(.22,1.36,1)だけで完結する。書いている間は開いておく。19,431文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

制作会社に発注する創業者は、1回目の受け入れ判定に640x478の画角を使う。
工数を見積もるプロダクトマネージャーは、1024pxのブレイクポイントを作業範囲として読む。
見出しをEmail Landing Pageと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。

含まれる内容

余分を持たないバー. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#00D2FFの1つだけ。いずれも独自の背景を持たずにランディングページの上に載ります。ラベルは1024pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
段差の大きいスケール. タイポグラフィはInterです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。ウェイトは役割ごとに指定されているため、実装時に勘で階層を決めることはありません。役割のないサイズは足さない。
下端に沿わせた導入実績. クライアントのマークは下端に沿って低いコントラストで、ブリーフ最小の段階で並びます。ランディングページのテクスチャとして読め、見出しと競うことはありません。この行は構図のほかの要素と同じベースラインに揃えます。この参考は640x478で収録しました。
既定値に頼らない構成. 値そのものが仕様です。3カラムのグリッド、角丸44px、20px刻みの余白、0.3sのトランジションは640x478での収録値で、スクリーンショットから推測したものではありません。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。

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

ミリ秒で書かれた時間

時間は短く揃っている（0.3s、cubic-bezier(.22,1.36,1)で）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。イージングは再生時間と一緒に指定されている（0.3s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

ポインター状態以外は何もしない

ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態、その場で内容を差し替えるタブまたはアコーディオン）。すべての要素を的にせずに、ページは反応して感じられる。状態の色はコンポーネントの既定値ではなく、ページ自身の配色から取る。この参考は640x478で収録しました。

ランディングページの再配置

仕様は各幅で何が変わるかを記述している（レイアウトは1024pxで切り替わる）。つまりモバイル版は判断であり、縮小ではない。コントラストはメディア上の#00D2FFのアクセントで保たれ、動画はミュートのインライン再生である。自動再生とモーションは誠実に扱われているので、それらが使えない環境でもページは内容を伝えます。

Email Landing Pageで最初に変えるもの

テンプレートはレイアウトを受け入れさせる。この参考例はレイアウトを残し、中身をすべて変えさせる。違いは、主題が動いても3カラムのグリッド、角丸44px、20px刻みの余白、0.3sのトランジション、cubic-bezier(.22,1.36,1)のイージングが固定されていること。新しい要素が提供内容や次の操作の説明に寄与しないなら、ファーストビューの下に置くのが正解です。