このテンプレートについて
Vision Revealは制作会社・スタジオ向けの実用的な参考だ。ヒーローセクションはすでに配置され、寸法も測られ、いつでも作り直せる。「I build compelling visual stories & motion that make ideas shine」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は白 #E4E4E4の下地、黒 #111111の文字、ティール #75C5DEのアクセントに絞り、書体はInter。この参考例はFramer Motionで組んであり、レイアウトの判断はそれとは独立に書かれている。モーションは0.3sのトランジション、cubic-bezier(0.96,-0.02,0.38,1.01)、ループする動画の下地で、コピーが主役のままになる程度に抑えている。書いている間は開いておく。16,723文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- このヒーローセクションからは、他の何よりも先に1460x1080の画角と14px〜42pxの可変型サイズ、100vhのセクションを持っていけ。
- このヒーローセクションは、制作会社のコピーが5.8sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- 見出しをVision Revealと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 意図的に細いナビゲーション. ワードマーク、リンク、#75C5DEの操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。ラベルは447pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
- 効いてくるポスターフレーム. ファーストビューは1460x1080のクリップ1本で、ほかの要素はすべてその上に配置されます。自動再生が使えないときは1460x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- 番号付きの行が構造を担う. 機能はカードのグリッドではなくInterのリストとして組むため、狭い画面でもページが密に、すばやく拾い読みできます。項目はサイズもマーカーも共通なので、長いリストでも拾い読みできます。
- 段階ではなくクランプで可変. スケールの上端だけが可変（14px〜42pxのクランプ）で残りは固定のため、ビューポートが狭くなってもフレームの構図は保たれます。モバイルメニューも同じブリーフに含まれているため、畳んだ状態も設計済みです。スマートフォンでファーストビューを確認してください。
モーションとインタラクション
ビジュアルはシーンが担う
ビジュアルを担っているのはライブのキャンバスだ（WebGLのキャンバス）。情景は画像として背後に敷かれるのではなく、ビューポートに反応する。この参考は1460x1080で収録しました。
モーションは切れる
モーション層にはオフスイッチがある。 prefers-reduced-motionでは入場とループを外し、ほかはその場にとどめる。モーションを切ってもレイアウトは同一なので、アニメーションに何も依存していない。モーションを切った状態で試す。この参考は1460x1080で収録しました。
制作会社のブリーフが効く理由
制作会社・スタジオに対してこれが機能するのは、読み手に情報を組み立てさせないからである。ページは「I build compelling visual stories & motion that make ideas shine」と明言している。レイアウトも書体も色も決まっており（白 #E4E4E4とティール #75C5DE、Inter）、最初の画面は部品の寄せ集めではなく、結論の出た主張として読める。制作会社の読み手に、訴求へ至る最短の正直な道を示す。
ヒーローセクションの背後にある順序
1本の読みの経路を選ぶことは、他の経路を閉じること。ブリーフはそれを受け入れ、ナビゲーション、見出し、数値の行、機能リストを固定し、14px〜42pxの可変型サイズ、100vhのセクションを経路の明快さに使う。制作会社の読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションを自社のものにする
トレードオフは見分けのつきやすさ。 Vision Revealを残しすぎると他人のページに見え、数値を残して中身を変えれば自社のページとして読める。色に触る前に、見出しの一行を書き換える。この参考は1460x1080で収録しました。
よくある質問（FAQ）
Vision Revealのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは16,723文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目にFramer Motionが書かれているのはなぜですか？
必要ありません。ブリーフは依存関係の一覧ではなく仕様です。Framer Motion向けに書かれていますが、同じ構図は今お使いの技術スタックでも作り直せます。技術スタックを明記しているのは、参照デザインがどう作られたかを知るためです。
Vision Revealの0.3sのトランジションはどう動きますか？
登場の動きと状態変化は0.3sの範囲に収まります、cubic-bezier(0.96,-0.02,0.38,1.01)を使い、低減モーションの分岐もブリーフにあります。スクロールライブラリではなく状態変化を起点に動き、コピーを待たせることもありません。
