UXの5段階モデル分解編 vol.3 サービス/プロダクトのデータ構造を明確にする構造段階での具体的なデザイン手法【2019年版】
目次
2022年追記：最新版記事のご紹介
UXの5段階モデル改めてデザインの5段階モデルとして、より汎用性の高い形で再解釈に取り組んでいます。最新版の記事はこちらからご覧ください。
UXの5段階（5階層）モデルは、サービスやプロダクトがもたらすUXを5つの段階的要素で表したものです。戦略段階から一貫性を持ったサービス/プロダクトの開発を行うためには、このUXの5段階モデルの概念を意識しながら開発することが重要です。
5段階モデルの概念や、各段階での一連のデザイン手法については理解できているが、構造段階の目的やデザイン手法をより詳しく知りたい！という方もいらっしゃると思います。
前回の記事では、要件段階における具体的なデザイン手法の紹介を行いました。今回は次の段階である構造段階において、目的と必要なインプットとアウトプットの説明、そのための具体的なデザイン手法の紹介を行いたいと思います。
UXの5段階モデルの概要をまずは理解したい！という方は以下の記事をご覧ください。
◼︎UXデザインにおける5段階モデルとは？
◼︎UXの5段階モデルにおける各段階での具体的なデザイン手法とは？
各段階の詳細は、こちらをご覧ください。
◼︎UXの5段階モデル分解編 vol.1 サービス/プロダクトの原点となる戦略段階での具体的なデザイン手法
◼︎UXの5段階モデル分解編 vol.2 サービス/プロダクトの開発指針を定める要件段階での具体的なデザイン手法
◼︎UXの5段階モデル分解編 vol.4 サービス/プロダクトの原型を作成し、ユーザビリティテストを行う骨格段階での具体的なデザイン手法
◼︎UXの5段階モデル分解編 vol.5 サービス/プロダクトのビジュアルを作り、ユーザーの感情を引き出す表層段階での具体的なデザイン手法
UXの5段階モデルにおける構造段階での目的とは？
UXの5段階モデルにおける構造段階での目的とは何でしょうか？
要件段階では、サービス/プロダクトにおいて「誰が、どのような情報を扱うか、そのために必要な機能は何か」を定めました。しかし、これらの要件はリストアップされているだけの状態であり、いざ実際の開発に移るには、まずそれらの繋がりを決定する必要があります。構造段階は、サービス/プロダクトの概念的なデータ構造を組み上げる段階です。
戦略段階、要件段階までは、サービス/プロダクトの方向性および要件を定めるという抽象度の高い段階でした。これを元にサービス/プロダクトの具体性を上げていくには、データ構造が「ユーザーにとって利用しやすい構造か？」「それが技術的に可能か？」「長期的に見て、サービス/プロダクトの今後の可能性を考慮できているか？」を検討する必要があります。すなわち「現実性」を考慮する必要があるといえるでしょう。
したがって「柔軟性と拡張性を持ち、ユーザーが利用しやすいサービス/プロダクトのデータ構造を作る」ことが、構造段階での目的となります。
構造段階で必要になるインプットとアウトプット
では「柔軟性と拡張性を持ち、ユーザーが利用しやすいサービス/プロダクトのデータ構造を作る」ために必要なことは何でしょうか？
UXの5段階モデルは、各段階が密接に繋がっているため、一つ前の段階である要件段階でのアウトプットが構造段階におけるインプットとなります。したがって、構造段階において必要になるインプットとは、要件段階でのアウトプットである「サービス/プロダクトが対象とする人・情報・必要な機能」であるといえるでしょう。
これらのインプットを元に構造の決定を行う際には、コンテンツをグルーピングして配置を決定する情報設計と、ユーザーとシステムの相互関係に関する機能的な側面を決定するインタラクションデザインの両アプローチが必要です。つまり構造段階のアウトプットは、情報設計をまとめたクラス図や、インタラクションをまとめたUIモデリング図となります。
構造段階での具体的なデザイン手法の例
ここからは、構造段階におけるデザイン手法の目的とその例、および実行にあたっての注意点を紹介していきます。
情報設計
情報設計においては、見える情報についての優先度を決めること、オブジェクト同士の関連性を明確にします。
これらの要素整理を行う手法として、カードソーティングやLATCHといったフレームワークが有用でしょう。
また具体的な手法として、情報をグルーピングしたのち、UIクラス図に落とし込むという手法があります。
UIクラス図とは、プロダクトの中で扱っている「クラス（＝オブジェクト）」同士の関連性を表す図です。エンジニアがよく用いるUML図とは異なり、あくまでユーザーに触れるUIとして現れる「オブジェクト」に限ったクラス図を指します。
Instagramを対象として、UIクラス図の例を考えてみましょう。
この図は、Instagramが扱うオブジェクトとその関係性を表しています。まず、自らのアカウント(Account)に始まり、各々のユーザー(User)、ストーリー(Story)、コンテンツ(Content)などが必要なオブジェクトとして挙げられます。さらに、ユーザー(User)に対してはフォローしたり、メッセージを送る(Message)といった行動が取れる必要があります。コンテンツ(Content)に対しては、コメントを残す(Comment)、タグ付け(Tag)、いいね(Good)、保存(Save)などの行動が考えられます。これらの行動自体も必要なオブジェクトと言えるでしょう。
このように、ユーザー扱う対象物および行動をUIクラス図として視覚化することで、必要な情報同士の関連性を明確にすることができます。
インタラクションデザイン
インタラクションデザインにおいては、関連性のあるオブジェクトを組み合わせ、メンタルモデルに合わせて、モードレスな体験を実現することを目標とします。
メンタルモデルとはユーザーのシステムに対する理解のモデルで、実装モデルはシステムそのものの仕組みです。
メンタルモデルについては、こちらの記事も参考にしてみてください。
モードレスとは、プロダクト/サービスのある段階によってユーザーの取れる行動が限られる状態（モーダル）ではなく、ユーザーがオブジェクトに対する操作を自由に選べるような状態のことです。状況に応じた機能制限を行わないことで、ユーザーの自然な動きを制限しないUIを設計することができます。
これらを踏まえて、まずは開発中のサービス/プロダクトにおけるユーザーのメンタルモデルと実装モデルを明確化します。そして、これらの情報を元にナビゲーション設計を行います。具体的な制作物としては、UIモデリング図が挙げられるでしょう。UIモデリング図とはUIそのものではなく、オブジェクト同士のコレクションビュー（一覧）またはシングルビュー（詳細）のインタラクションを検証するための図となります。
先ほどに引き続き、Instagramの例を考えてみます。
このように、各一覧ページ（HOME, SEARCH, HEART, USER）や、その中の詳細ページ（User, Followなど）において扱うオブジェクトを明確にします。これにより、具体的な構造を可視化することができます。
この一連のフローが、インタラクションデザインにおける手法となります。
ここで注意すべきこととして、ユーザーが達成したいゴールに加え、ビジネスが達成したい成果（コンバージョン）を明確にすることが必要です。
再びInstagramの例を考えてみましょう。Instagramのユーザーのゴールは「コンテンツを見ること」となり、これは「広告を含むコンテンツを見せる」というビジネスサイドの成果そのものです。この目標に向かって、必要となるオブジェクトを把握し、ナビゲーション設計（コンテンツに到達するための導線設計）を行う、という流れでインタラクションデザインを行うのが自然だと言えるでしょう。
UIモデリング図を振り返ってみると、全てのページからコンテンツへの遷移が可能な設計となっていることがわかります。このように、ユーザーの目的とビジネスの目的が一貫したデータ構造を作ることを心がけるべきでしょう。
構造段階でのアウトプット
以上の手法で可視化したUIクラス図およびUIモデリング図が、構造段階でのアウトプットとなります。
情報の優先度や関連性を可視化することで、ユーザーのメンタルモデルおよび実装モデルをチーム全体で共有できます。また、ユーザーの目に触れるインターフェイスを実際に設計する前段階から、UXデザイナー、UIデザイナー、エンジニアが目線を合わせることができるようになり、構造段階に続く骨格段階で実現可能性の高いUI設計に繋がります。
まとめ
今回はUXの5段階モデルにおける構造段階での目的や、具体的なデザイン手法についてご紹介しました。
構造段階はUXの5段階モデルにおいて、サービス/プロダクトのデータ構造を組み上げる段階です。要件段階からすぐにワイヤーフレームを作ろうとすると、機能的、構造的に問題が生じた際に修正する手間が増えてしまいます。したがって、具体的なプロダクトの形を決定する前にそのデータ構造を明確化する構造段階は重要と言えます。現実性を持たせた具体化を行うためには、UXデザイナー、UIデザイナー、エンジニアが各々の視点から一緒に構造段階に取り組むこと、素早くアウトプットして作り直すというサイクルを回すことが大切になります。そうすることで、より精度高く「柔軟性と拡張性を持ち、ユーザーが利用しやすいサービス/プロダクトのデータ構造を作る」ことができるのではないでしょうか。
Goodpatchではデザインパートナーとして、UXの5段階モデルの戦略段階から表層段階まで、新規事業の立ち上げを一つのチームとなって行うほか、既存サービスのリニューアルに関しても並走します。構造段階においても、インタラクションデザイン、情報設計の両面から、サービス/プロダクトのデータ構造の構築を丁寧にサポートいたします。
より良いユーザー体験とビジネスの両立を実現されたい方は、ぜひお声がけください！
実際に担当した事例については、こちらをご覧ください。
参考
Jasse James Garrett 『ウェブ戦略としての「ユーザーエクスペリエンス」』
https://note.mu/kuniorock/n/n6caaaef37b06