当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
承知しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。本サイトで使用するCookieについては、プライバシーポリシーをご確認ください。

Blog

ブログ

コンテンツ管理

ヘッドレスCMSを使用したモジュラーUX

By Michael Andrews  

企業は、モジュラーコンテンツとモジュラーデザインを採用することで、ユーザーエクスペリエンスを向上させることができます。しかし、どうすればこれらのアプローチを効果的に連携させることができるでしょうか。

エクスペリエンスデザインは、他の重要なビジネス機能と同様に、変革を遂げています。敏捷性、合理化、および大規模な運用が重要な優先事項として浮上しています。ヘッドレスコンテンツ管理は、エクスペリエンスを提供するためのモジュラーアプローチをサポートすることにより、エクスペリエンスデザインを最新化するために不可欠です。

顧客は、ブランドとのやり取りに一貫性と関連性を期待しています。組織は、拡大するチャネルの範囲全体に適合する情報とサービスを提供できなければなりません。

ヘッドレスCMSは、デジタルチームがモジュラーアプローチを採用してデザインを体験することをサポートできます。チームは、情報やサービスの設計を画面ごとに停止できます。代わりに、適切なフレームワークが整っていれば、再利用可能なコンテンツやデザインモジュールからさまざまなエクスペリエンスを構成できます。

複雑さと規模に対処するには、システムが必要です。多くの企業は、デザインシステムを開発し、コンテンツの構造化を模索することで、ユーザーエクスペリエンスの提供方法を体系化する必要性を認識しています。これまでのところ、これらのアクティビティを統合機能に統合できた企業はごくわずかです。彼らはモジュラーコンテンツとモジュラーデザインの価値を認識していますが、これらのアプローチを統合されたフレームワークに組み合わせることができていません。

モジュラーUXは、デジタルチームがより多くのことを行い、結果を改善する機会を提供します。この投稿では、モジュラーコンテンツとモジュラーデザインのメリットを活用し、それらを相互にサポートする方法について説明します。以下を見ていきます。

  • ユーザーエクスペリエンスの実践を変革する必要性
  • コンテンツとデザインを切り離すことの重要性
  • デカップリングをサポートし、モジュラーエクスペリエンスを提供するシステムを構築する方法

システム主導のユーザーエクスペリエンスへの移行

変革の課題を見てみましょう。コンテンツ操作(ContentOps)とデザイン操作(DesignOps)はどちらも、新しい情報や機能の提供、新しいチャネルやプラットフォームでの新しい対話モードの提供など、新しい要件に迅速に適応する必要があります。

柔軟性のないテンプレートは問題を引き起こします。多くの企業は、新しいニーズに適応できないコンテンツを提示するために、依然として厳格なテンプレートに依存しています。彼らは、コンテンツを変更し、プレゼンテーションを簡単に設計できる堅牢なシステムを欠いています。その結果、デジタルチームは、特別な要求や特別なプロジェクトの処理に時間を費やしています。たとえば、コンテンツを表示するための特別なレイアウトまたはカスタムウィジェットを持つWebページを作成する必要があります。または、ハードコードされたテキスト文字列やその他のコンテンツを使用してスマートフォンアプリを開発する必要がありますが、後で変更するのは面倒です。彼らの慣行は、画面デザインを特定のコンテンツと絡み合わせ、コンテンツとデザインを柔軟性のないものにします。

手作りのスクリーンは持続可能ではありません。 1回限りのデザインは短期的な柔軟性を提供するように見えますが、コンテンツ構成を画面デザインに緊密に結び付け、最終的にデジタルチームが管理しなければならない困難を増します。1回限りのデザインは3つの問題を引き起こします。

  1. それらは生産するのに非効率的です。
  2. 大規模なプロジェクトに成長する必要がある場合、拡張性はありません。
  3. 1回限りの設計を長期間維持するのは難しいため、長期的なコンテンツと技術的負債が発生します。

これらの頭痛の種に加えて、1回限りのデザインと固定テンプレートも、顧客にとって最高のエクスペリエンスを生み出しません。コンテンツとデザインは、特定の配信チャネルに関連付けられた特定の画面にロックされている場合、さまざまな状況に柔軟に対応できません。つまり、ユーザーは自分のニーズに合わせたコンテンツや機能を体験できません。

「フラグメント」は解決策ではありません。一部の有名なWebCMSは、画面の「フラグメント」と呼ばれるものを導入することで、固定コンテンツデザインテンプレートの非効率性を克服しようとしました。フラグメントアプローチによって約束される利点は、異なる画面が同じコンテンツとデザインのチャンクを再利用できることです。

画面フラグメントの問題は、それらがまだデザインとコンテンツのチャンクを結合していることです。アプローチは脆弱で不器用です。画面フラグメントの交換は恣意的で見栄えがする可能性があります。コンテキストに関連するものを見る代わりに、他の場所からリサイクルされたフラグメントがユーザーに表示されます。 。コンテンツの詳細はまだ画面デザインに固定されているため、企業は画面フラグメントアプローチからも真の柔軟性を実現していません。

モジュール性は柔軟性を提供します。コンテンツとデザインがそれぞれ複数の方法で使用できるモジュラーリソースとして開発されると、デジタルチームはより良いエクスペリエンスを構築できます。コンテンツを作成して画面ごとに設計したり、固定テンプレートの制約に制限したりする代わりに、チームは、コンテンツのユニットがUIモジュールと連携して、さまざまなユーザーシナリオに対応する方法を計画します。

コンテンツとデザインを切り離すことの重要性

デジタルチームは、真に適応性のあるユーザーエクスペリエンスを提供する能力を阻害するレガシーWebプラットフォームによって妨げられています。レガシープラットフォームは、ユニバーサル画面テンプレートの構造をチームに課し、コンテンツとデザインの管理方法を決定します。これらのCMSは、コンテンツとデザインを緊密に結合しているため、コンテンツモデルは画面デザインを反映しています。 Web中心のCMSは、ヘッドレスCMSとは異なり、コンテンツとデザインの分離を許可しません。

柔軟性は敏捷性を生み出します。コンテンツとデザインの詳細を接着することはできません。彼らはお互いに反応しなければなりません。

成功は、適切なエクスペリエンスを提供することにかかっています。デカップリングは技術的な決定のように聞こえるかもしれませんが、基本的にはビジネスに大きな影響を与えるカスタマーエクスペリエンスの問題であり、企業がさまざまなデバイスやチャネルでユーザーに適切なエクスペリエンスを提供できるかどうかを決定します。デカップリングにより、コンテンツとデザインの詳細が独立します。つまり、デジタルチームは、コンテンツを変更せずにデザインレイアウトを変更でき、デザインを変更せずにコンテンツの詳細を変更できます。デカップリングは柔軟性を可能にします。

デカップリング
デカップリング

デカップリングは、CSSで固定コンテンツのスタイルを変更したり、ブレークポイントを使用してレスポンシブデザインでレイアウトをシフトしたりするだけではありません。デカップリングにより、コンテンツとデザイン要素の両方を変更して、さまざまなコンテキストや進化するユーザー要件に適応させることができます。

デカップリングにより、エクスペリエンスの関連性を維持できます。デカップリングは、適切なユーザーエクスペリエンスを提供するために、コンテンツとデザインを継続的に調整できる必要があることを認識しています。コンテンツとデザインにはそれぞれ独自の役割があるため、自律的である必要があります。ただし、お互いに対応して適応できる必要もあります。コンテンツはユーザーの画面上の動作に影響を与え、ユーザーが反応するコンテンツを変更します。人々は彼らが見るコンテンツに反応します、そして彼らが見るコンテンツは人々がしていることに反応する必要があります。特にユーザーエクスペリエンスがよりパーソナライズされるにつれて、あらゆる種類のコンテンツとデザイン要素を変更できる必要があります。

コンテンツの相互作用を動的にするために、デジタルチームは、UIに表示されるコンテンツとデザイン要素の両方を変更できる分離されたアプローチを必要としています。デカップリングがないと、コンテンツやデザインがフリーズします。

コンテンツとデザイン要素の相互作用
コンテンツとデザイン要素の相互作用

コンテンツはユーザーに適応する必要があります。コンテンツとデザインの相互作用がどのように発生するかを考えてみましょう。コンテンツ側では、メッセージと情報がユーザーに通知し、行動を促します。画面では、ユーザーが持つ特定のタスクをサポートするように情報が配置されます。情報のレイアウトは、情報の構造または目的を反映しています。コンテンツ要素(見出し、ラベル、説明、画像など)はグループ化され、ユーザーが知っておくべきことを伝える統合メッセージを提供します。

コンテンツ要素は、比較、アイテムのランク付け、特定の情報の検索、オファーにサインアップするかどうかの決定などの一般的なユーザータスクをサポートするデザインコンポーネント内に表示されます。これらのコンポーネントに表示される情報とメッセージは、ユーザーが次に何をする必要があるかに応じて調整できます。

ユーザーが選択を行うと、コンテンツはそれらの選択に基づいて応答します。たとえば、ユーザーがボタンをタップすると、追加の詳細や、実行したアクションを確認するメッセージが表示される場合があります。

デザインの詳細も変更される可能性があります。デザインの目的は、ユーザータスクをサポートすることです。ユーザーがUIを操作するとき、そのUIは次のアクションをサポートするように調整する必要があります。モーダルが表示または非表示になったり、ボタンの色が変わったりする場合があります。ユーザーインターフェイスに表示されるコンテンツとデザインの詳細は動的で常に変化します。デカップリングを使用すると、デジタルチームはコンテンツとデザインの詳細の表示を変更することに制限されません。ユーザーに関連情報とフィードバックを提供および改善する方法に焦点を当てることができます。

ユーザーの旅の段階に基づいて適切なシーケンスを設計する場合、コンテンツを変更して最適なオプションを提供する機能は不可欠です。これらの要素を変更する必要があるときに、適切な要素を提供できるシステムが必要です。

基盤を調整することにより、詳細を切り離します

ユーザーインターフェイスに表示されるコンテンツとデザインの詳細を分離することが目標である場合、それはどのように実現されますか?デジタルチームは、この柔軟性をサポートするための基盤を構築する必要があります。

画面デザインとコンテンツの分離は、コンテンツモデルとUIデザインシステムという2つの重要なシステムを調整することで可能になります。画面に表示されるコンテンツとデザインの詳細を、さまざまなエクスペリエンスに構成できる再利用可能なモジュールに構造化します。

これらのシステムは、ユーザーエクスペリエンスのコアディメンション、つまり、人々が知る必要のあるコンテンツと、人々が認識し、実行することに影響を与えるデザインを分類および管理します。

  • コンテンツ構造(コンテンツモデル)は、表示に使用できるメッセージと情報の種類を定義します。
  • デザイン構造(UIデザインシステム)は、ユーザーに提供されるコンテンツとアクションを決定します。

システムは、ユーザーが必要とする重要なコンテンツとデザイン要素を識別し、使用可能な要素とその使用方法を示します。

システムをサイロ化することはできません。調整が必要です。コンテンツモデルとデザインシステムを持っているだけでは十分ではありません.2つは一緒に計画する必要があります。そうすれば、それらは一緒にうまく機能します。多くの場合、コンテンツチームとデザインチームは、統合をあまり考慮せずに、コンテンツモデルとデザインシステムを異なる時期に独立して開発します。調整を念頭に置いて計画されていなかったため、コンテンツモデルとデザインシステムの両方が一般的すぎてしまいます。それらはきめ細かくなく、本来あるべきよりも柔軟性がありません。それらの間のマッピングが欠けています。

デジタルチームは、組織がユーザーに提示する必要のあるパターンを探すことで、コンテンツモデルとデザインシステムを具体化したいと思うでしょう。コンテンツモジュール(関連するコンテンツ要素のグループ)は繰り返しの情報パターンをサポートし、デザインモジュール(UI要素のグループ)は繰り返し使用されるインタラクションパターンをサポートします。これらのパターンを特定することで、チームは必要な構造とコンテンツとデザイン要素がどのように関連しているかを理解できます。 。

コンテンツとデザイン構造の間の関係をマッピングします。コンテンツがコンテンツモデルで構造化されている場合、デジタルチームは提示できる情報をきめ細かく制御できます。特定のデザインコンポーネントでさまざまな種類のコンテンツを使用できます。デジタルチームは、デザインコンポーネントでサポートされているタスクに関連付けられたコンテンツモデル内で定義されている情報の種類をマッピングする必要があります。たとえば、デザインコンポーネントがサインアッププロセスをサポートしている場合、そのプロセスに関連するコンテンツはどれですか。一般的なサインアップコンポーネントを使用するコンテンツ。

同様に、ユーザーにとって最も有用なものに基づいて、同じコンテンツを複数の設計コンポーネントに配信できます。ユーザーは、達成したいことに応じて、同じ情報をさまざまな方法でさまざまな時間に表示したい場合があります。ここでも、デジタルチームは次のことを行う必要があります。コンテンツモデルによって定義された情報を選択してグループ化し、それらをさまざまなユーザーシナリオをサポートする設計コンポーネントにマップする方法を検討してください。

調整により、各システムの価値が高まります。コンテンツモデルは、コンテンツを提示する可能性のある宛先を知らなくても、限られた価値しか提供しません。コンテンツは、さまざまなコンポーネントやさまざまなチャネルで、さまざまな方法で提示できることを忘れないでください。適切な詳細が利用できるように情報とメッセージを構造化するには、特定のタスクをサポートするためにコンテンツをどのように提示できるかを知ることが役立ちます。コンテンツプランナーは、ユーザーが表示する必要のある特定の情報と、その情報が必要になる旅やタスクのどの段階かを検討する必要があります。

同様に、設計システムは、それらがどのような種類のメッセージや情報を提示するかを知らなければ有益ではありません。設計者は、表示する必要のある情報の種類とその目的を理解していない限り、設計コンポーネントでユーザーをサポートする方法を計画することはできません。ユーザーが情報を参照している特定のタスクを知らずに、コンテンツをUIカードに入れることにはほとんど意味がありません。彼らは、人々が問題なくタスクを完了するためにどのような情報を見る必要があるかを知りたいと思うでしょう。

UI層、コンポーネント層、およびシステム基盤層におけるコンテンツとデザインの関係。
UI層、コンポーネント層、およびシステム基盤層におけるコンテンツとデザインの関係。

企業に共通のフレームワークを構築します。コンテンツモジュールがデザインモジュールにマッピングされると、デジタルチームは、連携して機能するコンテンツとUIを作成する自信を得ることができます。提示される各コンテンツ要素の目的は、UIで使用されるデザイン要素の目的と一致します。ユーザーが知る必要があることを示すコンテンツのフレームワークは、関連するタスクをサポートするデザインコンポーネントと一致します。 NS。

コンテンツモデルとデザインシステムの調整により、あらゆるチャネルのあらゆるトピックに関するエクスペリエンスを提供するためのフレームワークが作成されます。特定の正確なメッセージや情報をさまざまな方法で提示できるようにすることで、よりコンテキストに関連したエクスペリエンスをユーザーに提供します。コンテンツは、さまざまなチャネルやプラットフォームで正常に機能します。

この調整により、デジタルチーム内のコラボレーションと生産性も向上します。コンテンツチームとデザインチームのメンバーは、さまざまなユーザーシナリオに対処する方法を決定する際に、一般的に合意されたフレームワークを持っています。これは、コンテンツとデザインの利害関係者の間で、作業の互換性を保証する契約またはサービスレベル契約を結ぶことに似ています。双方は、彼らが作成したものが彼らの同僚が開発しているものとうまくいくと確信するでしょう。

デジタルチームは2つの利点を実現します。

  1. 新しい体験を迅速に提供する柔軟性
  2. 一貫した方法でコンテンツとデザインパターンを大規模に提供する信頼性

要約:モジュール性でエクスペリエンスを変革する

重要なポイントを簡単に確認しましょう。

エクスペリエンスデザインの柔軟性と敏捷性を高めるために、デジタルチームは次の3つの機能の開発に集中する必要があります。

  1. ユーザーインターフェイスに表示されるコンテンツとデザインの詳細を分離する
  2. ユーザーに提示されるコンテンツとデザイン要素を、独立した再利用可能なモジュラーリソースに構造化する
  3. コンテンツモデルとデザインシステムを使用したコンテンツとデザイン要素の管理

これらの機能は、モジュラーコンテンツをモジュラーデザインと組み合わせて統合することにより、エクスペリエンスデザインへのモジュラーアプローチをサポートします。具体的には、このアプローチは3つの層の相互作用に依存しています。

  1. システム層は、コンテンツモデルと、必要なすべてのコンテンツおよび設計要素の目的を識別および定義する設計システムで構成されます。
  2. 情報と相互作用を構造化するためのフレームワークを提供する、再利用可能なコンテンツとデザインモジュールのコンポーネント層
  3. ユーザーに提示される変数の詳細を表すUI層

UXへのモジュラーアプローチに従うには、事前に考える必要があります。ただし、機能を一度に構築する必要はありません。新しい要件が発生すると、機能を進化させることができます。そして、配置されると、それらは大きな効率を提供します。将来の投稿で、新しいプロジェクトをサポートするためにチームがシステムをレベルアップするために何をする必要があるかを見ていきます。


Headless CMSの導入をお考えでしょうか?

クラウドとマルチデバイスに最適化されたKentico Kontentをお試しください