各国・誰もが「迷わず使える」サイトデザインの仕組みと運用をいかに実現するか

MZ：電通デジタルとして、今回どのような支援を行われたのでしょうか。

谷村：電通デジタルでは2018年からクレ・ド・ポー ボーテのグローバルWebサイトの制作・運用を支援してきました。私たちが重視したのは、GMWを作って終わりにしないことです。各リージョンが日常的に使いこなせるよう、実装から運用まで伴走できる体制を築くことを心がけました。

　その核となるのが新しい「グローバルデザインシステム」です。過去のデザインガイドラインでは触れきれていなかった細部まで言語化・ルール化し、マーケット担当のデザイナーだけでなくサイト運用に関わる誰もが参照できる共通言語にしました。アクセシビリティのWCAG2.2に準拠することを目指して、色・余白・ボタン領域といった様々な要素を定義し、各マーケットが翻訳などの調整をしてもアクセシビリティ基準を崩さない設計にしています。

　運用面では「オンボーディングハンドブック」の整備が大きな役割を果たしています。実装手順、制作・運用ルール、ローカライズの進め方を体系立てて明文化し、各マーケットの担当者が迷わず手を動かせるように提供しました。

谷村：電通デジタルならではの強みは「ブランド理解×技術実装×グローバルマネジメント」を一体で推進できる点にあります。

　資生堂様のブランド哲学を踏まえ、デザイン、開発、運用、アクセシビリティのチームが密に連携。たとえばデザイン段階でアクセシビリティチームの調査を入れながら進めるなど、デザインとUI／UXの双方から美しさと機能性の両立を支えました。また電通グループの海外拠点とも連携し、各マーケットに最適化した展開を実現しています。

ブランドらしさとユーザビリティを両立するデザイン設計

MZ：デザイン面はどのように設計したのですか。

アントワーヌ：Webサイトで世界中のユーザーに対応し、プレミアムな体験を実現するため、ユーザーセントリックなデザインを目指しました。ユニバーサルな体験を届ける上で、アクセシビリティは非常に重要です。

　意識したポイントの一つは、画像の上にテキストを埋め込まないことです。テキストを埋め込むと海外リージョンに展開した際に翻訳が難しくなるとともに、音声読み上げ対応などができないためアクセシビリティの観点からもNGです。そのため、画像とテキストを別のものとして扱うことを徹底しました。

　さらに、一貫性のあるUIパターンやデザインシステムを活用し、ブランドイメージを損なわずにスケーラブルなデザインを実現しています。

MZ：機能面についても詳しく教えてください。

アントワーヌ：Figmaでデザインシステムを構築し、各リージョンが要素をドラッグ＆ドロップして追加・削除できる仕組みを作りました。これにより、各リージョンが一からサイトページを作る必要がなくなり、効率的にWebサイトを調整できます。

　グローバルのWebサイトがあっても、各国が自国マーケット向けにカスタムページを独自に作ってしまうケースはどのブランドでも起こり得ます。そこでブランドの世界観を守りガバナンスを効かせるため、デザインシステム上でリージョンごとに変更できる範囲に適切な制限を設けました。これにより、各リージョンのサイトの調和と一貫性を保ちつつ、現地ニーズにも柔軟に対応できるようになっています。また、グローバルと各リージョンのチーム間でのコラボレーションがスムーズになり、公開までのスピードや品質向上にも寄与しています。