役割とチーム
私は外部のプロダクトデザイナー兼Framer Expertとして参画しました。担当したのは、モーションと3Dを多用する野心的なコンセプトを、Framer上で堅牢かつ高速に動く実装へと落とし込むことです。
このプロジェクトは、次のメンバーとの密な協働で進められました。
- クリエイティブディレクター：全体のクリエイティブビジョンとナラティブを主導。
- アートディレクター：ビジュアルの方向性と中核となるブランドアセットを策定。
- エクスペリエンスデザイナー：デザインの方向性に関与し、3Dアセットを制作。
このチームのなかで私は、Framerのアーキテクチャ、モーションシステム、そしてすべてのカスタムコード統合を担当し、ビジュアルコンセプトと技術的な実装をつなぐ橋渡し役を務めました。プロジェクトは初期コンセプトから公開まで、5週間で完了しています。
背景と課題
Experience.Labに必要だったのは、サービスとロゴを並べただけのサイトではありませんでした。求められたのは次の点です。
- 東京を拠点とするハイエンドなクリエイティブテクノロジーのスタジオとしてのアイデンティティを伝えること。
- チームが実際のクライアントワークで発揮しているレベルのモーション、インタラクション、3Dの実力を示すこと。
- 既製テンプレートではなく、編集的で丁寧に作り込まれた印象を持つこと。
- 社内チームが維持管理でき、コアツールであるFramerと共存できること。
もっとも大きな課題は、野心と制約のあいだの緊張をどう扱うかでした。目指した体験には、次の要素が含まれていました。
- スクロールと連動した、途切れないストーリーテリング。
- 複雑なタイムラインアニメーション。
- 存在感のある3Dのヒーロー要素。
- 見た目だけのテーマにとどまらない、「夜の東京」を体現するダークモード。
これらすべてを、ビジュアルの質を落とすことなく、さまざまなデバイスと回線速度でなめらかに動作させる必要がありました。
目標と成功の基準
プロジェクトは当初から、いくつかの明確な目標に紐づけられていました。
- 単なるブランド紹介ではなく、まとまりのある映画的な体験として感じられるブランドサイトを作ること。
- ネイティブ機能とカスタムコードを組み合わせてFramerを最大限に活用し、デザインに目の肥えた読み手にも際立つレベルのモーションとインタラクティビティを実現すること。
- パフォーマンスを最優先の制約として扱い、3D・画像・アニメーションが応答性を損なわないようにすること。
- 公開後もExperience.Labのチームが更新・拡張・改善していける構造を届けること。
成果は、社内フィードバック、Framerコミュニティの反応、そしてエンゲージメント指標で評価しました。サイトはその後Framer Community Awardsの「Best Animations」部門にエントリーされ、初期のアナリティクスでは平均セッション時間が3分を超えていました。訪問者がただ訪れるだけでなく、体験をじっくり探索していることを示しています。
アプローチとプロセス
クリエイティブディレクションをFramerのシステムへ翻訳する
中核となるクリエイティブのアイデアは、早い段階でチームによって定義されていました。Experience.Labは、レイヤーが重なり、エネルギッシュで、どこか非現実的でありながら、プロフェッショナルなブティックスタジオにふさわしい明快さと抑制のなかに収まっている必要がある、というものです。
私が最初に取り組んだのは、ビジュアルインパクトを重視したこのクリエイティブディレクションを、Framerが安定して扱えるシステムへと翻訳することでした。
- ナラティブをスクロール連動のセクションに分割し、長い単一目的のランディングページに感じさせず、自然な流れをつくること。
- 主要セクションごとにモーションの「帯」を定義し、モーションを濃密で表現的にする場所と、明快さと可読性を優先する場所を切り分けること。
- より複雑なインタラクションやアニメーションを要する大きなセクションは、コンポーネント化すること。
このシステム起点の考え方によって、新しいアイデアが出てきても既存のパターンに収められるようになりました。場当たり的な例外が積み重なり、不安定さや後々の高くつく手直しにつながるリスクを避けられたのです。
カスタムコードコンポーネントによるFramerの拡張
求められたインタラクションの多くは、Framerの標準機能で実現可能でした。しかしいくつかの要件は、既存のツールで無理なく扱える範囲を超えていました。
- Experience.Labのライオンのマスコットを表示する、独自の3Dモデルビューア。
- スクロールに紐づくアニメーションタイムラインの、きめ細かな制御。
- スクロール速度やデバイスを問わずインタラクションの応答性を保つための、より高度な状態管理。
これに対応するため、Framer内部にReactベースのカスタムコードコンポーネントを実装しました。
3DモデルビューアはThree.jsで構築し、Framerのコードコンポーネントとして統合しました。これにより、汎用の埋め込みよりも読み込み、シーン構成、インタラクションを緻密に制御できるようになっています。開発中はAIアシスタントとしてClaude Codeを活用し、とりわけThree.jsのボイラープレート、状態管理、カスタムコンポーネントのアニメーションで反復を高速化しました。この組み合わせにより、コード品質とパフォーマンスを保ちながら素早い実験が可能になりました。
スクロール連動のモーションでは、Framerのタイムライン機能と、ユーザーのスクロール位置を追跡して複数のアニメーションシーケンスを同期させる独自ロジックを組み合わせました。体験がなめらかで自然に感じられ、カクつかないよう、範囲・イージング・トランジションを丁寧に設計する必要がありました。
「ネオン東京」としてのダークモード
ダークモードは、単なるアクセシビリティ機能ではなく、ストーリーテリングの中心的な装置として扱いました。ダークモードのデザイン言語は、3つの考え方を軸に組み立てています。
- 「夜の東京」：平坦な暗い面ではなく、ネオンのアクセント、深い黒、そして制御された発光。
- 遊び心：探索する人だけが気づく、ささやかな仕掛け。ダークモードでのみ3Dライオンに現れるアイマスクなど。
- 連続性：雰囲気が変わっても、タイポグラフィ、レイアウト、階層構造は一貫させ、使いやすさを損なわないこと。
初期のプロトタイプでは、3DヒーローにSplineの埋め込みを使っていました。ビジュアルの質は高かったものの、この方法ではシーン全体を実行時に読み込んで描画するため、パフォーマンスに大きな影響が出ました。とりわけ性能の低いデバイスでは、スクロールとアニメーションの応答性が著しく低下したのです。
そこで重要な判断を下しました。Splineの埋め込みをやめ、独自のThree.jsビューアを実装することです。この変更によって、何をいつ読み込み、テーマの切り替えやインタラクションにどう反応させるかを完全に制御できるようになりました。しかもすべてFramerの環境内で完結しています。
アセットとパフォーマンスの最適化
アニメーションの密度と3Dコンテンツの存在を考えると、パフォーマンスは最初からデザイン上の中核的な制約として扱う必要がありました。
3Dについては、次の方針を取りました。
- Three.jsビューアは意図的にシンプルに保ちました。重いシーンライティングや反射、不要なジオメトリを持たない、モデルだけの構成です。
- ライティングはモデルに直接適用したmatcapテクスチャで擬似的に表現し、リアルタイムのライティング計算なしに、様式化された「光が当たった」見た目を実現しました。
- モデルのアセットは最適化とクリーンアップを行い、ファイルサイズと実行時のコストを最小化しました。
画像と動画については、次の方針を取りました。
- Clopなどのツールで積極的に圧縮し、目に見える劣化なしにサイズを削減できるよう書き出し設定を調整しました。
- 付随する画像、キービジュアル、動画それぞれに異なる圧縮戦略を用い、忠実度とページ重量のバランスを取りました。
この3Dの簡素化とアセット圧縮の組み合わせにより、複雑なタイムラインアニメーション、スクロール追跡、ダークモードの切り替えのすべてが応答性を保てました。結果として、密度が高く表現豊かでありながら、操作していて重さを感じさせない体験になっています。
主要なデザイン・エンジニアリング判断
最終的なサイトの性格と堅牢さを決めたのは、次のいくつかの判断でした。
- 既存テンプレートの改変ではなく、フルカスタムのFramerビルドを選んだこと。途切れないナラティブなスクロールと複雑なモーションを支えつつ、コードベースの見通しを保つためです。
- Splineの埋め込みに代えて独自のThree.jsモデルビューアを採用したこと。実行時のパフォーマンスが大幅に向上し、テーマやインタラクションの状態との統合も緊密になりました。
- 綿密に設計した範囲とシーケンスを用いるスクロール連動のモーションシステム。モーションが無秩序ではなく、意図をもって編成されているように感じられます。
- ダークモードを単なる配色の切り替えではなく、独自のビジュアルとインタラクションを持つナラティブのレイヤーとして扱ったこと。
- アセット最適化をデザインプロセスに組み込んだこと。画像、動画、3Dアセットがパフォーマンスを意識したものとなり、Framerの既存の仕組みとも無理なく共存します。
成果とインパクト
Experience.Labは2026年1月に、Publicis Groupe Japanのこの部門における主要な体験設計のショーケースとして公開されました。
特筆すべき成果は次のとおりです。
- 社内の関係者からは、チーム独自のスタイルと個性を捉えながら、精緻でプロフェッショナルな印象も保っている点に高い評価が寄せられました。
- フルカスタムでインタラクション豊かな制作事例として、Framerコミュニティで共有され、Framer Community Awardsの「Best Animations」部門にエントリーされました。
- 初期のアナリティクスでは平均セッション時間が3分を超えており、訪問者がすぐに離脱せず、体験を探索するのに時間を使っていることが分かります。
学びと振り返り
このプロジェクトは、インパクトが大きくモーションを多用するブランドサイトを作るうえで、いくつかの原則をあらためて確認させてくれました。
- モーションは単発の装飾ではなく、システムとして設計する必要がある。スクロール全体を通じてモーションがどう振る舞うかを計画したことで、体験のまとまりとパフォーマンスを両立しやすくなりました。
- 3Dはパフォーマンス予算のなかで一級市民として扱うべきである。Splineの埋め込みから目的を絞ったThree.jsビューアへの移行と、matcapベースのライティングの組み合わせが、応答性を犠牲にせず狙いどおりのビジュアルインパクトを得るうえで決定的でした。
- AIを活用した実装は、複雑な統合を扱う際に反復速度を目に見えて高められる。Claude Codeをコーディングアシスタントとして使ったことで、複雑なアニメーションや3D埋め込みの手法をより速く探索でき、Framerのコードコンポーネント構築における摩擦も減りました。
- 保守性もまた、作り手の技量の一部である。優れたブランド体験とは、公開初日に印象的なだけでなく、チームが自分たちの仕事とストーリーの変化に合わせて更新し続けられるものです。
Experience.Labは、デザイン、モーション、エンジニアリングをFramer上で組み合わせることで、表現力に富みながら実務にも耐えるインターフェースを実際のチームのために作れることを示す好例です。