Blog

デジタルチームは、エクスペリエンスの提供方法にさらに柔軟性を持たせたいと考えています。しかし、適切な調整がなければ、柔軟性を拡張するのは難しい場合があります。チームは、コンテンツとデザインの多様性の高まりをどのように調整する必要がありますか？

再利用可能な構造を利用することで、コンテンツとデザインの両方がモジュール化されています。

• モジュラーコンテンツは、情報とメッセージがどのように作成および管理されるかを構成します。
• モジュラー設計は、情報とメッセージがどのように提示されるかを構造化します。

コンテンツとデザインは分離されています：それらは独立しています。

• コンテンツは、コンテンツ要素で構成されるコンテンツタイプで構成されるコンテンツモデルによって構造化されます。
• デザインは、再利用可能なUIコンポーネント、レイアウト、およびパターン（まとめてデザインコンポーネントと呼びます）のデザインシステムによって構成されています。

しかし、コンテンツとデザインが分離されている場合、どうすればそれらを連携させることができますか？チームはそれらの間の関係をマッピングする必要があります。

マッピングには、コンテンツのフレームワークをUIフレームワークに関連付けることが含まれます。たとえば、店舗の場所の名前がある場合、その名前はUIにどのように表示されますか？場所のリストまたはマップに表示できます。

基本から始めましょう。コンテンツとデザインの関係を理解する最も簡単な方法は、単純なコンテンツタイプと単純なデザインコンポーネントを表示することです。いくつかの基本的なケースをカバーしたら、将来の投稿でより複雑なケースを見ることができます。このアプローチは、複雑さを拡大または縮小する可能性があります。チームはこのアプローチを使用して、テキストラベルを特定のデザイン要素に関連付けることができます。または、それを使用して、詳細な製品説明などの複雑なコンテンツ構造を、その情報を提示するデザインレイアウトに関連付けることができます。

まず、デザインシステムについて、そしてなぜそれらがコンテンツ作成者にとって謎になり得るのかについて話しましょう。

設計コンポーネントは私たちに何を伝える必要がありますか？

デザインシステムは、コンテンツの表示方法を形作ります。しかし、設計システムは、彼らが何をしようとしているのかを私たちに伝えるのがあまり得意ではない場合があります。

設計システムの設計コンポーネントは、要素の多くの属性を指定できます。これは通常、次のことを示します。

• 表示されるメディアの種類（テキスト、画像、ビデオ、チャート）
• 要素のレイアウトと配置
• 色とサイズ
• トランジションやアニメーションなどの動作

これらの属性はすべて重要ですが、作成者にはあまり役立ちません。

デザインシステムがめったに示さないのは、表示されているコンテンツの性質です。どのような種類のコンテンツが表示されるかはわかりません。代わりに、デザインシステムは「ボタンがあります。このサイズのフォントを使用するボタンにテキストを挿入してください。 」

Fortune100企業で使用されている有名な設計システムのコンポーネントを見てみましょう。

このコンポーネントは、アコーディオンの使用方法についてはあまり説明していません。

• どのようなタスクをサポートしていますか？
• アコーディオンが最良の選択肢となるのはいつですか？
• 拡張パネルの情報を非表示にするのはなぜですか？
• 好きな種類のテキストをアコーディオンに入れることができるようですが、それは良い考えですか？

コンテンツにとらわれないデザインシステムの問題に注意してください。この種の設計システムは、主に出所不明のコンテンツの準備ができている空のコンテナのコレクションであり、どのコンテンツもどのコンポーネントでも機能するように見えますが、考えてみるとそうではありません。

はい、デザインシステムは、さまざまな種類のコンテンツを処理するのに十分な柔軟性を備えている必要があります。しかし、彼らはすべきではありません：

• 非常に抽象的で曖昧であるため、詳細設計中に使用方法に関する質問が発生します。
• 「アトミック」レベルのプレゼンテーションの問題に集中しているため、ユーザーが直面している実際のタスクに対処できません。
• 自分のコンテンツがユーザーに提示されたときに使用できるかどうか、著者に疑問を残してください。

幸いなことに、一部のエンタープライズ設計システムはより具体的になっています。これらは、さまざまなコンテンツ要素がメッセージを伝達し、タスクをサポートするために必要な方法についての詳細を提供します。便利な設計システムは、各コンポーネントの目的とコンポーネント内の個々の要素を伝達します。

チームがコンテンツを再利用し、コンポーネントを分離して柔軟に保ちながら設計できるようにするには、次の2つの重要な質問を理解する必要があります。

1. コンポーネントに表示される情報はどこから来ていますか？
2. コンテンツタイプで構造化された情報はどこに表示されますか？

コンポーネントに表示される情報はどこから来ていますか？

アコーディオンの目的を考えてみましょう。アコーディオンにはどのようなコンテンツが表示されますか？単一の答えはありません。

チーム全体が、どのコンテンツタイプと要素がどのデザインコンポーネントに接続できるかを理解するのに役立ちます。

アコーディオンで表示する最も一般的なコンテンツタイプは、質疑応答（Q＆A）です。

アコーディオンには用語や定義を表示することもできます。これらは、特定のフレーズの意味を説明する必要がある場合によく見られます。たとえば、健康保険会社は、「ネットワーク内」や「承認された手順」などの重要なフェーズを定義する場合があります。

アコーディオンは、名前付きアイテムの後にそのアイテムに関連する詳細を表示することもできます。クレジットカード取引のリストが表示され、その後に各取引の詳細が表示される場合があります。

つまり、アコーディオンは、詳細が必要なアイテムを提示するときに役立ちます。アコーディオンは、ユーザーがすべてのアイテムに関連付けられている詳細を確認することなく、見出しのスキャンをサポートします。アコーディオンは、ユーザーがそれぞれの詳細を見なくても多くのアイテムをスキャンするのに役立ちます。

コンポーネントが役立つ理由と時期を説明します。設計システムは、コンポーネントの意図を説明し、その使用に関するいくつかのガイドラインを提供する必要があります。ここでの動機は、質問と回答のみをアコーディオンで表示できると言って詳細な設計ルールを指定することではなく、コンポーネントは、表示できるコンテンツの範囲を表示することにより、ユーザータスクをサポートします。設計者は、特定のコンテンツを表示するためにコンポーネントを使用するために示されている、または必要な例に限定されませんが、コンポーネントの意図を示すことで、より有用なコンポーネントが得られます。

設計者がコンポーネントの意図を示すと、コンポーネントの微細構造について話し合うことができます。

• 表示できるものにはどのような制限がありますか？
• 質問を切り捨てずに何文字にすることができますか？
• 質問を複数行に表示できますか？
• 答えはどのくらいの期間である必要がありますか？
• 答えはリスト、箇条書き、または表を提示できますか？

「テキスト」や「本文」と言うだけでは不十分です。デザインシステムはより明確にする必要があります。

これらの要件は、コンテンツモデルのガイドラインに反映できます。作成者は、コンテンツを作成するときにガイダンスを確認し、適切に表示されることを確信できます。

作成された情報はどこに行きますか？

デザインシステムと、それらが提示できるコンテンツの種類を知ることの価値について見てきました。次に、コンテンツ側について考えてみましょう。トピックとタスクに関するコンテンツは、必要な要素を示すコンテンツタイプとしてコンテンツモデルで指定されます。モデルは、関連するコンテンツタイプもリンクします。

コンテンツタイプを表示できるデザインコンポーネントの例を提供します。作成者は、作成しているコンテンツがどこに行くのかを把握したいと思うでしょう。重要なのは、1つの宛先だけに送信されるのではなく、コンテンツがさまざまなチャネルで使用されるさまざまなデザインコンポーネントに表示される可能性があることです。エクスペリエンスをサポートするのに最適なコンテンツを作成するために、作成者はユーザーがそのコンテンツをどのように体験するかを想像する必要があります。

デザインコンポーネントは、コンテンツタイプの要素の一部またはすべてを表示します。コンテンツタイプの要素は、必ずしもデザインコンポーネント内の要素と1対1で対応しているとは限りません。コンポーネントには、コンテンツタイプのサブセット（情報の一部）が表示されることがよくあります。まれに、デザインコンポーネントが複数のコンテンツタイプの要素を表示する場合があります。

先ほど、Q＆Aと、それらをアコーディオンで表示する方法について説明しましたが、他のコンポーネントでもQ＆Aを表示できます。

Q＆Aはオンラインフラッシュカードとして提示することもできます。質問は片側に、回答は反対になります。これは質問と回答を提示するためのあまり一般的ではない方法かもしれませんが、次のような特定のユーザーシナリオには役立つ可能性があります。カスタマーサポートスタッフが一般的な顧客の質問への回答を学ぶためのドリル材料を提供します。

チャットボットでもQ＆Aを提示できます。ユーザーが作成した質問と一致する質問を入力すると、チャットボットは適切な回答を提示できます。質問が多い場合は、チャットボットの方がアコーディオンよりも優れている可能性があります。

同じ状況（コンテンツタイプを提示する方法が複数ある）は、用語と定義にも当てはまります。

以前、用語と定義はアコーディオンで表すことができることを説明しました。

ただし、用語と定義は、ツールチップなどの他のデザインコンポーネントにも表示できます。ツールチップは、用語がラベルに表示されている場合に適している場合があります。ユーザーは用語を明確にすることができます。ただし、用語がで繰り返し使用されている場合は、長いドキュメントの場合、サイドバーなどの他の設計コンポーネントが定義を提示するためのより良いオプションである可能性があります。

多くの場合、コンテンツタイプはさまざまな方法で提示できます。コンテンツが提示される場所を知ることにより、作成者は、予想されるインタラクションのモードに一致するコンテンツを作成できます。設計システムで提供される例は、網羅的である必要はありませんが、網羅的である必要があります。プロトタイプであり、同様のユーザーシナリオに対応するように適合できるパターンを表します。

類似のモジュール間の違いを特定する

コンテンツモデルと設計システムがアプリケーションとカバレッジについてより具体的になるにつれて、チームは同様の他のユースケースについて質問する可能性があります。

Q＆Aコンテンツタイプは基本的な構造ですが、複数の回答を許可する必要があるとします。基本的なQ＆Aコンテンツタイプは、複数の回答に対応するように拡張できます。おそらく、質問に1つの正解と複数の間違った回答（または複数の正解）があるクイズを作成する必要があります。

質問に対する回答が複数ある場合、アコーディオンはコンテンツを提示するための理想的なデザインコンポーネントではなくなりますが、複数の回答を持つ1つの質問のコンテンツパターン（複数回答の質問）は、多くの一般的なデザインパターンに対応します。

• クイズ
• 調査または世論調査
• ウィザードまたはステッパー

設計チームは、これらすべての複数回答の質問に単一のコンポーネントで対処できるかどうか、またはバリエーションのある主要コンポーネントを開発する必要があるかどうかを決定します。別の考慮事項は、さまざまなチャネルでこれらのパターンを提示する方法に関するものです。カード形式、チャットボット、またはソーシャルメディアチャネルに配信されます。設計システムは、チャネル間でどの側面が同じで、どこが異なるかを伝えることができます。

前に説明した別のコンテンツタイプである用語と定義に戻りましょう。用語と定義が多数存在する場合は、それらすべてを収集して包括的な構造を提供する用語集を作成することを決定できます。組織内に複数の用語集があるとします（おそらくさまざまな言語）。用語集を表示するための再利用可能なデザインコンポーネントを作成することをお勧めします。さまざまな方法で用語集を表示できます。検索、インデックス作成、関連用語の相互参照など、ユーザーに提供する機能を検討してください。

スケールと柔軟性は互換性があります

従来、大規模なエクスペリエンスの提供は厳密な統一性に依存していました。すべてのコンテンツは固定テンプレートに準拠する必要があります。これにより、コンテンツとデザインの両方に万能のアプローチが実現しました。

コンテンツモデルとデザインシステムのカスタマイズにより、顧客体験を提供するための比類のない柔軟性がもたらされました。同じコンテンツは、顧客のタスクに最も関連するものに応じて、複数の方法で提示できます。デザインは、顧客に関連する正確な情報を提示できます。万能バージョンの代わりに。

しかし、一部のデジタルチームは、この柔軟性を管理する方法に苦労しています。具体的には、コンテンツタイプを設計コンポーネントに合わせるための反復可能なプロセスがありません。

コンテンツとデザインモジュールのマッピングは、コンテンツとデザインを大規模にオーケストレーションするために必要な欠落したプロセスを提供します。コンテンツモデルとデザインシステムの関係を明確にします。コンテンツの目的とデザインを結びつけます。