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