2024年6月26日にオンラインセミナー『ノンデザイナーでもできる。直感的で使いやすいUIの設計方法』を開催いたしました。
この記事では当日用いた資料とともに、セミナーの内容をコラムとしてご覧いただけます。
本セミナーでは、デザインやITの知識を持たない方でも情報設計から画面の作成（ワイヤーフレームの作成）まで、自ら考えて手を動かせるスキルを身につけていただくことを目的としています。UIデザインの基礎知識からパワーポイント等で画面を描く実践的なテクニックまでご紹介しました。
目次
UIとは？
UIとはUser Interfaceの略称ですが、それぞれの語の持つ意味は以下の通りです。
つまり、UIとは「使用する人と何らかの仕組みとの接面」ということになります。
UIの種類
UIは、以下のように大きく3つに分類することができます。
- GUI（グラフィカルユーザーインターフェース）
スマートフォンやパソコンのディスプレイ上で見るもので、システムの内容をグラフィカルに映し出したもの。 - CUI（キャラクターユーザーインターフェース）
パソコンに入っているターミナル機能のようなもの。キャラクター＝文字をコマンドとして入力することで使用するため、言語が理解できていないと使用できない。 - 物理UI
機械についているボタン類や、家の電気のスイッチのように物理的な実体のあるもの。
UIデザインとは？
UIデザインを「画面を美しく見せるための工程」と考えてしまう方も多いかもしれませんが、その前の「定義された要求あるいは要件を、ユーザーにとって分かりやすい導線構造、画面設計に書き起こす工程」も重要なUIデザインの作業であると言えます。
下図は、よくあるシステム開発工程を簡単に示したものです。
図の右にある「要求」をシステムの機能としての「要件」にまとめ、どのようなUIで示すかを決めていく流れになっています。
まず「調理せず簡単に美味しい食事を摂りたい」という要求が定義されたとしましょう。
この要求を満たすためにシステムでどのような機能を提供すればよいかということを考え、要件を定義します。ここでは、「ユーザーの位置から半径ｎKmの飲食店を検索できる」「検索した飲食店の料理を注文できる」「作られた料理を届ける住所をドライバーに表示できる」などの要件を書き出しています。
この要件定義に続いて、UIデザインの工程があり、最後にUIデザインされたものをエンジニアが開発しシステムを構築していくことでアプリが完成します。このような一連の流れが、現在トレンドの開発工程になっています。
UIデザインの工程−WFとVD
UIデザインは、目的別にWF（ワイヤーフレーム）とVD（ビジュアルデザイン）の工程に分けることができます。
それぞれの目的と方法は、次の通りです。
WF（ワイヤーフレーム）の目的と方法
- 目的
UI全体の構成を早期に確認して、要件の網羅性や導線構造、レイアウトの実現性を検討すること - 方法
PowerPoint、Excel、drawIOやその他デザインツールで描画することで作成
VD（ビジュアルデザイン）の目的と方法
- 目的
実装するUIの最終的な見た目を決定することや、サービス・コーポレートのブランディングを正しく表現すること - 方法
デザインツールで描画することで作成
プロジェクトにおけるUIデザインの位置づけ
NCDCでは下図のようなイメージでプロジェクトを進行します。
先にご紹介したよくあるシステム開発工程とは異なり、要件の後にUIデザインが来るのではなく、要件定義とUIデザインを同時並行するかたちで進めています。
このため、NCDCでは主に、UIデザインをしながら要件を決定していくという進行方法を取っています。
使いやすいUIとは？
使いやすいUIとは、一言でいうと「使用する人がイメージする通りのUI」です。
駅や百貨店などのトイレにおける洗面台をイメージしてみてください。かつてはカランをひねらなければ水は出てきませんでしたが、現在多くのユーザーは蛇口に手をかざすと自動で水が出てくると思っています。この場合、蛇口に手をかざすと自動で水が出てくるのが「使用する人がイメージする通りのUI」と言えます。
UIはおしゃれで洗練されたものであるべき、というのはよくある誤解ですが、ここで示した例のように、お洒落で洗練されたUI＝使いやすいUIではないということです。
使いやすいUIをデザインするには？
使用する人がイメージする通りのUIをデザインするための手法はいくつかあります。
今回は、デザイナーでなくても簡単にできる「オブジェクト指向UI」のデザイン手法をご紹介します。
オブジェクト指向UIデザインとは？
オブジェクト指向UIデザインとは、要約すると「要件における名詞的概念をオブジェクトとして抽出して、それを画面としてデザインする手法」です。ユーザーのニーズという抽象的なものを段階的に具体化していくための、一種のフレームワークと理解するとよいでしょう。
引き続き、フードデリバリーアプリを例に見ていきましょう。
オブジェクト指向ではないUI＝タスク指向UIとは？
オブジェクト指向UIと対象的なUIとして、タスク指向UIがあります。
ここで少し、タスク指向UIの例を見てみましょう。
タスク指向UIの代表例としてよく挙げられるのが、自動販売機での買い物体験です。
自動販売機を利用する際、ユーザーはまずお金を入れ、次に飲み物を選び、最後に飲み物を受け取ります。本来であれば、お金を入れるより先に、購入したい本数や飲み物の種類を選べるのが、自然で好ましい買い物体験と言えるでしょう。これに対し、「飲み物を購入する」という意思決定タスクが先行しているのが、自動販売機における買い物体験＝タスク指向の買い物体験です。
なぜオブジェクト指向で作るのか
ではなぜ、オブジェクト指向UIデザインの手法で作ると、使用する人のイメージ通りのUIになると言われているのでしょうか。
その理由として、オブジェクト指向UIが現実世界におけるヒト・モノ・コト（行為）の関係をそのまま再現している点が挙げられます。
ここでは、フードデリバリーアプリに絡めて、ハンバーガーというオブジェクトを例に考えてみましょう。
一方で、図の上段ようにハンバーガーというオブジェクトが先行するUIは、ハンバーガーというオブジェクトに対して、様々なアクションを取ることができます。このため、より自然で、現実世界の関係性をUIに置き換えているような状態にあると言えます。
オブジェクト指向UIの作り方
ここからは、フードデリバリーアプリを例にオブジェクト指向UIの作り方を説明していきます。
まず、要件の概念・言葉から、名詞（主語・目的語）と動詞を抽出しますが、例えば主語がすべて「ユーザーは」から始まる要件の場合は、逐一主語は抽出しないというように、要件の記法により抽出する語は変わってきます。
動詞は、要件において関係のある主語・目的語との関連がわかるような形で取り出します。
下図の例では、要件の文に名詞は赤、動詞は青でハイライトしてからそれぞれを取り出し、動詞（青）と関連する名詞（赤）を紐づけています。
下図の例では、先ほど抽出した名詞と動詞をグルーピングしています。
ユーザーというグループの中には、ユーザーの住所や現在地を示す位置が含まれ、飲食店というグループの中に料理が含まれるといった形です。
「現実世界において自然な考え方になるようなグルーピング」と言っても、人によって解釈の分かれるところでもあります。そのため、議論しながら「自然な考え方」を目指していきます。
下図の例では、まず飲食店があり、次にその飲食店の料理があり、さらにその次にはいくつかの料理を束ねた注文があるという流れになっています。
最後に、ワイヤーフレームを作成していきます。ワイヤーフレーム作成の手順は以下の通りです。
- 画面遷移を満たす導線のメニュー＝ナビゲーション（メニュー、タブ、サイドバーなど）を置く
- 先ほどグルーピングしたオブジェクトの内容を、一覧から詳細へという流れで配置する
ここでは、「ABCハンバーガー」「DEFタコス」といった飲食店が一覧になっていて、「ABCハンバーガー」を選択すると、飲食店の詳細＝料理の一覧へと遷移するようになっています。更に料理の一覧から「ハンバーガーセット」を選択すると、料理の詳細へと遷移します。このように、一覧→詳細→一覧→詳細を繋げていくのが、UI、特にスマートフォンのアプリケーションの基本になります。
以上のように、基本的にはこれだけの作業で、使いやすいUIをデザインすることができます。
実務としてのUIデザイン
ワイヤーフレームを描くツールは、PowerPoint、Excel、drawIOやその他デザインツールなんでもかまいません（ツールの選択にあたり後工程との調整は必要です）。前項までの内容に基づいて作業を進めれば、ノンデザイナーでも、ある程度は直感的で使いやすいUIのワイヤーフレームを設計することが可能です。
しかし、実際の業務では、以下のような事柄にも配慮してデザインする必要があります。
- ビジネスとしての目的を明確にする
同じフードデリバリーアプリでも、一人から数人の家族が利用するコンシューマー向けのものと、業者が利用する仕出しのようなものとでは求められるUIデザインが変わってきます。このように、求められるUIデザインはビジネスの目的に依存します。 - 開発技術の制約
開発言語を自由に選べる場合もあれば、クライアントが元々持っている基幹システムとの兼ね合いで自由に選べない場合もあります。 - ユーザーについての様々な文脈
使いやすいUIデザイン＝ユーザーがイメージする通りのUIデザインなので、ターゲット層を想定することも重要になってきます。
−身体的特徴（年齢、視力、聴力 など）
−環境的特徴
−文化的特徴 - 対象業務・体験について
カスタマージャーニーによっては画面の順番や要件自体が変わって来ることがあるため、ユーザーの業務内容や日常における体験、ユーザーの持つ権限についても考慮する必要があります。
−業務フロー・カスタマージャーニー
−権限
カスタマージャーニーマップについては、以前のセミナーで詳しく解説しているので別の記事「実践で違いを生むUX知識『カスタマージャーニーマップの本質とは？』」をご参照ください。
UIとデザインパターン
最近は、システム開発でよく使われるUIのコンポーネントが数多くライブラリ化されて公開されているので、そうしたものを利用して開発の効率化を図るのがトレンドになっています。
基本となるUIのパターン
繰り返しになりますが、UIの最も基本となるパターンは「一覧→詳細」です。
下図はiPadのUIですが、最初に開いたホーム画面にアプリの一覧があり、その中の一つを選択すると当該アプリの詳細に飛ぶという構成になっています。
一覧のパターン
一覧のパターンには、以下のようなパーツが当てはまります。
−カード…内容を具体的に訴求する際に使用
−テーブル…複数の項目を複数行に渡って表示する際に使用
一覧→詳細は階層構造
一覧→詳細というパターンは、基本的に階層構造として成立します。
前の画面の詳細＝現在の画面＝次の画面の一覧になっていて、次の画面の詳細＝次の次の画面の一覧になっている、というような状態です。
一覧→詳細の問題点と解決策
一覧→詳細は、現実に即しているという点において、使いやすいUIをデザインする上で強力なデザインパターンであるといえます。しかし、GUIに置き換え、情報を分割・階層化することで、ユーザーが現在地と導線を認知できなくなってしまうことが起こり得ます。
それを補うものがナビゲーションです。ナビゲーションと、一覧→詳細というパターンを組み合わせて使いやすいUIデザインを目指しましょう。
UX/UI設計・改善のご相談はNCDCへ
ぜひオブジェクト指向UI、一覧→詳細、ナビゲーションの３つをマスターして、サービスのワイヤーフレームを作成してみてください。意思決定者やデザイナーとのコミュニケーションコストが格段に削減できるはずです。
NCDCでは、業務システムUX/UIデザインをはじめ、UI改善のコンサルティングや、UXデザインを実践しながら学べるUXデザインワークショップなど、関連する幅広いサービスを提供しています。
デザインを外注していて十分なリソースが確保できていないプロジェクトを抱えるお客様に、UX/UI設計ノウハウをお伝えして「デザインの内製化」を支援した実績もあります。
新規システム開発、既存システムのUI改善、またはUIデザインの基礎知識の習得など、UX/UIデザインに関するご相談がある方はぜひお問い合わせください。
