ノンデザイナーでもできる。直感的で使いやすいUIの設計方法

本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。

DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増えています。
用意されたパーツの組み合わせで画面デザインが完成するサービスはとても便利ですが、そうしたサービスを使うだけで「使い易いアプリ」が実現するかといえば、それまた別の問題です。

デザイナーがアプリの画面をつくる場合は、ただきれいな画面を描くのではなく、要求（やりたいこと）から情報設計を行い、最適な画面を考えるというプロセスを経てデザインしていきます。
このプロセス自体は、デザイナーでなくても、また特別なツールを使わなくても、パワーポイントやオンラインホワイトボードを活用して実践することができます。

本セミナーでは、デザインやITの知識を持たない方でも情報設計から画面の作成（ワイヤーフレームの作成）まで、自ら考えて手を動かせるスキルを身につけていただけるよう、UIデザインの基礎知識からパワーポイント等で画面を描く実践的なテクニックまでご紹介します。

Transcript

1. ノンデザイナーでもできる。 直感的で使いやすい UIの設計方法 2024 / 6 / 24 NCDC株式会社 NCDC Online Seminar
2. 自己紹介 2 建設業向けアプリのUX/UIデザイン、業務システムのUI改善などのプロジェ クトのほか、NCDCのUXデザイン方法論の策定メンバーとしても活躍。複雑 な機能を持つ業務システムのUI設計では、業務フローの理解からユーザーヒ アリングまで多くの情報をインプットして分析を行うなど、ユーザーに寄 り添って考える情報設計を得意としている。 経歴 東京造形大学 絵画専攻卒業 東京デザインプレックス研究所 UI/UXコース修了 数年間にわたり現代アート事業や広告制作プロダクションに従事し、クリエイティブデ ザインやイラスト制作に携わる。 その後、関心を抱いたUX/UIデザインや人間中心設計（HCD）などを学び、 NCDCにUX/UI デザイナーとして入社。 UXデザイナー 伊藤 玄哉
3. NCDCのご紹介
4. Business 事業領域の推進 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation • コンサルティング • 新規サービス企画 • PoC⽀援 • デザイン思考 • UX/UIデザイン • モバイル・Web先端技術 • IoT / AI / AR • クラウドインテグレーション 4 NCDCのサービス体系
5. 本セミナーについて l 受講対象 l webサービスやソフトウェア、システム開発の企画や管理を行う方 l 意思決定やデザイナーに発注する前に、コンテンツを具体化したい方 l 概要 l UIデザインに関する以下の内容について解説します。 l UI、UIデザインとは？ l 使いやすいUIのための情報設計とWF l 既存プラットフォームのデザインパターン l その他UIデザイン品質を向上する手法 l 取り扱わない内容 l ビジュアルデザイン・グラフィックデザイン 5
6. UI、UIデザインとは？ ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
7. UIとは？ 7 UI（User Interface）とは？ User = 使用者・操作者 Inerface = 接面・界面 / 使用する人「と」何らかの仕組みとの接面 /
8. UIの種類 8 User 物理UI / CUI / GUI / System System System
9. UIの種類 9 User 物理UI / CUI / GUI / System System System 本日のテーマ
10. 開発された システム UIデザインとは 12 UIデザインとは、定義された要求或いは要件を、ユーザーに とって分かり易い導線構造、画⾯設計に書き起こす⼯程 / GUI 要件 要求 System • ユーザーの位置から nKm半径の飲食店を 検索できる • 検索した飲食店の料 理を注文できる • 注文を飲食店に通知 できる • 作られた料理を届け る住所をドライバー に表示できる • 調理せず簡単に 美味しい食事を 摂りたい UIデザイン
11. WFとVD 13 UIデザインは、⽬的別にWF（ワイヤーフレーム）と VD（ビジュアルデザイン）の⼯程に分けられます WF • 目的 • UI全体の構成を早期に 確認して、要件の網羅 性や導線構造、レイア ウトの実現性を検討す るための設計手法 • 方法 • PowerPoint、Excel、 drawIOやその他デザイ ンツールで描画 VD • 目的 • 実装するUIの最終的な 見た目を決定する • サービス・コーポレー トのブランディングを 正しく表現する • 方法 • デザインツールで描画 本日の解説範囲
12. 開発された システム UIデザインとは 14 NCDCでは、以下のイメージで プロジェクトを実施しています。 / GUI 要件 要求 System • ユーザーの位置からnKm半径の飲食店を検索 できる • 検索した飲食店の料理を注文できる • 注文を飲食店に通知できる • 作られた料理を届ける住所をドライバーに表 示できる • 調理せず簡単に 美味しい食事を 摂りたい UIデザイン
13. 使いやすいUIのための情報設計とWF ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
14. 正しいUIとは 16 使いやすいUIとはどんなUIだと思いますか？ / ？
15. 正しいUIとは 17 使いやすいUIとは 使用する人がイメージする通りのUIです / /
16. 正しいUIとは 18 使⽤する⼈がイメージする通りのUIをデザインするための⼿ 法はいくつかあります。今回はデザイナーでなくても簡単に できるオブジェクト指向UIのデザイン⼿法をご紹介します / /
17. オブジェクト指向UIデザインとは 19 オブジェクト指向UIデザインは、要件における名詞的概念を オブジェクトとして抽出して、それを画⾯としてデザイン する⼿法です。 料理:deal • 料理名:Name • 価格:Price • 説明:Detail • お店:Store 要件 • ユーザーの位置からnKm半 径の飲食店を検索できる • 検索した飲食店の料理を注 文できる • 注文を飲食店に通知できる • 作られた料理を届ける住所 をドライバーに表示できる Object ラーメン ＄9.99 魚介ダシの 効いた一品 です！
18. オブジェクト指向ではないUI 20 オブジェクト指向UIと対照的なUIとしてタスク指向UIがあり ます。タスク指向の代表例としては⾃動販売機が挙げられま す。 ユーザーはお金 を入れる ユーザーは飲み 物を選ぶ ユーザーは飲み 物を受け取る 「飲み物を購入 する」という意 思決定タスクが 先行している 本来であれば、 買い物体験とし ては先に好きな 数・種類の飲み 物を選べること が好ましい
19. オブジェクト指向が優れる理由 21 オブジェクト指向UIが使⽤する⼈のイメージ通りのUIになる 理由として、現実世界におけるヒト・モノ・コト（⾏為）の 関係をそのまま再現している点が挙げられます。 取る 置く 食べる 取る 置く 食べる
20. オブジェクト指向UIの作り方 22 要件の概念・⾔葉から、名詞（主語・⽬的語）と動詞を抽出 します。動詞は、関係する主語・⽬的語との関連をわかるよ うにします。 要件 • ユーザーの位置からnKm半 径の飲食店を検索できる • 検索した飲食店の料理を注 文できる • 注文を飲食店に通知できる • 作られた料理を届ける住所 をドライバーに表示できる ユーザー 位置 飲食店 料理 注文 ドライバー 検索できる 注文できる 通知できる 表示できる 住所
21. オブジェクト指向UIの作り方 23 抽出した⾔葉を、現実世界において⾃然な考え⽅になるよう な属性にグルーピングします。これがオブジェクトとなり、 グループを代表する概念が画⾯の単位となります。 ユーザー 位置 飲食店 料理 注文 ドライバー 検索できる 注文できる 通知できる 表示できる 住所
22. オブジェクト指向UIの作り方 24 より現実的な要件で再現すると以下のようになります。 ユーザー 位置 飲食店 料理 注文 ドライバー 検索できる 注文できる 通知できる 表示できる 住所 氏名 注文履歴 登録できる 決済情報 店名 営業時間 価格 住所 料理名 注文番号 料理 飲食店 合計金額 注文日時 到着予定時間 氏名 位置
23. オブジェクト指向UIの作り方 25 画⾯単位のオブジェクトの流れを作り、画⾯遷移図を 作ります。 ユーザー 飲食店 料理 注文 ドライバー 注文
24. オブジェクト指向UIの作り方 26 画⾯遷移を満たす導線のメニュー（ナビゲーション）を置き ます。 飲食店 飲食店 ユーザー ドライバー
25. オブジェクト指向UIの作り方 27 オブジェクトの内容を⼀覧→詳細の流れで配置します。 基本的にはこれだけの作業で使いやすいUIをデザインすることができます。 飲食店 飲食店 ユーザー ドライバー ジャンル ▼ 🔎 フリーワード 飲食店 料理 検索できる 注文できる 店名 営業時間 価格 住所 料理名 ABCハンバーガー AM10:00~PM17:00 東京都丸の内… DEFタコス AM10:00~PM17:00 東京都丸の内… ← ABCハンバーガー ハンバーガーセット ¥ 1,000 AM10:00~PM17:00 東京都丸の内1-1-1 チーズバーガー セット ¥ 1,200 ダブルチーズ バーガーセット ¥ 1,200 カートを見る
26. 実際の業務としてのUIデザインについて l 直感的で使いやすいUIのWFは、前ページまでの内容で設計することができます。 しかし、実際のサービスをデザインする際には下記のような事柄についても配慮 してデザインしなければなりません。 l ビジネスとしての目的 l 開発技術の制約 l ユーザーについての様々な文脈 l 身体的特性（年齢、視力、聴力 etc…） l 環境的特性 l 文化的特性 l 対象業務・体験について l フロー/ジャーニー l 権限 28
27. 既存プラットフォームのデザインパターン ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
28. UIとデザインパターン 30 UIのデザイン・開発では既存のプラットフォームが⽤意する コンポーネントパーツを利⽤するのがトレンドです。 GoogleのMUI（MaterialUI） AppleのHIG（HumanInterfaceGuideline）
29. 基本となるUIのパターン 31 UIの最も基本となるパターンは⼀覧→詳細です
30. 基本となるUIのパターン 32 ⼀覧のパターンは以下のようなパーツがあります リスト カード テーブル 単一項目複数行 内容訴求 複数項目複数行
31. 基本となるUIのパターン 33 ⼀覧→詳細は基本的に階層構造として成⽴します。 前の画⾯の詳細＝現在の画⾯が次の画⾯の⼀覧、次の画⾯の 詳細は次の次の画⾯の⼀覧…
32. 基本となるUIのパターン 34 ⼀覧→詳細はユーザーのイメージ通りのUIをデザインする上 で強⼒なデザインパターンですが、情報を分割/階層化するこ とでユーザーが現在地と導線を認知できなくなることがあり ます。それを補うのがナビゲーションです スマホ向け デスクトップ向け
33. 基本となるUIのパターン 35 オブジェクト指向UI、⼀覧→詳細、ナビゲーションを マスターしてサービスのWFを作成してみてください。 意思決定者・デザイナーとのコミュニケーションコストが 格段に削減できます 最初に見せたWFは Instagramでした
34. その他UIデザイン品質を向上する手法 ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
35. ユーザーテスト（1/2） 37 l サービス/システムのプロトタイプをユーザーに操作体験してもらう様子を観察 して得られた様子や、発話の内容などの質的情報を分析して設計の問題点を 見つけ出すリサーチ手法です。 l 大きなメリットとしては以下が挙げられます。 l サービス/システムの操作性に問題がある場合リリース前に発見できる。 l サービス/システムがユーザーのニーズを満たしているかどうかについてフィード バックが得られる。 l デメリットとしては、単純に人的・時間的コストがかかる点と、計画実施に あたり、適切なスキルを持った人間が追加で必要になる点があります。 ユーザーテストのイメージ
36. ユーザーテスト（2/2） 38 l ユーザーテストの代表的な成果物としては以下があります。 l プロブレムマトリクス：被験者ごとに操作タスクの成否を一覧化したもの。問題箇所の 特定に用いる。 l 発話・事象一覧：被験者ごとに各操作タスクで得られた発話や動作などの質的情報を 列挙したもの。問題内容の分析に用いる。 l フィードバック一覧：サービス/システムについての被験者からのフィードバックを まとめたもの。SUS法を用いて定量化してもよい。 l ユーザーテストを5人に行うことで、対象となる設計についての問題点を8割発見 できるという研究結果があります。 プロブレムマトリクス ユーザーテストを行う人数と発見される問題数の関数曲線
37. l ユーザーテストを実施することができない場合、UX/UIの専門家による 要件・設計の評価を行うヒューリスティック評価で、リリース前の評価を 代替することができます。 l UXデザインの専門家が、優れたUXを実現するための経験則（ヒューリス ティック）に則って設計について質的分析を行い、改善するためのアイデ アを導出する手法です。 その他リサーチプロセス 39 制御と⾃由 現実世界の⼀致 状態の可視性 柔軟性と使⽤効率 代表的なヒューリスティック（経験則）
38. まとめ ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
39. まとめ l UIは定義された要求・要件に基づいてデザインします l 使いやすいUIとは、「使用する人のイメージ通りのUI」であり、それを デザインする基本的な方法はオブジェクト指向です l オブジェクト指向UIデザインは、定義した要求・要件の名詞的概念を 起点・中心とした以下の情報設計により行います l 名詞・動詞の抽出 l 名詞・動詞のグルーピング・階層化（オブジェクト化） l 画面遷移図 l オブジェクトのレイアウト l UIの基本パターンは「一覧→詳細」と「ナビゲーション」 41