高級車ブランドのサイトリニューアルを支えたAdobe XDと新しいデザインプロセス | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

3年前、ピュブリシス・サピエントのクリエイティブディレクターを務めるエリック・ノガードは、ホンダの高級車ブランドのサイトAcura.comのリニューアルを率いることになりました。着手してすぐに、そのプロジェクトはただのデザイン修正よりもずっと大きな作業であることが明らかになりました。実際、会社全体のデザインプロセスを根本から変えることになりました。

「アキュラは、ブランドとして既にサイトを持っていましたが、新しいブランドの位置づけである『精密につくられたパフォーマンス』を表現していませんでした」とエリックは振り返ります。「以前のサイトは古くて遅くてレスポンシブ非対応で、高級車を購入する顧客が期待する視覚的なアピールが欠如していました」

エリックのチームは、アキュラのサイトのデザインやシステム変更を成功させるため、ホンダ社内の数多くの関係者や広告代理店と調整をしなければなりませんでした。クライアントは、JDパワーの顧客ランキングの最下位に近い位置から、せめて平均以上に上昇させることを期待していました。結果としてエリックのチームはトップ5にランクインさせることに成功しますが、それはUXデザインのワークフローの大改革が行われた後のことになります。

リニューアル前のアキュラのサイト

ピュブリシス・サピエントの新しいデザインプロセス

エリックが改革する以前のピュブリシス・サピエントのチームは、Photoshopで作成された静的なファイルを使い作業を進めていました。しかし、より柔軟なプロトタイピングツールの採用も起きていました。

「私たちはデザインをInVisionに持ち込んでいました」とエリックは当時を思い返します。「それがプロトタイプの手法でした。InVisionを使って動作を確認することは私たちのお気に入りでしたが、やや時間を取られる作業でした。その頃、Adobe XDのアルファ版が公開されて、私たちはそれをすぐにワークフローに取り込みました。プロジェクトチームは、以前よりも短い時間で、レスポンシブに対応したより高品質なデザインをつくれることを発見しました」

チームはアキュラのプロジェクトのために膨大な数のアートボードを作成し、それらをプロトタイプにして、内部の関係者（フロントエンドとバックエンドの開発者および顧客サポート）と確認を行っていました。それから、開発チームの準備のためにプロトタイプを渡していました。エリックが言うには、デザイン・開発・公開のプロセスがより速くより容易になったそうです。それはクライアントからの承認の場で大きな違いとなりました。

「プロトタイピングツールでデザインを見るのは、キーノートやパワーポイントの静的なファイルを見るよりずっと効果的です」とエリックは説明します。「XDへの移行は比較的スムーズでした。クライアントは既にデバイス上での確認には慣れていました。XDを使ってもらうのに全く問題はありませんでした」

リニューアル後のサイトのデスクトップ、タブレット、モバイル画面

スケールする自動車サイトのUX

アキュラのプロジェクトチームはXDを使って、変更を高速に繰り返しました。彼らは、多くのデザインの承認を得るまでのレビューを2回まで減らすことができました。

JDパワーで成功した結果

一方、ホンダブランドの仕事をしているチームは、静的なファイルに頼り、まだ以前からのワークフローを使っていました。そして時には7回のレビューを必要としていました。彼らが同じように変わるまでに長くはかかりませんでした。エリックはアキュラに加えてホンダチームの監督も始めて、より高速なプロセスを適用しました。今では、ピュブリシス・サピエントのほとんどの仕事でXDが使われています。

ビューポートによるコンポーネントの振る舞いの例

素早い協業、より一貫性の高いデザイン

デザインシステムはいまやデジタル製品が長期的に成功し生き残るために不可欠です。エリックは、ピュブリシス・サピエント全体で、デザインシステムの採用がトッププライオリティになったと言います。

「私がGoogleで働いていた頃、Googleがマテリアルデザインのフレームワークをつくったように、ほぼすべての主要なデジタルブランドが集中型のデザイン規範を取り入れていることが、短期間のうちに明らかになりました」とエリックは語りました。

「挑戦だったのは、マーケティング担当者が注意深く定義されたデザインシステムの運用から利益を得られるようになるための支援でした。アキュラはこれを成立させるために多くの努力をして、たちまちブランド力の向上と同時に日々の業務のスピード化と効率化を達成しました」

ピュブリシス・サピエントがシステムデザインのためにAdobe XDに移行した理由出典：ピュブリシス・サピエント

Adobe XDは、ピュブリシス・サピエントがデザインシステムのアプローチを採用するための重要な道具となりました。そして、より良いコラボレーションを実現し、開発に向けた進め方を調整する役割を果たしました。「デザインやUXの側だけでなく、開発側にも膨大なメリットが生まれました」とエリックは指摘します。「すべての異なる部門のそれぞれの仕事を容易にしました。私たちはデザインシステムを管理するためのリポジトリを持つことが極めて大きな価値を持つことを発見しました」

ピュブリシス・サピエントは、様々なXD用のネイティブUIキットを使用し、デザインシステムにまとめてデザイナーに共有しています。彼らのプロジェクトの多くでiOSとAndroidのUIキットがプロトタイプ作成に使われて、エンドユーザーの使い心地を改善するUXやデザインの決定を助けています。

「誰もが同じコンポーネントを使っています。コンポーネントは修正や調整されることがあります」とエリックは説明します。「それらはすべて集中管理されたデザインシステムにフィードバックされます。そして展開されて他のチームを含む全体に共有されます。これにより類似したオブジェクトをより速く展開することができ、全体のワークフローが効率化されます」

通常、チームはボタンのような普遍的な要素のデザインから始め、それを共有して一般的なルック＆フィールについての合意を得てから、個々のコンポーネントの詳細を定義しています。そして、誰もが満足できる一貫性のある製品づくりを実現しています。

自動車サイトのUXのこれから

自動車サイトのUXの今後について、エリックは2つの領域に大きな可能性があると指摘します。フロントエンドのコンポーネントのシームレスな統合と機械学習です。

「この2つの組み合わせは、高速でターゲットに合わせてパーソナライズされたシステムを大規模に提供する手段になるでしょう。ユーザーと企業の両社がパーソナライズによる利益を得られます」とエリックは説明します。「機械学習は、ブランドが顧客に売り込む方法を変える能力を持っています。自分に最適な乗り物を購入する場合もその一つです」

アキュラのような自動車サイトでも、AIが画面に表示されるコンポーネントを組み合わせて表示する役割を持つことになるかもしれません。デザインシステムと機械学習の組み合わせは、デザインプロセスとユーザー体験の新しい可能性を開くことになるでしょう。

この記事はHow Publicis Sapient Redesigned Automotive Site Acura.com with a Focus on UX（著者:Oliver Lindberg）の抄訳です