TrueEarthの教育・コミュニティランディングページデザインとプロンプト

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

TrueEarthは教育・コミュニティブランドに、完成したファーストビューと、それを生んだ数値を渡す。色は#FFFFFFの下地、#111417の文字、深いのブルー #0B2A3Aのアクセントに限り、Plus Jakarta Sansで組んでいる。納品物は自己完結したHTMLファイル1つで、1920x1422で記録しているため、コードを書く前に枠が決まっている。ページはモーションを72msのトランジション、cubic-bezier(.16,1.3,1)、ループする動画の下地にとどめる。教育・コミュニティのランディングページが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。

対象

このランディングページは、自己完結したHTMLファイル1つをすでに理解し、cubic-bezier(.16,1.3,1)のイージングを文章にできれば足りるチームを対象にしている。
教育の案件を提案し、クライアントへの初回返信に自己完結したHTMLファイル1つを載せる必要がある制作会社のためのものだ。
AIビルダーを使う人で、モデルに任せるのではなく360pxのブレイクポイントが最初から入った仕様を求めている。

含まれる内容

ページのグリッドに乗るバー. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#0B2A3Aの操作1つを、ブリーフで最小のタイプ段階に収めています。360px以下では、リンクは2行目に折り返さず折りたたむ。
最下層に置く動画. ミュートしたループクリップ1本が1920x1422のフレームを覆い、6.9sで再生されます。 cover指定で配置し、コピーはその上に重なります。ブリーフは動画にオーバーレイを載せないため、色は曇りません。自動再生が使えないときは1920x1422のポスター画像が構図を保つため、レイアウトが崩れることはありません。
ブリーフで固定した寸法. 値そのものが仕様です。12px〜16pxの可変型サイズ、100vhのセクション、2カラムのグリッド、角丸2pxは1920x1422での収録値で、スクリーンショットから推測したものではありません。リストの最小値と最大値が、構図の可動範囲を決める。
オーバーレイなしのメディア. メディアは6.9sのクリップ1本で、1920x1422の画幅にcoverで切り抜く。どの幅でも黒帯が出ない。自動再生が使えないときは1920x1422のポスター画像が構図を保つため、レイアウトが崩れることはありません。

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

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

インタラクティブな層は意図的に小さい（すべてのカードではなくボタンとリンクのホバー状態）。各状態が変えるプロパティは1つなので、フィードバックが読み取りやすい。この参考は1920x1422で収録しました。

低減モーションに対応する

低減モーションは後付けではなく仕様に書かれている。有効にすると入場とループが止まり、構図は最終状態を保つ。低減モーションでも操作のフィードバックは働き、外れるのは入場だけだ。この参考は1920x1422で収録しました。

TrueEarthを仕様として読む

この参考が再利用できる理由はここにある。12px〜16pxの可変型サイズ、100vhのセクション、2カラムのグリッド、角丸2px、22px刻みの余白。どこも初期値に委ねられていないので、これらの数値を保つ差し替えなら構図もそのまま残る。このランディングページに、初期値任せの部分はない。

ランディングページを支えるタイミング

モーションは72msのトランジション、6.9sのメディアループ、行ごとのマスク表示に限られる。入場時に一度だけ走り、あとは道を譲る。ランディングページの可読性を保つにはそのくらいの予算が適切である。このランディングページで、動くために動く要素はない。

TrueEarthの最初の読みの順序

このページの上部と、よくある教育のランディング画面を比べる。どちらも見出しとアクションを持つが、ここではナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドが同じ強さで競合せず、固定の順序に収まる。教育の読み手は、選択肢より先に訴求を受け取る。この参考は1920x1422で収録しました。