このテンプレートについて
Prisma Creative Studioは書き下ろされたブリーフ1本から組んだ制作会社のランディングページで、このページはそのブリーフを記録している。見出しは「I have skills in color grading, visual effects, and narrative design」で、ランディングページの残りはその周りに配置されている。カラースキームは黒 #101010の下地、白 #E1E0CCの文字で、ページはInstrument Serifで組む。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。ページはモーションを0.08sのトランジションにとどめる。初見用ではなく、作り直しに耐える制作会社・スタジオのランディングページのブリーフとして扱う。
対象
- 参考がただの出発点なら、デザイナーは455x800のフレームを残し、ランディングページの残りを組み直せる。
- ランディングページをモデルに指示する人は、8,432文字のプロンプトを出発点に使う。
- 見出しをPrisma Creative Studioと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 意図的に細いナビゲーション. ナビゲーションは1行だけで、下に第2階層を持たない。バーは独自の背景を持たずに455x800の構図の上に載るため、その下のメディアは端から端まで届きます。
- ビューポート基準の計測. ここでは文字と余白を同じ1つのリストから取る（10px刻みの余白、0.08sのトランジション）。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
- スタイルを決めるタイポグラフィ. 最上位の文字はInstrument Serifで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。数字はUI書体を共有し、統計もラベルも同じシステムに属する。
- ファーストビュー上部のバッジ. バッジは1つ、メッセージも1つ。ピルは見出しの上にInstrument Serifの最小段階で置き、その位置を争う要素はほかにありません。お知らせは1件だけです。バッジがニュースらしく見えるのはそのためです。
モーションとインタラクション
コントロールは共通の時間
トランジションの指定は0.08s。コントロールはこの時間に縛られる。イージングは再生時間と一緒に指定されている（0.08s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
表示演出は移動に連動
スクロールはタイムラインではなくトリガーとして扱い、速さは読者が決める。背景のレイヤーが前景と違う速度で動く。構図は効果が発火するかどうかに依存しないので、速くスクロールして通り過ぎても何も失わない。コピーをスクロールするまで隠さない。この参考は455x800で収録しました。
ランディングページの再配置
ここでは書体を段階的ではなくクランプで決めており（100px〜10pxのクランプ）、幅を変えても見出しのサイズが跳ねない。詰め込みのほうが安く済むが、保たない。
このランディングページが正しい理由
引き算は、ファーストビューに実績を置く余地を削る。このブリーフはそのコストを受け入れ、最初の画面を訴求に使う。10px刻みの余白、0.08sのトランジションを固定してあるので、実績セクションは下に足しても作り直しにならない。制作会社の読み手に、訴求へ至る最短の正直な道を示す。
Prisma Creative Studioで最初に変えるもの
新しいコピーは、ブリーフが指定する見出しサイズ（10px刻みの余白、0.08sのトランジション）で組む。残りのスケールはデザインを変えずに追随する。変えるべきなのは主題の部分だ。
よくある質問（FAQ）
Prisma Creative Studioのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。455x800のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Prisma Creative Studioを作り直すのにReactとTailwind CSSは必要ですか？
Prisma Creative StudioはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Prisma Creative Studioにはどこまでアニメーションが入っていますか？
登場の動きと状態変化は0.08sの範囲に収まります。スクロールライブラリではなく状態変化を起点に動き、コピーを待たせることもありません。
