5段階モデルとは

ジェームズ・ギャレットは、Web構築時に考慮すべきことはユーザーにとってのエクスペリエンスであるとしています。

そして、UXの構築要素を5つに分けました。

  1. 戦略(why feature is required)
  2. 要件(what feature does)
  3. 構造(how feature works)
  4. 骨格(how feature forms)
  5. 表面(how feature looks)

戦略(why feature is required)

どのような価値を、誰に届けるのかなどを設計します。

戦略段階での具体的なデザイン手法

サービスやプロダクトを開発する上で、必要になるインプットを行います。

インプットを得るためのリサーチ方法
  • エグゼクティブインタビュー
    • 企業戦略の中での事業の位置付けの理解
    • 企業戦略と事業戦略の関連を理解することを目的
  • ユーザーインタビュー
    • ユーザーの抱えている課題を理解する
ビジネス側の観点でのリサーチ・分析
  • リーンキャンバス
  • ビジネスモデルキャンバス
  • KPIツリー
その他
  • バリュープロポジションマップ
    • 競合との価値の差別化をどのように行うかを考える場合はを用いる
    • 競合調査などを行う

成果物

  • サービス
  • プロダクトビジョン
  • コンセプト
  • ビジネスモデル

要件(what feature does)

サービス/プロダクトを通してユーザーが体験するストーリー、プロダクトに必要な機能仕様や要件などを設計します。

要件段階での具体的なデザイン手法と成果物

戦略段階で得た成果物を用いて、体験のアイデア創出を行い一連の体験への落とし込みます。
必要な機能の洗い出しなどを行います。

アイデア創出
  • ストーリーボード
  • バリュープロポジションキャンバス
全体の一連の体験定義を行うには
  • サービスブループリント
  • カスタマージャーニーマップなど

構造(how feature works)

以下の設計をして、UIの全体構造を作っていきます。
この段階で設計した情報の構造がUIのデータ構造になります。

  • ユーザー体験に必要な機能
  • インターフェースの設計
    • どのような情報とデータの構造で実現するのかという部分など

構造段階での具体的なデザイン手法

以下を参考に、プロダクトのドメインを定めます。

  • ユーザーストーリー
  • カスタマージャーニーマップ

成果物

  • 必要な情報の洗い出し
  • 情報の関連性の明示
  • 定めたドメインにおける概念図の作成
  • ナビゲージョンの設計など

骨格(how feature forms)

ユーザーが触れることになるであろうより具体的なインターフェイスの骨組みを設計します。
情報の構造にレイアウトを当ててUIの骨組みを組み立てていきます。

骨格段階での具体的なデザイン手法と成果物

ナビゲーションの構造図や扱う情報の構造などを用いてワイヤーフレームの作成などを行います。
作ったワイヤーフレームを用いてユーザーテストを行い、そのユーザーテスト結果を分析するプロトタイピングを繰り返してワイヤーフレームの修正を行っていきます。

表面(how feature looks)

プロダクトがユーザーにもたらす感性的な要素などを設計します。
UIを通してどのようなプロダクトの印象を与えるのかというUIグラフィックの設計、インターフェースとしてさらにスムーズな情報の伝達や、気持ちよさを感じさせるモーションの設計など構造的な部分だけではなく感性的な領域に深く入り込む部分も考えながらグラフィックやモーションの設計などを行います。

表層段階での具体的なデザイン手法と成果物

プロダクトの表層部分を通してどのような印象を与えたいのかや、ブランドにあったカラー選定を行いUIのグラフィックのデザインをしていきます。
また情報をより伝達し、ユーザーがプロダクトとよりインタラクトしている感覚を与えるモーションもこの段階で設計していきます。
ロゴデザインや、VIデザインもユーザーの中のプロダクトのイメージとして印象に強く残る効果を与えるものでしょう。