Config 2024のビジュアルアイデンティティを創る
Figmaのブランドスタジオが、没入感のあるダイナミックなカンファレンス体験のすべてを1つのFigmaファイルでどのようにデザインしたかを紹介します。
Config 2024のビジュアルアイデンティティを創るを共有
ConfigはサンフランシスコのMoscone Center（モスコーニセンター）で開催されました。Configは、巨大なスペースです。私たちは、ビルの外壁にビニールグラフィックスを巻き付けるなど、あらゆるサーフェスの大きさや比率を変えて視覚的な効果を生み出しました。
毎年、Figmaのブランドスタジオチームは、Figmaの年次ユーザーカンファレンスであるConfigのための視覚的言語を作成するという刺激的な課題に直面します。その目標は、Figmaの全体的なブランドに忠実でありながら、独特の独立した体験のように感じられるビジュアルアイデンティティを開発することです。この体験は、実際に参加したり、バーチャルで視聴したりする何千人ものデザイナー、開発者、製品チームのオーディエンスの心に響くものでなければなりません。それは、オープニングの基調講演やサンフランシスコのモスコーニセンターのサインといった動員力のある要素だけに限りません。デジタルサーフェス、記念品バッグ、現地のタッチポイントを構成する内容も同様に重要です。私たちは、すべてのインタラクションで、FigmaをFigmaたらしめている要素の没入型延長のように感じてほしいのです。Config 2024でそれをどのように実現したかをご覧ください。
フォームと機能のバランスを取る
ブレインストーミングの段階では、Figmaの機能を指針にしました。今年は、ユーザーの作業をよりスムーズに効率的にすることを目指した、デザインを一新したFigmaと新しい Figma Slidesが特にエキサイティングでした。たとえば、作成から作品の共有まで、さまざまな制作モードの切り替えができることは、大きな進展のように感じました。私たちは、Figmaキャンバスのこの新鮮な見方と、Figma Slidesのまったく新しいキャンバスに刺激を受けました。
そこで私たちは、増幅、シフト、トランスフォームを行い、そのたびに予期せぬ視点を示すシェイプベースの言語をスケッチし始めました。
私たちは、こうした視点から、私たちの仕事のテーマを特定し始めました。特に印象に残ったのは以下の点です。
- 特にさまざまなタスクやコンテキストを通じての移動のアイデア
- キャンバスをクリアしたり、作品をプレゼンテーションしたりすることで、クリエイティブなビジョンを増幅する方法
- コラボレーションを通じて収束する多様な視点
- 多様な創造モードの受け入れ
これらのテーマは、さまざまなアイデアをスケッチするための出発点となりました。その結果生まれたのは、シフト、トランスフォーム、増幅、アクティベートが可能なシェイプベースの言語であり、そのたびに予期しない視点を示してくれました。
UXデザインの世界と同様、カンファレンスのデザインは美的観点だけで作るものではありません。対面の参加者が12,000人以上、バーチャル参加者は65,000人以上のため、複雑なUXの検討に取り組む必要がありました。登録から、希望する講演の席の確保まで、幅広いシナリオに対応できるデザインシステムが必要でした。私たちのビジュアル言語は、洗練と一貫性を兼ね備え、体験を通じて参加者を導きました。
基本的なプリミティブシェイプを構成要素に使用して、より複雑なスーパーグラフィックスを作成しました。
大規模なデザイン
Configのようなイベントの最大の課題の1つは、作成する必要のあるアセットの量が膨大であることです。私たちは、すべてがまとまりを感じさせながらも決して繰り返しにならない、変化に富んだ、魅力的に感じられるモジュールシステムを作成することを目指しました。
シェイプは、長年にわたりConfigブランドの重要なモチーフです。そこで私たちは、Figmaツールバーから直接取得できる、長方形、円、多角形などのシンプルな幾何学的シェイプ、つまりプリミティブのライブラリを作成することから始めました。このシンプルな形状が、Figmaでデザインするすべての人にとっての出発点です。私たちはそれをConfigブランドの一貫したラインにしたいと考えました。そこでは、各シェイプが新しい構成に拡張される、より複雑なスーパーグラフィックスの構成要素になります。すべてのタッチポイントでの多様性を維持するために、私たちはFigmaでこれらのスーパーグラフィックスの堅牢なコンポーネントライブラリを構築しました。スーパーグラフィックスごとに3つのバリエーションがあり、各シェイプをさまざまな角度から見せることができます。
Sol LeWitt氏の大胆な壁画からBarbara Stauffacher Solomon氏の没入型環境スーパーグラフィックスまで、アートとデザインの歴史からヒントを得て、私たちはこれらの基本的なシェイプを、さまざまなメディアやコンテキストで機能するグラフィックスに置き換えました。サンフランシスコの広大なモスコーニセンターで開催された対面イベントでは、建物の外側にビニールを巻き付けたり、廊下全体を覆うなどして、あらゆるサーフェスの大きさや比率を変えて視覚的な効果を生み出しました。
デジタル言語を物理的エクスペリエンスに変換する際、私たちは次元、素材、コントラストを加えることに重点を置きました。中央のメーカーズスペースでは、私たちのシェイプを物理的な大規模な構造物に変身させました。参加者はそれを座席、写真の背景、待ち合わせ場所として使用しました。その数階上では、イベントの参加者は14個の色とりどりの箱凧を吊り下げた展示物に出会いました。最大の凧は17フィートという大きさでした。One Hat One Hand社と提携してこれらの凧を作成し、私たちのフラットなスーパーグラフィックスを新しい次元に引き上げました。モスコーニのどの階にも、私たちのブランドを表現したこの浮遊物を見渡せる独自の場所が用意されていました。もう1つの嬉しい発見は、これらの構造物が、シェイプが予想外の形に回転する私たちのアニメーションの動きも反映していることです。
モーションに対する体系的なアプローチの策定
私たちはグラフィック言語を開発すると同時に、次の4つの基本原則に基づいてモーション言語も模索しました。
- シフト：回転する位置と視点のシフトは、多様な視点が融合する力を表しています。
- トランスフォーム：モーフィングするシェイプは、進行中の変化と絶え間ない再発明を表しています。
- 増幅：カスケードパターンは、私たちのツールがお客様のビジョンをどのように拡大するかを具体化しています。
- アクティベート：隣接するシェイプが互いに刺激し合い、トランスフォームし合う様子は、コラボレーションの力を象徴しています。
このようにさまざまなモードがあるため、モーションに対する体系的なアプローチが不可欠でした。すべてのサーフェイスにカスタムアニメーションを適用するのは、あまりにも非現実的です。代わりに、私たちは交換可能なパーツのモーションライブラリを構築し、さまざまなカラーパレットで多様な構成を作成できるようにしました。この多用途のモーションライブラリにより、あらゆるエクスペリエンスにアニメーションを組み込むことができました。
私たちが制作したすべての動画には、Sounds Like These社が作成したカスタムサウンドが使用されており、より多彩でありながら一貫性のあるブランドエクスペリエンスを得られます。
このライブラリは、Relay社などのベンダーと提携する際に大きな助けとなりました。Relay社は基調講演のオープニングフィルム （午前中に大勢の聴衆を盛り上げる1分間のシーケンス）を制作してくれました。私たちはモーションライブラリを共有し、大規模ツールキットを提供することで、コラボレーションを活性化させました。Relay社はすぐに私たちのブランドの基礎を理解し、それを発展させて、各モードをアニメーション化するための新しいモチーフを導入してくれました。オープニングフィルムでは、これらすべてのモードを組み合わせ、大胆で魅力的、そしてあえて言うなら予想外の言語を生み出しました。
さらに、私たちのWeb サイトにモーションを追加しました。ユーザーはConfigのロゴにマウスを合わせると、文字がプリミティブなシェイプに変形する様子を見ることができます。これはささいなことですが、エクスペリエンスを向上させるものだと考えています。
バリアブルを利用した柔軟なパレット
スーパーグラフィックライブラリを整備したあと、次に注目したのは色です。さまざまな組み合わせやバリエーションを可能にする、大胆で鮮やかなパレットが必要でした。システムの柔軟性を最大限に高めるために、6種のカラーパレットを開発し、それぞれ異なる背景色にしました。
このように複雑なカラー体系では、色を効率的に管理して適用するのにFigmaのバリアブルが役立ちました。パレットをバリアブルとして定義することで、すべてのブランドアセットにわたって簡単に更新を適用して一貫性を維持できました。バリアブルを使用すると、色やスペーシング単位などの特定の値を保存して再利用できるため、ワークフローを合理化しながら一貫したルックアンドフィールを確保できます。アセットごとにカスタムカラーの組み合わせを選択する代わりに、定義済みのパレットをすばやく切り替えて使用できます。
Configブランドを実現するために、複数の社内チームや外部パートナーと連携するため、私たちのデザインシステムは他の人にとっても使いやすいものでなければならないと考えました。バリアブルにより、すべてのチームは一貫性のある色を使用でき、各アプリケーションでは独自の変化と鮮やかさを感じられるようになりました。
表現型から機能型への拡大
ConfigのWebサイトは、すべてが1か所に集まった最初のサーフェスでした。Webにブランドを組み込むために、対照的なスケールとカラーブロッキングを採用しました。エクスペリエンス全体を通じて、機能的な情報デザインと表現力豊かなブランド言語のバランスを取りました。小さくて構造的な等幅フォントであるAperçu Monoを採用したのは、アニメーションするスーパーグラフィックスや行動喚起とのコントラストを付けるためです。鮮やかなカラーパレットでユーザーのエクスペリエンス全体をガイドするにあたり、特定のトークトラックと仮想エクスペリエンスのために色分けされたテーマを使用しました。Webサイトは、告知用マイクロサイト、アジェンダの発表、当日のバーチャルブロードキャストの3つのフェーズで立ち上げました。フェーズを重ねるごとにブランドのより多くの要素を明らかにしました。
作業をより迅速に可視化して行うために、私たちはすべてをFigmaでスケッチしました。これには物理的なスーパーグラフィックス、3D凧、道案内などが含まれます。
すべての要素をまとめる
製品をデザインするのと同じように、没入感があり魅力的なカンファレンスを創出するには、オーディエンスを深く理解し、明確なビジョンを持ち、あらゆるタッチポイントのニーズに柔軟に対応できるシステムが必要です。私たちにとって、それは参加者のニーズを考慮し、デジタルから物理まで、表現から機能まで拡張できるシステムをデザインすることでした。プリミティブ、スーパーグラフィックス、カラーパレット、モーション原則で構成される明確なデザイン言語を確立することで、各サーフェスの独自の機会や制約に適応できる基盤を作りました。
プロジェクト全体を通じて、私たちは1つのFigmaファイルで作業し、Web、マーケティング、クリエイティブの各チーム間の可視性と整合性を維持しました。この統合されたワークフローは、想像をまとめて現実に変えるスペースであるConfigそのものを反映しています。
Config 2024ブランドを実現するためにたゆまぬ努力をしてくれたFigmaブランドスタジオチーム全員に心から感謝します。また、FigmaイベントチームとWebエクスペリエンスチームの信頼と協力に感謝します。
編集者注: 対面での参加者が10,000人いたことに言及するために、投稿を更新しました。
