このテンプレートについて
Subscription Agencyは制作会社・スタジオ向けの実用的な参考だ。ヒーローセクションはすでに配置され、寸法も測られ、いつでも作り直せる。色は#FFFFFFの下地、#0A0A0Aの文字、グリーン #17C964のアクセントに限り、Interで組んでいる。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。ページはモーションを0.4sのトランジション、ループする動画の下地にとどめる。書いている間は開いておく。6,172文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- 制作会社の案件を提案し、クライアントへの初回返信に1476x1080のフレームを載せる必要がある制作会社のためのものだ。
- 制作会社・スタジオのヒーローセクションを作るチームで、スクリーンショットを写すのではなく実測値（82pxで固定した表示サイズ、14px刻みの余白）を求めている。
- プロダクトマーケターで、コピーの背後に6.3sのループ映像があってもヒーローセクションが読める状態を保ちたい。
含まれる内容
- 操作より前に置くリンク. リンクは同じ文字サイズで1行に並び、#17C964の操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。リンクはワードマークより小さいサイズで組み、#17C964の操作だけがバーの中で重みを持つ要素です。
- 目分量ではなく実測. 寸法は収録時点のブリーフに82pxで固定した表示サイズ、14px刻みの余白、0.4sのトランジションとして書かれている。再現は近似ではなく検証になる。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。レイアウトと一緒に数値も持っていく。
- オーバーレイなしのメディア. 背景は1476x1080の6.3sループ1本だけで、coverでトリミングし、色は一切載せていません。ほかの要素はすべて上のレイヤーに浮かびます。ループは6.3sと短く、目にはタイムラインではなくテクスチャとして映ります。
- 装飾のための色は置かない. 配色は下地と信号の2色（#FFFFFFとグリーン #17C964）で、2色目は操作のために取ってある。#17C964と#FFFFFFのコントラストが、小さいサイズでもアクセントを読ませる。
モーションとインタラクション
ループが環境演出を担う
環境の動きは6.3秒の映像1本を1476x1080で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。
意図を感じる速さ
状態変化は0.4sと指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。イージングは再生時間と一緒に指定されている（0.4s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
Subscription Agencyを仕様として読む
起点になる数値は82pxで固定した表示サイズ、14px刻みの余白。余白はそこから導かれ、ページの他のすべてはこの2つの値に対して位置を決める。このヒーローセクションに、初期値任せの部分はない。
Subscription Agencyの最初の読みの順序
マーケティングページが折り返しの下に実績を積んで期待するのに対し、このヒーローセクションはナビゲーション、見出し、お知らせのピル、数値の行、フッターを読み手の前に出し、残りは引いておく。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は1476x1080で収録しました。
ヒーローセクションを支えるタイミング
トレードオフは、アニメーションを見返す楽しみがないこと。報われるのは読み順で、0.4sのトランジション、6.3sのメディアループ、ホバー状態と押下状態は装飾ではなく状態を確認するために動く。このヒーローセクションで、動くために動く要素はない。
よくある質問（FAQ）
Subscription Agencyのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは6,172文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Subscription Agencyを作り直すのにReactとTailwind CSSは必要ですか？
Subscription AgencyはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Subscription Agencyの0.4sのトランジションはどう動きますか？
モーションはレイアウトと同じ粒度で指定されています。状態変化は0.4sの範囲で収束します。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。
