5段階モデルを活用したUXの考え方

  1. 5段階モデルを活用したUXの考え方

現在、Webサイトやアプリ制作などデザインの現場だけでなく、マーケティングや事業開発などビジネスの現場でも当たり前に使われている「UX(ユーザーエクスペリエンス)」という言葉。正しく理解しているつもりでも、「本当はちょっと曖昧...」なんて方も多いのではないでしょうか?今回のINI WAYでは、UXとは何かを詳しく紹介していきます。

目次

UX(User Experience)とは?

UXとは、ユーザーがサイトや製品、サービスなどを通じて得たすべての体験のことです。例えば、ユーザーがECサイトで商品を購入する場面を想像してみてください。サイトデザインの美しさや使いやすさだけでなく、正しく決済処理が行われ、きちんとした梱包でスムーズに商品が届き、購入後のサポートがしっかりしていること等がすべて繋がると「また購入したい」という感情が残ります。
つまり、以下の図のように感情や行動、関連して起こった個人的な出来事などはすべてUXの一部です。

UIとUXの関係

また、UI(ユーザーインターフェース)とUXはイコールではないということが重要です。前述のようにUXは「UIの使いやすさ」だけでなく、非常に多面的なものとなります。
では、どうすればユーザーにとって価値あるUXをデザインすることができるのでしょうか?そのヒントが「UXデザインの5段階モデル」です。次の章で詳しく説明します。

UXデザインの5段階モデルとは?

「UXデザインの5段階モデル」とは、デザイナーのJesse James Garrett 氏によって提唱された、UXの要素を5つの段階に分類した考え方です。

UXデザインの5段階モデル

UXの5段階モデル

  • 戦略(Strategy)
  • ユーザーニーズとプロダクト目的を定義

  • 要件(Scope)
  • ユーザーの目的を満たすために必要な機能を定義

  • 構造(Structure)
  • 情報を整理するための全体構造を設計

  • 骨格(Skeleton)
  • レイアウトや機能性などの情報を設計

  • 表層(Surface)
  • ユーザーが視覚的に認識するデザインを作成

この5段階モデルで重要なことは、

  • 戦略から表層は全て繋がっていること
  • 故にUXをデザインすることは表層(UI)のデザインだけでなく、戦略も含まれる

ということです。

Web制作における5段階モデル活用法

では、それぞれのパートの進め方を簡単にご紹介します。

1.戦略(誰に向けて)

まず、ユーザーニーズとプロダクト目的を定義します。具体的には「どんなユーザーが、どんなニーズを持ってサイトに訪れるか」、それに対して「サイトとしてどんなユーザーを取り込みどんなビジネスゴールを達成するか」を設定します。つまり、ユーザーに対してどんな価値を提供をするか考えることが大切です。

成果物の例:バリュープロポジションキャンバス

2.要件(何を)

戦略段階で定めたユーザーの目的を満たすために必要な機能を定義します。どのようなコンテンツや機能があれば、ユーザー体験を最大化できるかを考えていく段階になります。

成果物の例:サービスブループリント

3.構造(どのような情報設計で)

要件段階で機能を定めたら、ユーザーにとって最も利用しやすい形にすべく、情報や機能の全体構造を設計します。

成果物の例:サイトマップ、ページリスト

4.骨格(どのような画面設計で)

骨格段階では、レイアウトや機能性などの情報を設計します。プロダクトに必要なレイアウトやインタラクションについてワイヤーフレームなどを使って関係者と定義していきます。

成果物の例:ワイヤーフレーム

5.表層(どのような見た目で)

表層では、実際にユーザーが触れるプロダクトのビジュアルを設計していくフェーズになります。

成果物の例:ビジュアルデザインカンプ

まとめ

本記事ではUXデザインの5段階モデルについて紹介しました。Webサイト制作の場合、つい骨格や表層を(ワイヤーフレーム、ビジュアルデザイン等)重視してしまいがちかと思いますが、実際は戦略フェーズから全て繋がっています。つまり、戦略フェーズの段階からユーザー体験を意識することが大切です。INI株式会社では、UXデザインの経験を持ったデザイナーが戦略からご支援することが可能です。下記のお問い合わせよりお気軽にご連絡ください。

サービスに関するお問い合わせ

マーケティング、フロントエンド、バックエンドの知見と経験で、企業と生活者のより良いコミュニケーションをご提案します。