Adobe XDで実現する『三方よし』のコンテンツ制作プロセスとは

顧客や環境の変化に合わせて速やかに変えるコミュニケーションが求められている

デジタルアセット管理とコンテンツ管理システムを組み合わせたAdobe Experience Managerをご活用いただいているお客様からの声で最近増えてきていると実感するのが、制作プロセスをもっと円滑に、効率良く進めたいというご相談です。このご相談には、大きく3つの傾向があります。

1つめは、コロナ禍で在宅勤務が増えたことで社内メンバーとの直接的なコミュニケーションの機会が減っていること。今までは顔と顔を突き合わせて会議をし、紙で赤入れしてやりとりしていたものが、オンラインでのコミュニケーションに変わり、今までのやり方が通用しそうにないので新しい制作プロセスを考えたいというものです。

2つめは、顧客のデジタル化に合わせて自社サイトで提供したいコンテンツが増えていること。顧客一人ひとりに合わせたコンテンツの提供や、パーソナライゼーションの高度化を目指す活動が増え、作成するコンテンツ量が全体的に増加しているため、コンテンツベロシティを実現するための制作プロセスを新たに考えたいというものです。

3つめは、各部門でワイヤーフレームやデザイナーとのやりとりに利用しているツールやワークプロセスがバラバラで効率化を図るためにも統合していきたいということ。関係するメンバーや部門が増えることで増え続ける制作方法や社内ルールを可視化し、できる限り同じプロセスで効率的に進められるようにコンテンツ制作プロセスを見直したいというものです。

このように、働き方や顧客体験の変化がきっかけで、コンテンツ制作プロセスを見直したいというご相談をいただく機会が増えています。

コンテンツ創出スピードを加速し、最適なコンテンツを適切なタイミングで届ける

多くの企業がより多くのコンテンツを迅速に作り出し、適切なターゲットに届け、パフォーマンスの結果につなげることを目指してマーケティング活動を行なっていますが、最適なコンテンツを最適なタイミングで顧客に届けることの重要性を理解しながらも、実行に移すことに苦戦をしています。背景には、社内で様々な思想やルールが存在し、デジタルマーケティングが組織全体での取り組みとして浸透しきれていないことがあります。顧客に一貫した顧客体験を提供するには、各部門がバラバラに動くのではなく、共創し部門を超えたコミュニケーションをとっていくことが必要です。

そのためにはできる限り共通のツールを活用し、共通のプラットフォームで統一された顧客コミュニケーションを実現できることが理想です。その第一歩として、社内のコンテンツ制作プロセスや体制を可視化し、できる限り関係者全員が同じツールを活用し、同じデータやクリエイティブをベースにコミュニケーションをとっていくことが必要です。

そこで、Adobe Experience Managerをご活用いただいているお客様におすすめしているのが、Adobe XDを活用したコンテンツ制作プロセスの共通化です。

Adobe XDを活用しチームのコミュニケーションを最適化する

ウェブサイトができるまでの制作ステップは大きく５つです。

1. 概念設計：作成するウェブサイトの目的を明確化し、コンセプトを確定します。
2. 構造設計：ウェブサイトの構成要素を確定し、コンテンツマップやサイトマップを作成します。
3. 機能設計：仮のワイヤーフレームを作成し、ページ機能やレイアウトを固めます。
4. 視覚設計：③で固めた設計をデザインに落としていき、実装指示書を作成します。
5. ページ実装：モジュール設計やコンポーネント開発、コーディングを行い、サイトを完成させます。

このステップの中で、実装以外の①〜④をAdobe XDを活用し、コラボレーションすることをおすすめしています。

Adobe Experience Manager Siteにはクイックサイト作成の機能もありますが、マーケティング部門だけではなく製品を扱う事業部門や制作会社、ベンダーなどメンバー構成が多様な場合、プロトタイプ作成の柔軟性が高いAdobe XDを共通ツールとしてご紹介しています。

コンテンツ作成プロセスを効率に進めるために、Adobe XDをおすすめする理由としては大きく３つあります。

その１：関係者へのレビュー依頼が容易に

デザイナーが作成したプロトタイプを関係者に共有し、それぞれからコメントをもらうことが可能です。以前はパワーポイントなどでプロトタイプごとの画像を貼り付け、メールで添付して送り合うなどの工程が発生していましたが、Adobe XDの共有機能を使うことで、同じものを関係者全員がレビューし合うことで、見るべきポイントを合わせることが容易になり、関係者間の認識すり合わせの時間を減らすことができました。

その２：他のデザイナーとの協業が可能に

大きなプロジェクトになると、デザイナーやコーダーが複数人いて、作業を分けることがあります。一般的にはデザイナーが複数いる場合、個別のデザインドキュメントで作業を分割します。この方法の場合、バージョン管理が煩雑になり、デザインの最終確認や整合性を取るために時間を要することがあります。Adobe XDの場合、協業するデザイナーをAdobe XDのドキュメントに招待し、それぞれのアートボードで作業することや、お互いのアートボードの状態を確認することができます。デザイナーはファイルやアセット管理を気にすることなく協業が可能で、データはクラウド上で保存されるためバージョン管理も容易になります。

またAdobe Stockから素材を検索しCCライブラリに保存することで、Adobe XDのドキュメントアセットから素材を使ってイメージを作成することも可能です。画像を使う場合は、Adobe Stockで画像を購入し、本番環境で使うことも可能です。

その３：コンポーネントやアセットの再利用

ウェブサイトで利用している各種コンポーネントやアセットをAdobe XD内に作成することで、他のプロジェクトでも同じコンポーネントやアセットを再利用することができます。また、デザイナーに引き渡す前にWebディレクターやプロデューサーがコンポーネントを活用して簡単にワイヤーフレームのイメージを作成することも可能になりました。また、サイトに必要なコンポーネントやアセットを集めたUI/UXキットを作ることで、サイトのブランディングやルールの統一がより容易になり、一つのコンテンツ作成に必要な時間を大幅に短縮することが可能になります。

XDプロジェクトで活用いただけるUIキットが配布されているので、より簡単にスタートしていただくこともできます。

スピーディで効率的な制作プロセスでより良い顧客体験の提供を実現

金融業界のお客様でのご支援では、ほぼ全員がリモートワークという体制化でのプロジェクト編成でしたが、コロナ禍におけるコンテンツ作成プロセスの最適化を実行することができました。具体的には、それまでパワーポイントのバージョン管理で行なっていたコンテンツ作成をAdobe XDの活用を決めました。そして、コンセプト策定からデザインの形に落とし込むまで、スピード感のあるやりとりが可能になりました。理由としては、ワイヤーフレームの段階とデザインの段階でAdobe XDのプレビューURLを共有し、実際の端末でイメージを見てもらえることで具体的なフィードバックをいただくことができて早めに修正作業に移ることができ、スプリントが回りやすかったことがあります。また、コーディングの段階でも利用しているコンポーネントが明確だったため、実装指示書にかける工数も削減することができました。また、Adobe XDをEメールやアプリを制作する際にプロトタイプやモックアップについてコミュニケーションするための共通ツールとしてご活用いただいているお客様もいらっしゃいます。

このようにAdobe XDを活用いただくことで、ブランドやサイトのコミュニケーションに一貫性を保った多様なコンテンツ制作を素早く作成することや、部門や役割を超えたコラボレーションが可能になります。自部門や他部門などの社内関係者だけではなくお客様も含めた「三方よし」のコンテンツ制作プロセスを実現し、より良い顧客体験を提供していきましょう。