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

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

Church Communityは教育・コミュニティブランド向けのランディングページの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。ページ自身の見出しは「Take a step toward the light」で、構図はその言葉をそのまま中心に組まれている。カラースキームはくすんだのオレンジ #5A4C41の下地、白 #FFFFFFの文字、くすんだのオレンジ #F1E5C6のアクセントで、ページはManropeで組む。この項目は、ページを生んだ技術スタック（React、Framer Motion）を隠さずに書いている。モーションはループする動画の下地に限っている。主題ではなく構造を借りる。ランディングページとその数値は、そのまま自社ブランドに移せる。

対象

このランディングページからは、他の何よりも先に1448x1080の画角と36px刻みの余白を持っていけ。
このランディングページは、教育のコピーが5.5sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
このランディングページを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。

含まれる内容

ドロワーを持たない一行. 上段に載るのはワードマーク、4〜5本のリンク、#F1E5C6に染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#F1E5C6の操作だけがバーの中で重みを持つ要素です。
ブリーフに直書きされたサイズ. 寸法は1448x1080のレンダリングから読み取った（36px刻みの余白）。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
役割ごとに指定した字重. 大見出しはManropeで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。行の高さは単一の共通値ではなく、サイズの刻みに合わせる。役割のないサイズは足さない。
パネルではなく背景の動画. メディアは物語ではなく雰囲気を担う。1448x1080の5.5sループがすべての後ろに敷かれる。自動再生が使えないときは1448x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。

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

現れ方が記憶に残る

入場のモーションは一つの要素にだけ使う（タイプライターのように導入文が打ち出される）。要素の多い最初の画面が煩くならないのはそのためだ。動き終わった画面はブリーフが静止画として示す構図と同じなので、この動きは上乗せでしかない。この参考は1448x1080で収録しました。

タイムラインではなくループ

5.5秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。映像はミュートかつインラインなので、操作なしで最初のフレームが出る。1448x1080以上で撮影または書き出す。

Church Communityを仕様として読む

作り直しは普通、スクリーンショットと推測から始まる。ここでは5,380文字の仕様から始める。枠、余白、モーションはコードを1行書く前に書き出されている。このランディングページに、初期値任せの部分はない。

ランディングページを自社のものにする

装飾より先に約束を決める。「Take a step toward the light」を、自分の仕事を一文で言い切る形に書き直し、仕様が使っている表示サイズでManropeに組む。くすんだのオレンジ #F1E5C6を自社のアクセントに置き換え、ほかを触る前にくすんだのオレンジ #5A4C41との対比を確認する。配色を変える前に、コピーとメディアを書き換える。