UXの5段階モデルにおける各段階での具体的なデザイン手法とは？【2019年版】
2022年追記：最新版記事のご紹介
UXの5段階モデル改めてデザインの5段階モデルとして、より汎用性の高い形で再解釈に取り組んでいます。最新版の記事はこちらからご覧ください。
UXの5段階（5階層）モデルはサービスやプロダクトがもたらすUXを5つの段階的要素で表したものです。戦略段階から一貫性を持ったサービス/プロダクトの開発を行うためには、このUXの5段階モデルの概念を意識して開発することが重要です。
関連記事：UXデザインにおける5段階モデルとは？
このUXの5段階モデルがなぜ重要なのかは分かるけれど、実際のプロダクト開発においてそれぞれの段階でどのようなことをすればよいのか分からないという方もいらっしゃると思います。
そこで今回は、UXの5段階モデルの各段階の関係性と、各段階で行う具体的なデザイン手法の例を紹介していこうと思います！
UXの5段階モデルにおける各段階の関係性
UXの5段階モデルを用いる際に最も重要であるのは、それぞれの段階の上下の関係、そしてその関係から成り立つ全体の5つの段階をどのように一貫性を持たせて繋げていくかではないでしょうか？
5段階モデルはサービスやプロダクトが与える体験のどの要素に焦点を合わせて着手をするのかという視点をもたらしてくれます。この視点を持つことで、一つの体験を成り立たせる5つの段階の中で、どの段階にフォーカスするのか？という部分を切り替えながらプロダクト開発を行えます。その中で前段階のアウトプットを次段階のインプットとし、それぞれの要素の繋がりを作ることが、最終的なアウトプットの精度を高めることに繋がるでしょう。
つまり、それぞれの段階でのデザインプロセスのアウトプットは、次段階でのデザインプロセスのインプットとして扱うことができるという関係性であることが分かります。ここで注意すべきは、5段階モデルの視点を用いることは前段階を必ずしも全て完成させてから次段階に進むという線形的なプロセスではないということです。現在の着手している段階を明確化し、そして明確化された各段階を何度も行き来しながらそれぞれの要素をデザインをし、最終的なアウトプットの精度をあげていくことが目的と言えるでしょう。
5段階での具体的なデザイン手法
それでは、各段階での具体的なデザイン手法の例を見ていきましょう。
最も抽象的であり、全ての段階でのデザインの根本となる戦略段階から紹介をしていきます。
戦略段階
戦略段階ではどのような価値を、誰に届けるのかなどを設計します。この段階で設計した戦略は、それを実現するためのサービス/プロダクトの目的となり原点となるので、この後の全てのデザインプロセスの土台となるでしょう。
戦略段階での具体的なデザイン手法と成果物
戦略段階では、サービスやプロダクトを開発する上で必要になるインプットをまず行います。インプットを得るためのリサーチ方法としては、企業戦略の中での事業の位置付けを理解し、企業戦略と事業戦略の関連を理解することを目的とするエグゼクティブインタビュー、ユーザーの抱えている課題を理解するためのユーザーインタビューなどを行うことが考えられます。
また、ビジネス的な観点でのリサーチ・分析では、リーンキャンバス、ビジネスモデルキャンバス、KPIツリーなどを用います。
その他にも、競合との価値の差別化をどのように行うかを考える場合はバリュープロポジションマップを用いたり、競合調査などを行うことも有用です。
このようなインプットを行い、サービス/プロダクトビジョン,コンセプト,ビジネスモデルなどをアウトプットします。
より詳しい戦略段階の解説を知りたい方はこちらの記事がおすすめです。
要件段階
要件段階では、サービス/プロダクトを通してユーザーが体験するストーリー、プロダクトに必要な機能仕様や要件などを設計します。この要件段階で設計したストーリーや機能から抽出したものが、この後の段階においてコンテンツ/情報/データとなります。
要件段階での具体的なデザイン手法と成果物
サービス/プロダクトビジョン,ペルソナモデル,コンセプト,ビジネスモデルなどを用いて体験のアイデア創出を行い、一連の体験への落とし込み、必要な機能の洗い出しなどを行います。アイデア創出には、ストーリーボードやバリュープロポジションキャンバスを用いることができます。また、全体の一連の体験定義を行うにはサービスブループリント、カスタマージャーニーマップなどの手法を使うことができるでしょう。
より詳しい戦略段階の解説を知りたい方はこちらの記事がおすすめです。
構造段階
構造段階ではユーザー体験に必要な機能とインターフェースをどのような情報とデータの構造で実現するのかという部分などを設計しUIの全体構造を作ります。この段階で設計した情報の構造がUIのデータ構造になります。
構造段階での具体的なデザイン手法と成果物
ユーザーストーリーやカスタマージャーニーマップより、プロダクトのドメインを定めます。そして必要な情報の洗い出しや、情報の関連性の明示、定めたドメインにおける概念図の作成、ナビゲージョンの設計、などを行うことが構造段階でのデザイン作業になるでしょう。
より詳しい構造段階の解説を知りたい方はこちらの記事がおすすめです。
骨格段階
骨格段階では、ユーザーが触れることになるであろうより具体的なインターフェイスの骨組みを設計します。情報の構造にレイアウトを当ててUIの骨組みを組み立てていきます。
骨格段階での具体的なデザイン手法と成果物
骨格段階では、ナビゲーションの構造図や扱う情報の構造などを用いてワイヤーフレームの作成などを行います。作ったワイヤーフレームを用いてユーザーテストを行い、そのユーザーテスト結果を分析するプロトタイピングを繰り返してワイヤーフレームの修正を行っていきます。
より詳しい戦略段階の解説を知りたい方はこちらの記事がおすすめです。
表層段階
表層段階ではプロダクトがユーザーにもたらす感性的な要素などを設計します。
UIを通してどのようなプロダクトの印象を与えるのかというUIグラフィックの設計、インターフェースとしてさらにスムーズな情報の伝達や、気持ちよさを感じさせるモーションの設計など構造的な部分だけではなく感性的な領域に深く入り込む部分も考えながらグラフィックやモーションの設計などを行います。
表層段階での具体的なデザイン手法と成果物
表層段階では、プロダクトの表層部分を通してどのような印象を与えたいのかや、ブランドにあったカラー選定を行いUIのグラフィックのデザインをしていきます。また情報をより伝達し、ユーザーがプロダクトとよりインタラクトしている感覚を与えるモーションもこの段階で設計していきます。
ロゴデザインや、VIデザインもユーザーの中のプロダクトのイメージとして印象に強く残る効果を与えるものでしょう。
より詳しい表層段階の解説を知りたい方はこちらの記事がおすすめです。
重要なのは、5段階モデルに示される5つの要素の全てが繋がった結果として、ユーザーが触れる表層部分が成り立っているということです。
サービスやプロダクトが与える体験としてはこの5段階モデルの全てが一つとして繋がった構造である、ということをデザイナーが強く意識する必要があります。そして、サービスやプロダクトを開発する中で現在着手している段階がどの部分であるのかを明確にし、そこで適切なデザインを行っていくことが、サービスやプロダクトが与える体験の5つの要素を密接に関連させ、一貫した体験を実現することに繋がるのではないでしょうか？
まとめ
今回はUXの5段階モデルの視点をサービス/プロダクト開発に用いた際の、各段階の関係性や各段階での具体的なデザイン手法についてご紹介しました。
このように、各段階の関係性を知りそれぞれの段階における目的とデザイン手法を明確にしておくことで、サービス/プロダクト開発におけるチームの方向性の共有や意思疎通がスムーズになる効果が見込めます。
メンバーの担当領域に関わらず、プロジェクトに関わるメンバーの全員がUXの5段階モデルを共通視点として持つことが非常に重要です。この共通視点を持つことが、コンセプトから一貫性を持ったより良い体験のサービスやプロダクトを作ることに繋がるのではないでしょうか？
Goodpatchでは企業のデザインパートナーとして、このような視点を取り入れながらより良い体験を持つサービスを作っています。新規事業立ち上げに戦略段階から並走するほか、既存サービスのリニューアルなども行なっておりますので、一貫した体験を実現したいとお考えの方は、ぜひお声がけください！
実際に担当した事例については、こちらからご覧ください。