第11回：使いやすいUIUXデザインの作り方
こんにちは。UIUXデザイナーの丸山です。
フロントエンドエンジニアからキャリアをスタートしまして、使いやすいUIデザインの設計とその実装を中心に担当していましたが、使いやすさを探求する中で利用するユーザー自身のことや、利用されているシーンを理解することが重要だ！という順番で、UXデザインの領域に拡張してきました。
そういった背景の下、さまざまな業種のB2B・B2Cのアプリケーションを中心にUIUXデザインに取り組んできた経験値から「使いやすいUIUXデザインの作り方」を自分なりに考えてみました。
使いやすいUIUXのデザインとは
ここでいうアプリケーションとはWebアプリ（例えばWeb申込フォーム・Webシミュレーションなど）を含むスマートフォンアプリ・デスクトップアプリなど全般を指します。
これらアプリケーションは利用ユーザーの目的達成のための“道具”としてよく例えられますが、その“道具”を使ってスムーズに目的達成できる＝使いやすいUIデザインと言えるかと思います。
ではユーザーは何をもってアプリ利用時にスムーズさを感じるのでしょうか？
私は大きく2つのポイントがあると考えています。
対象ユーザーの目的に合った機能が利用できる事
対象ユーザーがその機能の利用につまずかない事
その１：対象ユーザーの目的に合った機能が利用できる事
まず1つ目については、ユーザーは何かしらの達成したい目的があってアプリケーションを利用しようとするのに、その目的に合った機能価値を提供できなければ、継続利用されません。
また、いきなり機能一覧を作成して開発を始めると、よくある機能や「きっとあった方が良い機能」で盛りだくさんになり、長い時間とコストをかけたのに使われないアプリケーションになってしまいます。
それらを防ぐためには、まずどういった目的を持ったユーザーたちがいるのか、実在するユーザーからヒアリングして整理して、選定した対象ユーザーの目的を深堀して理解と共感することが重要となります。
その理解と共感の下、対象ユーザーの目的にマッチした機能価値はなにかを探ることで、少なくとも実在するユーザーの目的達成のための機能とデザインを提供できるのではないか、と考えています。
その２：対象ユーザーがその機能の利用に躓かない事
次に2つ目については、対象ユーザーの目的達成にマッチした機能群を実装するにしても、ユーザーが見つけられなかったり、その操作が難解だったり、時間がかかったりすると、ゴールまでたどり着けず離脱してしまいます。
それらを防ぐには、導出した機能価値をどのような順番で体験するとスムーズな体験となるのか整理するユーザーシナリオの検討と、そのシナリオの流れを実現するためのわかりやすい・操作しやすい画面構成・レイアウトなどのUI設計が重要になります。
これら2つの要素が上手くつながり・実施されることで、スムーズな対象ユーザーの目的達成を実現できる、UIUXデザインを提供できると考えています。
UIUXデザインの作り方
それでは、より詳しくUIUXデザインの流れについて説明していきたいと思います。
基本的には人間中心設計の考え方に沿って、大きく4つのステップを踏むプロセスを推奨しています。
ユーザーの利用状況を調査
ユーザーが求める理想体験を分析
理想体験を実現するUI設計
設計UIの使い勝手をユーザーが評価
前段で重要となると記載した2つの要素は、1つ目がステップ1・2、2つ目については主にステップ３・４に該当する工程で実現していきます。
ステップ１：ユーザーの利用状況を調査
UIUXデザインは対象ユーザーのためのデザインなので、対象ユーザー以外のプロジェクトメンバーだけで「きっとこうだろう」と想像したままにするのは危険です。
サービス提供者が対象ユーザーの立場で考えだすと、どれだけ気を付けていてもプロジェクトメンバーの主観になったり、都合の良いユーザー像になったりしがちだからです。
少ない人数でも実在するユーザーや近しい人に協力してもらい、インタビューやアンケートなどで実際にあった困りごとやイベント・感情などを収集することで、対象となるユーザー像の仮説をモデリングしていきます。
このモデリングしたユーザー像をプロジェクトメンバー内での共通認識として、以降のステップでも誰のためのUIUXデザインかを意識できるようにします。
＜ステップ1：主な調査手法＞
インタビュー：
3～5人を対象とした簡易なチャットインタビューや、1人あたり深堀するデプスインタビューや、グループインタビューなど。アンケート：
選択式など回答しやすい内容に限られるが、3〜5人以上の多くの回答人数が必要となる際に活用。ユーザーモデリング：
リサーチ結果から導出した対象ユーザー像の背景や課題・価値観を肉付けして疑似的な人格として設定。
等々。
ステップ２：ユーザーが求める理想体験を分析
2つ目のステップでは、モデリングした対象ユーザーの目的をより深く分析して、そのユーザーの目的にマッチした機能価値やその機能を構成するタスクを導出・整理します。
（例えば、「口座開設をオンラインで完結できる」という機能価値には、免許証の撮影や個人情報の入力などのユーザーのタスクが含まれる）
それらタスクがどんなシーンでどんな順番で実施できるとスムーズな体験となるのか、各タスクを実施する時にどんな情報表示や入力が必要になるのか、一連の利用体験の流れを時系列で整理するユーザーシナリオを作成して、対象ユーザーにとっての理想的な体験仮説を定義します。
大まかなアプリケーション利用の流れは企画検討時のカスタマージャーニーで整理されるかと思いますが、次の3ステップにつなげて使いやすいUIUXデザインを実現するためには、上記のより具体的なタスクと情報・機能の整理まで詳細化したユーザーシナリオが必要となってきます。
＜ステップ２：主な分析手法＞
エンパシーマップ：
ペルソナがどんなモノを見聞きしたり、感じていたりするのか6つの切り口で詳細化してユーザーの理解を深めるフレームワーク。バリュープロポジションキャンバス：
ペルソナのストレスを減らす・うれしい事を増やす機能価値のアイディエーション・機能整理するフレームワーク。ユーザーシナリオ：
対象ユーザーのタスクを時系列に並べて、その際にタスクで必要となる情報・機能群もマッピングして、目的達成までの操作の流れを整理。
等々。
ステップ３：理想体験を実現するUI設計
2つ目のステップで整理したユーザーシナリオに沿って操作していく中で、ユーザーはアプリケーションへの理解が進んでいき、「きっとこの情報があるなら、近くにこの情報があるはず」「このボタンを押したら、このアクションが実施されるハズ」といった、アプリケーションに対してユーザーがどう理解しているか、いわゆるメンタルモデルが構築されます。
このユーザーのメンタルモデルに対して、実際に実装された画面や処理が一致しないと、わかりにくさ・使いにくさを感じる要因になってしまいます。
なので、まずはユーザーシナリオの利用の流れから構築されるユーザー理解の情報モデル（情報のまとまりや関係性などを図にしたもの）を整理して、アプリケーション全体を俯瞰（ふかん）した情報構造の設計を行います。
その後、出来上がった情報設計とユーザーシナリオから、アプリケーションの主要なナビゲーションをはじめとした画面遷移と、各画面の情報配置のレイアウトまでをワイヤーフレームとして作成します。
そして、ワイヤーフレームとしておおよその画面構造・レイアウトがFIXできれば、よりユーザーが画面を理解しやすくするための色やフォントサイズやアイコンなどの、ビジュアル面のデザインを行ってUIデザインが出来上がります。
＜ステップ3：主な設計手法＞
情報設計：
対象ユーザーのアプリケーションの情報構造の理解（メンタルモデル）を図にしたもの。UI設計・ビジュアルデザイン：
情報設計をもとに、シナリオを実現する画面構成やレイアウトを検討して、最終的な画面デザインに落とし込む。プロトタイプ作成：
デザインデータで疑似的な画面遷移やステータス変化を表現して、ブラウザで簡単な操作感を確認できる紙芝居を作成。
等々。
ステップ４：設計UIの使い勝手をユーザーが評価
3つ目のステップで作成するUIデザインのプロトタイプを利用して、対象ユーザーや近しい人に協力してもらい使い勝手をテストして、設計や開発に入る前に大きな使い勝手の課題をつぶすことが出来ます。
評価タイミングはUI設計後だけでなくプロジェクトの最初にやる場合もあり、例えば既存アプリのUI改善点をまず知りたい場合は、ユーザビリティテストかヒューリスティック評価で課題導出するケースもあります。
＜ステップ４：主な評価手法＞
ユーザビリティテスト：
利用シーンをテスト用に設定して、協力者にその利用ユーザーになりきってもらい、プロトタイプを操作してもらいながらの発言や行動を観察して、UI改題を導出します。ヒューリスティック評価：
デザインの一般的ルールやデザイナーの経験値を基にチェックしてUI課題を導出します。
等々。
まとめ
本記事では、使いやすいUIUXデザインとは何かを定義し、それを実現するためのUIUXデザインの作り方をご紹介しました。
DNPコミュニケーションデザインでは、さまざまな業種のB2B・B2Cのアプリケーションを中心に、UIUXデザインの作り方を実践し、ご紹介した手法をメニューとしてご提供しています。
これらのUIUXデザインメニューは、対象ユーザーの選定や機能価値の整理など要求・要件に大きく関わるため、主に要件定義フェーズや、その前の要求整理フェーズから並走して実施します。
最後に、4つのステップで仮説・検証を繰り返して実施していくことが理想的ではありますが、案件の予算やスケジュールなど状況に応じて、可能な工程をピックアップしてUIUXデザインのプランをご提案しますので、お気軽にお問合せください。
お問い合わせはこちら（Contact | DNPコミュニケーションデザイン）よりお願いします。