コンテンツ編集者をサポートするUXデザイン

WebサイトのデザインにおいてUXデザインはごく当たり前のものになりつつありますが、その実装方法によってはコンテンツの編集作業を制限してしまう可能性があります。今回はAdobe Experience ManagerにおけるUXデザインの実装方法についてご案内します。

コンテンツベロシティーの考え方にシフトして、AEM Sitesをデザインする

あなたがAdobe Experience Manager(AEM) の世界に足を踏み入れたばかりの多くのUXデザイナーと同じ状況にあったら、ピクセルパーフェクトに作りあげたデザインをコンテンツオーサリングの荒野に展開するというアイデアは、気が遠くなるものでしょう。

ユーザーエクスペリエンスは何度も修正とフィードバックを繰り返し、やっとのことで本番公開できる完璧なバージョンに到達します。それなのに、新たに加わった担当者がこの同じエクスペリエンスの編集を担当するのです。この様な状況におかれたマーケティングチームは、どうやって元のデザインの完全性を維持することができるでしょうか?

ブランドの完全性を維持し、サイト訪問者のユーザビリティーとアクセシビリティーをサポートしながら、ページレイアウトの一貫性を保つことは、UX担当者の立場からするとごく真っ当な要求です。しかし、この要求に対応するためにデザイナーはコンポーネントの機能やレスポンシブな動作を制限し、コンテンツの編集を単純なコピー＆ペースト作業に限定してしまうこともあります。信頼性を保つため、公開されたコンテンツの品質を管理するためのガイドが作成されます。

しかし、これを実際に行うと、コンテンツの編集者が新しいページを編集して公開するまでの時間 - コンテンツベロシティーに影響を与えてしまいます。テキストや画像URL以外の変更は、開発チームの作業も必要です。また、ビジネスニーズの変化に伴い、コンポーネントのライブラリーが増えていくと、それを管理するために、さらに開発コストが増す可能性があります。それでは、どの様にするとハッピーな解決が図れるのでしょうか?

そのためには、デザインへのアプローチの考え方を変える必要があります。Adobe Experience Managerにおけるデザインは、プロセスとガバナンス戦略が非常に重要です。新しく登場したコンテンツ編集者は、定義されたエクスペリエンスと対話を試みますが、現時点ではユーザーインターフェイスの裏側（CMSプラットフォームの舞台裏）にいます。これから説明する3つの重要な戦略に従うことで、デザインの原則を念頭に置きながら、彼らを成功に導くことができます。

1．UXチームとフロントエンド開発チームでAEMのデザイン構造を理解する

まず、プラットフォームの技術的な仕様を理解する必要があります。AEMにはコンテンツ編集者が対話するための機能がいくつかありますが、デザインをどのようにコンポーネント（フロントエンドコードの構成を含む）に適用していくかは、それを支援する開発作業のスコープに影響します。

コンポーネントライブラリーを定義するには、コアコンポーネントから作業をスタートします。AEMのコアコンポーネントは、あらかじめ組み込まれたコードと編集環境を提供し、カスタム開発の範囲を区分するのに役立ちます。また、タイトル、ティーザー、ボタン、テキスト、アコーディオンなど、デザインシステムでよく見られる一般的な要素を中心にして開発されています。

デザイナーは、自分のデザインシステムをAEMコアコンポーネントと組み合わせていきたいと思うでしょう。そうすることで開発の手間を減らし、AEMに最適化されたデザインになることを確信できます。

HTMLのコードや編集ダイアログを含んだAEMコアコンポーネントの完全なライブラリーを、でご覧いただけます。

また、スタイルシステムは、コンテンツ編集者がコンポーネントの視覚的なバリエーションを切り替えるために使用できる、もう1つの機能です。この機能ではコンポーネントが単一のHTML構造を使用しており、コンテンツ編集者がドロップダウンメニューの各オプションを選択すると、そのコンポーネントの最上部のdivでCSSクラスが切り替わります。

このスタイルシステムの機能は、フロントエンド開発者のCSSスキルに依存しているため、彼らと協力して、コンポーネントを再利用できる様に、スタイルシステムの使い方を検討してください。

2．デザイン制作とコンテンツ制作はチームスポーツ

Adobe Experience Managerはコンテンツベロシティーを体現しています。市場に投入する新しいキャンペーン、ランディングページの作成、新製品の発売…Webサイトのコンテンツは常に変化しています。これらはできるだけ簡単かつ迅速に公開する必要があり、AEMの機能はこのようなクリエイティブなワークフローをサポートするために構築されています。デザイン要件に合わせて制限を設定してしまうと、オーサリングエクスペリエンスに影響が出ます。

テンプレート編集者と呼ばれるAEM特有のロール（役割）により、コンテンツチームとデザインチームが協力して、コンポーネントの使い方やページレイアウトの標準を定義する環境が提供されます。エディタブルテンプレートは、再利用可能なページレイアウトを管理するための重要な機能です。

コンテンツ編集者は、開発者に依頼して新しいテンプレートを作成する必要がなくなり、開発ワークフローのタイムラインを短縮することができます。テンプレートの編集者は、ポリシーに基づいてページで利用可能なコンポーネントを設定したり、スタイルシステムのオプションを定義したり、さらにはコンポーネントのサイズをレスポンシブに変更することができます。

AEMで設定された典型的なエディタブルテンプレートでは、デバイスごとのブレークポイント、許可されたコンポーネント、追加のコンポーネントを配置するためのドラッグ＆ドロップ領域が表示されています。

デザイナーはテンプレート編集者と協力して、ブレークポイントの定義や、デバイス横断でコンテンツを管理するためのレスポンシブ戦略などを反映した、レスポンシブフレームワークを設定することができます。コンテンツ編集者に、カードタイルコンポーネントを3列から2列に変更できる柔軟性を持たせることで、変化するビジネスニーズに対応し、開発担当者の依存度を下げることができます。

ここではまた、デザインシステムとコンポーネントの使用ガイドラインを誰が管理するのかという疑問が発生しますが、これは、コンテンツ編集者と協力して、テンプレートのガバナンス戦略を検討する機会となります。特定のコンポーネントやスタイルは、特定のブランドやサブブランドのページにのみ使用が許可されます。テンプレート編集者はポリシーを設定して、編集者が利用できるコンポーネントや、適用できるブランドスタイルを制限することができます。

テンプレート編集者には多くのユースケースと設定すべきルールがあり、実際、この担当者はデザインシステムを管理する担当者と密接に連携する必要があります（あるいは同じ担当者かもしれません。）。同じルールをデザインシステムの利用者とAEMコンポーネントライブラリーの利用者の両方が知っている必要があります。ZeroheightやFrontifyなど、デザインシステムの世界でも、これらの利用ガイドラインを把握できるツールが用意されています。

3．コンテンツ編集者がデザインルールに対応できる様にする

デザインシステムは、デザインのルール、ブランド標準、コンポーネントライブラリーに関して、UXチーム間で調整を行うための強力なツールですが、そこにコンテンツ編集者を含めるのはどうでしょう? コンポーネントライブラリーを使用するために定義されたベストプラクティスを提供することで、コンテンツ編集者を成功に導きます。

デザインシステムのドキュメント化は、デザインチームの方針や流儀を共有するための強力なツールです。文字数制限や画像サイズなどの多くの制限は、開発チームによって組み込まれている一方で、配置作業はより複数の構成要素により相対的に行われます。ヒーローコンポーネントは、ページの最上部にティーザーコンテンツを表示する目的で作られているかもしれませんが、ユーザーが1つのページに7つのヒーローコンポーネントを配置することを制限する開発はありません。デザインシステムの原則は、コンテンツ編集者に適切なコンポーネントの使用方法を定義するのに役立ちます。

あなたがエンドユーザーに対して行う様に、コンテンツ編集者のフィードバックを集めて修正することで、改善を続けます。コンテンツ編集者がコンポーネントをどのように操作しているか、ビジネスニーズと照らし合わせて理解しましょう。編集オプションは、新しいマーケティングの要求に十分な柔軟性を提供していますか? 編集オプションが複雑なために、コンポーネントの設定に時間がかかりすぎていませんか? このコンポーネントを編集する頻度はどのくらいありますか?

アコーディオンコンポーネントのようなものは、デザイン的にはシンプルで簡単に見えるかもしれませんが、コンテンツ編集者は、それぞれのアイコンやタイトル、説明、各セクションの追加コピーを編集しなければならないかも知れません。意図したコンテンツを表示するためにコンポーネントを使用するメリットより、コンポーネントの編集や修正にかかる時間の方が重要かもしれません。

Adobe Experience Managerのデザインにおける成功アプローチは、包括的なプロセスを取ることです。私たちがユーザーを中心とした設計アプローチを取る時、そこにコンテンツ編集者も含めないのはなぜでしょうか?

編集者のエクスペリエンス、ペインポイント、そしてゴールを理解することで、デザイナーはコンテンツマーケティングチームと開発チームの両方から賛同を得られるような決定を下すことができます。そして、コンテンツ編集者がこのデザインルールを維持できる様にすることで、彼らがデザインとコンテンツ配信のプロセスの一部を担うことに信頼を持てる様になります。

XDとAEMのデザインワークフローの改善を継続的にサポートしてくれたJay Ganaden氏とTor Gunderson氏に感謝します。

https://main--bacom-blog--adobecom.hlx.page/jp/blog/fragments/we-can-help

この記事は2021年10月に公開されたDo Your UX Designs Support Content Authors?を抄訳したものです。

Featured posts