Adobe Experience Managerの仕事を共同作業で担うドリームチームを構築

私たちの多くは、実際の開発を始める前にあらゆるページのレイアウトを作成する開発プロセスに慣れている。つまり、サイト全体の最終的なルック＆フィールを、デバイスごとのあらゆるブレークポイントに至るまで、事前に見ることができる。

しかし、コンテンツの作成者とサイト開発者の双方にとって、このデザインカンプをどのようにしてAdobe Experience Managerの具体的なコンポーネントやテンプレートにつなげればよいかという問題がある。

Adobe Experience Manager サイトのローンチはマラソンのような道のりであり、その第1歩は、効果的なユーザー体験の構築からスタートする。

AEM:　ユーザー体験

デザインをテンプレートやコンポーネントに落とし込むとは、どういう意味か？ 開発チームは、開発のスタート地点をどう決めればよいのか？

周知のように、ビジネスに対する期待は日々大きくなっていく。コンテンツは毎日追加され、テキストは編集され、画像は更新される。コンテンツの変更を迅速に反映できるようにするため、サイトデザインには柔軟性が求められる。

こうしたプロセスを支えるユーザー体験を適切に管理することは、デザイナーとフロントエンドの開発者が共同作業を進めるための鍵になると共に、成功につながる開発を継続的に進めるための要件にもなる。

デザインの成果物とは

パターンライブラリやデザインシステム、コンポーネントガイドなど、その呼び方は様々だが、基本テーマはどれも同じだ。すなわち、グローバルな基準やガイドラインに即した形で、デザインレイアウトをユーザーインターフェイスの要素に分解するということである。

コンポーネントガイドとは、サイト全体をまたぐビジュアルの一貫性を保ち、また、モジュラー開発を推進するための中核となる。これは、いわゆるアトミックデザイン手法とも一致する。

多くの場合、タイポグラフィや色彩、パターン、画像の種類など、ブランドをグローバルに演出するための要素は、すでにブランドチームによって管理されているだろう。

そこで、まずはブランドの一貫性を保つためにすでに確立されているルールに、Adobe Experience Managerのサイトが適合しているかどうかを確認する必要がある。
aem レスポンシブグリッド

フロントエンドの開発者は、このルールに従ってコンポーネントごとのコードの中で容易に参照できるグローバル変数やミックスインの作成を開始する。また、フォントファイルやイコノグラフィー、ロゴなど、グローバルなアセットを分類するためのclient libフォルダーの構築もスタートできる。

レスポンシブという戦略

グリッドシステムやブレークポイントを決めるためには、まず、モバイルの計画を理解することが必要になる。その際、Adobe Analyticsのチームから収集できるトラフィックデータやターゲットオーディエンスのデータは、アクセシビリティやブラウザーへの対応要件を判断するための材料になる。

例えば、私のチームがかつて担当していた製薬会社の従業員は、日常的な業務にタブレットを使用していたため、ここではアダプティブなモバイルインターフェイスを採用するのが効果的だ判断した。

ユーザーは、電話でサンプルを速やかに注文する場合や、デスクトップPCで広範にリサーチする場合を想定し、様々なコンテンツを求めていた。

このように、レスポンシブデザインを戦略の中核とする場合、テンプレートのレイアウトやコンポーネントの一貫性を保つための鍵になるのは、グリッドシステムである。

フロントエンドの開発者は、このグリッドシステムを基準にして、基本的なレスポンシブフレームワークを設定すると共に、Adobe Experience Manager内でレイアウトコンテナーコンポーネントを開発する。

ユーザーインターフェイス（UI）のインタラクション

次に、ボタンのホバー状態とアクティブ状態、メニューの開閉時の表示法、トグルやモダールウィンドウなど、ユーザーインターフェイスで使用するインタラクションの仕様を確認しよう。

ピンチ、ズーム、スワイプなど、デバイスごとにネイティブな機能を使用する要素はないだろうか？

その中には、ModernizrやJQuery UIなど、タッチ操作に対応できるライブラリを設定しなければならず、フロントエンドの開発者への助言が必要になる場合があるかもしれない。

ctaバナーコンポーネント

グローバルスタンダードの中に、コンポーネントごとの詳しい機能仕様を含めることを忘れないようにしよう。Adobe Business Consulting のユーザー体験チームは、あらゆるプロトタイプや仕様書の作成にAdobe XD CCをよく使用している。

作成者のオプション

すでに確立されているブランドのデザインガイドラインに従うだけでなく、コンテンツの作成者やエンドユーザーが、各コンポーネントをどのように使用するかも考慮すべきだ。コンテンツ作成者用のコンポーネントを設計する場合、ある程度の予測が求められる。

つなわち、コンポーネントが更新されるパターンを複数想定しておくべきだ。自分自身に、次のような質問をしてみよう。

このような要件の検討は、コンテンツ作成者がコンポーネントをページ上で柔軟に使用できるようにするためにも、フロントエンドの開発者にバージョンごとのコードをテストするための情報を提供するのにも役立つ。

動的なコンテンツと静的なコンテンツが使用される場所を把握しておくことも、ソーシャルメディアアプレットやGoogle Maps API、ギャラリーのライトボックスなど、サードパーティのコードを使用できる場所を把握するために必要となる。

コンポーネントの統合

コンポーネントの統合は、コンポーネントの順応性を最大化し、開発努力を最小限に抑えるためにおこなう。デザイン要素が相互にどう関連しているかを考えよう。コンポーネントは特定のコンテンツやテンプレートに限定されているか？

それとも、複数の要素を変更して柔軟性を持たせられるようになっているか？ 重複を避け、開発期間を短縮するために、コンポーネントから特定の要素を省けるようになっているか？ 同じビジネス目標に関するコンポーネントはひとつにまとめ、目標達成のためにデザインを微調整できる機能を持たせておく方がよいかもしれない。

aem heroバナー

ここでは、デザインをシンプル化し、使用するコンポーネントをひとつに統合している。作成者は、タイトルやヘッドライン、パラグラフのテキストといったコンテンツを追加したり、3種類のレイアウトを切り替えられるようにする。こうした機能は、CSSやHTML設定を慎重に考慮することで実現できる。

Adobe Experience Manager 6.4および、同 6.3機能パックには、スタイル構成機能が実装されており、作成者はコンポーネント構成ツールによって様々なスタイルオプションを選択できる。これは、CSSクラス名を作成者に付与することで設定される。このCSSクラス名は、コンポーネントのcontainer divに適用され、対応するCSSが起動してコンポーネントのレイアウトを変更する。これには、レイアウトコンテナコンポーネントの使用が必要になる。

aem　スタイル構成機能

Adobe Business Consulting のユーザー体験チームでは、ユーザーのデザインワークフローを合理化してAdobe Experience Managerとの整合性を高め、ビジネス目標の達成に向けてワークショップをカスタマイズしている。

Adobe Experience Managerの設計が初めてのユーザーでも、社内プロセスの最適化を検討しているユーザーでも、ユーザー自身が計画を作成し、webサイトの立ち上げを成功に導くことができるよう、支援している。

最終的な目標は、コンテンツ作成者や開発者がデザインレイアウトを見て、Adobe Experience Manager用の構成ができるようにすることだ。

設計作業の価値の最大化に必要なことは、あらゆるビジネスニーズに対応できる柔軟性と適応性を持たせることである。ユーザー体験チーム、コンテンツ作成者、開発者の全員が、ユーザー体験のデザインに関するあらゆる意思決定の背景にある意図を理解して連携できるなら、開発者の満足度も向上するに違いない。

### 【関連資料】

### コンテンツ管理に柔軟性を：あらゆる顧客体験を最適に保つ仕組みとは顧客はいつでもどこでも、情報を入手したいと考えています。企業はあらゆるチャネルをまたいて、一貫性のある体験を届けなければなりません。任意のチャネルへすばやくスマートに、コンテンツを届ける仕組みが必要です。