UXデザインを考える上で重要な5段階モデル（ギャレットの5段階｜5階層モデル）の考え方。その中の『構造』は、戦略、要件フェーズで作った基礎の上に骨組みを作るフェーズ。どんなに要件定義が優れていても構造が破綻していると、欲しかったけど使いづらいサービスになってしまいます。
この記事では要件を論理的に組み立てていく構造フェーズがなぜ重要か、具体的なアウトプットはなにかご紹介します。
UXデザインの意味から設計プロセス、成功事例など、網羅的な解説はこちらでしています。
UXデザインを行う上での5段階モデルとは
UXデザインの5段階モデルとは、最終的な表層のデザインに至るまでの工程を5段階に分けた考え方のことです。5段階に沿ってUXデザインを進めることで、企業の経営戦略とひも付き、ユーザーニーズにも合ったサービスを作ることができます。
特に今回の戦略フェーズは5段階モデルの骨組み部分。ユーザー理解コスト、開発コスト、拡張コストに大きく影響します。
UXデザインにおける5段階モデルについてはこちらで詳しく説明していますので、ぜひ見てください！
では、UXデザインの5段階モデルにおける構造の意義や役割を紐解いて行きましょう。
UXデザインにおける構造の意義
前回の要件フェーズでは、ユーザーと『体験とお金の等価交換』を実現するために、ユーザー視点からマネタイズまでに必要な要件を定義しました。
構造フェーズでは要件を構造化し、『BTC（ビジネス、テクノロジー、クリエイティブ）』3つの観点から整合性を検証、確認します。
- ビジネス：マネタイズ方法、タイミングは最適か
- テクノロジー；実現可能か、難易度は問題ないか
- クリエイティブ：体験の流れは最適か
1つでも不整合があると事業として成長しづらいサービスになってしまいます。
- とても欲しかった、使いやすいと評価を受けたが、売上につながらず事業成長しない
- ユーザーからの評価は高く成長しているが、追加機能開発に莫大なコストがかかり、これ以上拡張できない
- ほしいサービスなので我慢して使っているが、とにかく使いづらい
ここで重要なのが3観点の優先度。一番大事なのは事業成長させること。ビジネスとしてうまく行かなければ、どれだけ良いものを作っても作り続けることはできません。
テクノロジー、クリエイティブの観点は大事にしつつ、ビジネス観点を満たすまでにどこまで折り合いをつけるべきか。このバランス感が大切です。
論理的に構造化するための方法とは
ここからは要件を具体的に構造化する手順をご紹介します。
一般的な構造化の手法に加えて、より論理的に作り上げるために、“オブジェクトベースUIデザイン（OOUI）”の設計手法を用いた構造設計についてもご紹介します。少しむずかしい内容ではありますが、頑張ってついてきてください！
UIモデリング
オブジェクトベースUIデザイン（OOUI）とは？
OOUIとは簡単に言うと、開発のデータベース設計の様に、UIをオブジェクト単位で考える設計手法です。OOUIで重要なのが『名詞→動詞』の順に設計すること。
こう聞くと難しく思えますが、現実世界は『名詞→動詞』が当たり前なのです。
例えば買い物をする時、物を選んでからお金を払いますよね？これは『名詞｜物』に対して『動詞｜お金を払う』と言う動詞を行っています。
ではいざこれをプロダクトやサービスに落とし込むとなぜか『動詞→名詞』（タスクベースと言われています）の順番で矛盾が生まれることが多いのです。自動販売機はどうでしょう？
- 商品を探す
- 商品を見つける
- 選びたい…と思ったらお金を入れなきゃいけない
- お金を支払うと商品を選べる
『動詞｜お金を払う』を行わなければ『名詞｜商品』に対してアクションできないのです。
今回のような矛盾が起こらないようにユーザーが慣れ親しんでいる『名詞→動詞』の順番で設計する為にOOUIを使います。
OOUIを使って3観点の整合性を確かめる
OOUIが何となくわかったところで、実際に使ってみながらビジネス、テクノロジー、クリエイティブ3観点の整合性をチェックしていきましょう。
今回はナビゲーションアプリを例にします。前回の要件フェーズ｜要求定義で、オブジェクトに対する要求を洗い出しました。
| オブジェクト | 要求 | 根拠 | 指標 |
| 経路 | 行きたい経路を検索したい | 経路検索数 | |
| 経路 | 過去の経路から検索したい | ユーザーヒアリングから過去の経路を使いまわしたいニーズが見えた | 経路検索方法割合 |
| … | … | … | … |
この要求定義をオブジェクト単位で整理します。開発用語でこの作業は『モデリング』と呼ぶため、UIモデリングと呼びます。
経路で言うとこんな感じです。
では少し広げて、ナビアプリには地図があるので、地図もモデリングしてみましょう。
地図のオブジェクト内に『経路を見る』がありますよね？地図を見ると経路が繋がりそうです！
オブジェクトのつながりが見えてきましたね。地図を中心に何かを探したり経路を検索するのが自然な流れになります。
さらにここにビジネス視点を入れてみましょう。ここまで地図を見て経路検索をして比較して、と一通りの成功体験を行いましたね。後は必要であればナビを開始するだけ。最後の体験をマネタイズポイントにしてみましょう。
ここまで自然な流れで体験しつつ、適切なタイミングで課金の訴求ができましたね！ビジネス観点が破綻していると、例えばまだ体験していない地図画面で課金訴求をしてしまうなど、クリエイティブの観点を損ねてしまいますね。
このようにUIモデリングを使えばオブジェクト単位で整理しながら、3観点の整合性を確認することができるのです。
サイトマップ
UIモデリングが終わったら、サイトマップを作成します。
サイトマップは画面単位で構造整理した一覧表になります。UIモデル図を元に、各動詞に対して画面として用意するか、画面内の状態遷移として配置するか整理します。
例えば『地図を保存する』に対しては、地図に対して保存する状態遷移と、保存した地図を見るための画面を用意する、の様な形で整理します。
整理のコツとしては、動詞によってデータを保持した場合どこで出力するか、データのインプット/アウトプットを意識してみるのがおすすめです。（レビューを見る場合は、入力箇所と表示箇所と2画面いる、の様な整理です。）
今回のモデル図から作成したサイトマップが下図の通りです。比較や保存など1画面内の状態変化で対応できる動詞が多かったため、画面数はかなり少なくなりました。
まとめ
今回は構造の意義と具体的な進め方についてご紹介しました。少しむずかしい内容でしたが、構造設計と3つの観点をOOUIによって根拠付けることで、質の高い設計が可能になります。
ぜひ自社サービスのUXデザインに取り入れてみてください！
他にもそもそもUXデザインの5段階モデルとは何か、それぞれの段階で何を行っているのかもまとめています。一通り読んでUXデザインを行ってみましょう！
本記事に関するサービスメニュー
UXUIデザイン支援資料
セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。
