UXの5段階モデル分解編 vol.4 サービス/プロダクトの原型を作成し、ユーザビリティテストを行う骨格段階での具体的なデザイン手法【2019年版】
目次
2022年追記：最新版記事のご紹介
UXの5段階モデル改めてデザインの5段階モデルとして、より汎用性の高い形で再解釈に取り組んでいます。最新版の記事はこちらからご覧ください。
UXの5段階（5階層）モデルは、サービスやプロダクトがもたらすUXを5つの段階的要素で表したものです。一貫性を持ったサービス/プロダクトの開発を行うためには、このUXの5段階モデルの概念を意識しながら開発することが重要です。
今回は、構造段階に引き続き、UXの5段階モデルの骨格段階における目的と必要なインプットとアウトプットの説明、そのための具体的なデザイン手法の紹介を行いたいと思います。
UXの5段階モデルの概要をまずは理解したい！という方は以下の記事をご覧ください。
◼︎UXデザインにおける5段階モデルとは？
◼︎UXの5段階モデルにおける各段階での具体的なデザイン手法とは？
各段階の詳細は、こちらをご覧ください。
◼︎UXの5段階モデル分解編 vol.1 サービス/プロダクトの原点となる戦略段階での具体的なデザイン手法
◼︎UXの5段階モデル分解編 vol.2 サービス/プロダクトの開発指針を定める要件段階での具体的なデザイン手法
◼︎UXの5段階モデル分解編 vol.3 サービス/プロダクトのデータ構造を明確にする構造段階での具体的なデザイン手法
◼︎UXの5段階モデル分解編 vol.5 サービス/プロダクトのビジュアルを作り、ユーザーの感情を引き出す表層段階での具体的なデザイン手法
UXの5段階モデルにおける骨格段階での目的とは？
UXの5段階モデルにおける骨格段階での目的とは何でしょうか？
骨格段階は、構造段階で作り上げたUIモデリング図、UIクラス図を元に、実際にユーザーが触れるインターフェイスの枠組みを完成させる段階です。ここで初めてサービス/プロダクトの完成形が見えます。しかし、表層段階まで作り上げてしまうと、もしサービス/プロダクトの骨格を修正する必要が出てきた場合、手戻りのコストが多くかかってしまいます。したがって、骨格段階で仮説検証を何度も回す必要があります。
つまり「プラットフォームに最適なレイアウトを作り、インタラクションを検証する」ことが骨格段階での目的となります。
骨格段階で必要になるインプットとアウトプット
では、「プラットフォームに最適なレイアウトを作り、インタラクションを検証する」ために必要なことは何でしょうか？
ここまでの段階と同様、一つ前の段階である構造段階でのアウトプットが骨格段階におけるインプットとなります。したがって、骨格段階において必要になるインプットとは、構造段階で可視化した「柔軟性と拡張性を持ち、ユーザーにとって理解しやすいサービス/プロダクトのデータ構造」であるといえるでしょう。これに加え、プラットフォームに関する基本的な知識を持っていないと、実際にデザインを組むことができません。サービス/プロダクトに関する情報の他に、基本となるデザイン原則や設計思想をチームでインプットし、共有することが必要です。さらに、トレンドであるデザインの調査もインプットとして必要になるでしょう。
これらのインプットを元に、サービス/プロダクトのレイアウトとなるワイヤーフレームを設計し、アウトプットするのが骨格段階といえます。
骨格段階での具体的なデザイン手法の例
ここからは、骨格段階におけるデザイン手法の目的とその例を紹介していきます。
デザイン原則、設計思想
実際にデザインを行うにあたって、まずはOSに対応する原則を学ぶ必要があります。AppleやGoogle、Microsoftなどのプラットフォーマーは、それぞれデザインガイドラインを提示しています。
iOS Human Interface Guideline (Apple)
Material Design (Google)
Microsoft Design (Microsoft)
プラットフォームについての理解を深め、選択したプラットフォーム上で最適に機能するデザインを目指すため、これらの設計思想をインプットしてUI設計を行う必要があります。
デザインパターン
設計を行うにあたってよく発生するデザイン上の問題に対しては、すぐに適用できる解決策（デザインパターン）がパターンライブラリやパターンセットとして整理されています。それらをあらかじめインプットしておくと、先人が解決してきた問題に対してベストな解決策を打つことができ、ユーザーがゴールを効率よく達成できるデザインの実現、デザインにかかる時間と労力の削減が見込めるでしょう。しかし、パターンは当てはめればすぐに使えるわけではありません。それらのパターンがどのような問題に対して適用できるのか、どのようなコンテキスト/ドメインで利用可能かも含めてインプットする必要があります。
トレンドデザイン調査
実際にプロダクトを作り、ビジネスとして成功させるためには、狙っている市場でトレンドとなっているデザインについての知見を深めることも重要です。広く最新のサービスで流行しているデザインを知ることも重要ですし、戦略段階でのサービス/プロダクトリサーチ同様、競合サービスのトレンドデザインを分析することも不可欠だと言えるでしょう。
プロトタイピング
以上のデザイン原則や設計思想、トレンドを踏まえた上で、構造段階で可視化した情報アーキテクチャやインタラクションデザインをワイヤーフレームに落とし込んでいきます。
ここで重要となるポイントが、構造段階に引き続きモードレスな設計を心がけるということです。ナビゲーション、情報設計の両面から、ユーザーがオブジェクトを理解しやすい設計、すなわちメンタルモデルに近い設計となるよう試行錯誤します。またここでは、レスポンシブ設計や、オートレイアウトなどにも気をつける必要があります。
プロトタイピングについては、以下の記事も参考にしてみてください。
ユーザビリティテスト
プロトタイプが完成したら終わりではありません。ユーザーの実際の動きを確認して初めて、実際の使いやすさや使いにくさが明らかになることが多く、このプロセスは改善の大きな指標となります。したがって、実際にプロトタイプを触ってもらうユーザビリティテストを行うことはサービス/プロダクトの完成に向けて非常に重要です。
ユーザビリティテストの詳細については、こちらの記事もご覧ください。
まとめ
今回はUXの5段階モデルにおける骨格段階での目的や、具体的なデザイン手法などについてご紹介しました。
骨格段階はUXの5段階モデルにおいて、サービス/プロダクトの枠組みを完成させる段階です。ここで初めてユーザーの目に触れる部分の完成形が見え、ユーザビリティテストが可能となり、様々な仮説を検証できるようになります。このため、プロトタイプを素早く作り、仮説検証を何度も行ってサービス/プロダクトを改善することが重要です。また、骨格段階でインターフェイスの骨格の仮説検証に注力し、ビジュアルデザインはその後の表層段階で行うようにすることで、手戻りのコストを削減し、仮説検証を素早く回すことができます。そうすることで、「プラットフォームに最適なレイアウトを作り、インタラクションを検証する」ことが可能となるのではないでしょうか。
Goodpatchではデザインパートナーとして、戦略段階から表層段階まで、新規事業の立ち上げや既存サービスのリニューアルに際して並走します。骨格段階においても、ユーザビリティテストやプロトタイピングなどの手法で、新規事業や既存事業のリニューアルなどのビジネス課題を解決します。より良いユーザー体験とビジネスの両立を実現されたい方は、ぜひこちらからお問い合わせください。
実際に担当した事例については、こちらをご覧ください。
参考
Jasse James Garrett 『ウェブ戦略としての「ユーザーエクスペリエンス」』
Jenifer Tidwell 『デザイニング・インターフェース』
