アストロラボ（株）が実施する企業向けUI研修のスライドです。 業務システム構築に関わる、企画者やエンジニア、プロジェクトマネージャーなどのノンデザイナーを対象に、UIおよびUXへの理解を深めてもらうことを目的とした内容となっています。

1. UI研修
©Astrolab Inc.
1

2. ©Astrolab Inc. 2
目次
イントロダクション
UX、UIとデザイン
UX
広義のUI
画面のUI
UIデザイン原則
UIデザインパターン
• 適切なパターンを選ぶ
• 考えてみよう
業務システムでのUI
AstroBlaster UI Design System
• 利用例
おわりに
参考図書

3. ©Astrolab Inc. 3
講師紹介

4. ©Astrolab Inc. 4
UIデザイナー
アストロラボ（株）CDO（Chief Design Officer）
美術分野での専門的なバックグラウンドと、Web黎明期から18年以上一貫してWebユーザーインターフェースに携わっ
てきた経験を通して、日々UIのことばかり考えている。
2001年、オン・ザ・エッヂ（現LINE）入社。デザイナー／アートディレクターとして多くのBtoB・BtoCのWebサイトおよび
Webアプリ構築においてデザイン、アートディレクションを担当。
大手電機メーカーのSP広告を企画製作する会社でのWebカタログやAdコンテンツ制作事業を経験したのち、2012年よ
りアストロラボ（株）にてAstro BlasterシリーズのUI設計・デザイン、各種業務システムのUIデザインを手がけている。
久保 シンスケ

5. ©Astrolab Inc. 5
UX、UIとデザイン

6. ©Astrolab Inc. 6
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
キーワード検索数の推移
User Experience (UX) User Interface (UI)
UX、UIの認知度の高まり
iPhone登場

7. ©Astrolab Inc. 7
デザインとは?
design
de‧sign1 /dɪˈzaɪn/
1. PROCESS OF PLANNING : the art or process of making a drawing
of something to show how you will make it or what it will look like
2. ARRANGEMENT OF PARTS : the way that something has been
planned and made, including its appearance, how it works etc
3. PATTERN : a pattern for decorating something
4. DRAWING : a drawing that shows how something will be made or
what it will look like design for
5. INTENTION : a plan that someone has in their mind
ロングマン現代英英辞典より

8. ©Astrolab Inc. 8
かつて“デザイン”が指してきたもの
設計
としての
デザイン
機能が目的に沿ったものであると
直感的にわかるように
形や機構を整える
装飾・識別
の
デザイン
他との差別化のために
コミュニケーション方法や表層を
整える

9. ©Astrolab Inc. 9
デザインの階層

10. ©Astrolab Inc. 10
UX概論

11. ©Astrolab Inc. 11
UXによる差別化
〇〇機能
搭載
12色カラー
バリエーション
限定◇ ◇
付属
最新△ △
技術採用
〇〇が“付いている”
従来
新しい体験 機能追加

12. ©Astrolab Inc. 12
UXによる差別化
いま
新しい体験 体験の強化
面倒な〇〇は不要に
△ △からでも同じように使える
ワクワクする
習慣化する
いままでにない
新しいことができる

13. ©Astrolab Inc. 13
タイムスパンをもつUX
利用前 利用中 利用後 利用期間全体
予期的UX 一時的UX エピソード的UX 累積的UX
UI
体験の想像 体験する 体験の振返り 様々な体験の回想

14. ©Astrolab Inc. 14
UXへの道のり
心理学
民俗学
社会学
統計学
産業
工業デザイン
ソフトウェア
インターネット
マーケティング
UX
として
統合
1970年代 1980年代 1990年代 2000年代
認知心理学の発展による
人間の認知機能への理解
個人の生活・行動の
観察とモデル化
集団行動の分析とモデル化
行動データの定量分析
大規模システムの登場
人間工学の成立と発展
オブジェクト指向、GUIの発展
情報デザイン、ユーザビリティ、
アクセシビリティ
製品紹介からストーリー戦略へ

15. ©Astrolab Inc. 15
コミュニケーション
デザイン
UXの中のUI
UX
情報アーキテクチャ ユーザビリティ
アクセシビリティ
利用品質
感性品質
シナリオ
ペルソナ
マーケティング
UI
操作・表示など
ユーザーと直接
触れる部分
コンピューター工学
ライティング
人間工学

16. 16

17. 17

18. ©Astrolab Inc. 18
広義のUI

19. ©Astrolab Inc. 19
UI = User Interface
操作の対象
Interface
II
境界・接面
User
II
利用者

20. ©Astrolab Inc. 20
UI = 道具との接点

21. ©Astrolab Inc. 21
UIが信頼される条件
『Trust, control strategies and allocation of function in human systems』より
Lee&Morayによる信頼の4つの次元
1. 基礎： 自然界を支配する法則や社会の秩序に合致している
2. 能力： 終始一貫して安定的かつ望ましい行動や性能が期待できる
3. 方法： 行動を実現するための方法、アルゴリズム、ルールが理解できる
4. 目的： 上記の背後にある意図、動機が納得できる

22. ©Astrolab Inc. 22
装置とUI
一部出典：PC Watch

23. ©Astrolab Inc. 23
画面のUI

24. ©Astrolab Inc. 24
CUI（Character User Interface）
利点
入力と出力の対応が簡潔
複雑な処理も自動化しやすい
ハードウェアの性能をそれほど求めない
欠点
操作対象・操作方法が直感的でない
コマンド、引数を知らないと操作できない
操作の結果が確認しづらい

25. ©Astrolab Inc. 25
GUI（Graphical User Interface）
利点
操作対象を直感的に把握できる
少ない学習で簡単に操作できる
操作の結果を直接確認することができる
システムで起こっていることの理解がしやすい
欠点
情報の表現や操作手順が冗長になる
大量のデータを一括・連続で処理する場合に課題
ハードウェアの高い性能、多くのリソースを必要とする

26. ©Astrolab Inc. 26
システムの画面UIの変遷
一部出典：Wikipedia

27. ©Astrolab Inc. 27
画面UIの変化

28. ©Astrolab Inc. 28
画面UIの変化

29. ©Astrolab Inc. 29
画面UIの変化

30. ©Astrolab Inc. 30
画面UIの変化

31. ©Astrolab Inc. 31
画面UIの変化

32. ©Astrolab Inc. 32
出典：Electronic Visualization Laboratory、ロイター 、Apple 、Amazon、WAYRAY、Google Home
画面UIのこれから
さまざまなスクリーンを備えた機器
ディスプレイの
さらなる大型化・空間化
ARで現実にかぶせたUI
画面のないUI

33. ©Astrolab Inc. 33
UIデザイン原則

34. ©Astrolab Inc. 34
代表的なデザイン原則
8つの黄金律
Ben Shneiderman
1986年
対話型システムの
インタラクションに関する原則
ユーザー中心設計の7原則
Donald Norman
1988年
マンマシンインターフェース
全般に対する設計の原則
10のヒューリスティック調査
Jacob Nielsen
1994年
特定のシステムを対象とした
ユーザビリティ原則によらない
普遍的な経験則

35. ©Astrolab Inc. 35
1. 一貫性を保つように努める （Strive for consistency.）
2. ヘビーユーザーが操作をショートカットできる手段を用意しておく （Enable frequent users to use shortcuts. ）
3. 有用なフィードバックを提供する （Offer informative feedback.）
4. 完了感を与えるために、対話をデザインする （Design dialog to yield closure.）
5. 簡単にエラーに対応できるしくみを提供する （Offer simple error handling.）
6. 簡単にやり直しできるようにする （Permit easy reversal of actions.）
7. 内部の動きが把握できるようにする （Support internal locus of control.）
8. 人間の短期記憶の負担を減らす （Reduce short-term memory load.）
Shneidermanの「8つの黄金律」
『ユーザーインタフェースの設計 やさしい対話型システムへの指針』より

36. ©Astrolab Inc. 36
1. 外界にある知識と頭の中にある知識の両者を利用する （Use knowledge in the real world and in the head）
2. 作業の構造を単純化する （Simplify the structure of tasks）
3. 対象を目に見えるようにして、どのようにタスクが実行され、どのような結果になるのかを評価できるようにする
（Make things visible）
4. 対応づけを正しくする （Get the mappings right）
5. 自然の制約や人工的な制約などの制約の力を活用する （Exploit the power of constraints）
6. エラーに備えたデザインをする （Design for error）
7. 以上のすべてがうまくいかないときには標準化をする （When all else fails, standardize）
Normanの「ユーザー中心設計の7原則」
『誰のためのデザイン？―認知科学者のデザイン原論』より

37. ©Astrolab Inc. 37
1. システム状態の視認性を高める （Visibility of system status）
2. 実環境に合ったシステムを構築する （Match between system and the real world）
3. ユーザーにコントロールの主導権と自由度を与える （User control and freedom）
4. 一貫性と標準化を保持する （Consistency and standards）
5. エラーの発生を事前に防止する （Error prevention）
6. 記憶しなくても、見ればわかるようなデザインを行う （Recognition rather than recall）
7. 柔軟性と効率性を持たせる （Flexibility and efficiency of use）
8. 最小限で美しいデザインを施す （Aesthetic and minimalist design）
9. ユーザーがエラーを認識、診断、回復することをサポートする （Help users recognize, diagnose, and recover
from errors）
10. ヘルプとマニュアルを用意する （Help and documentation）
Nielsenの「10のヒューリスティック評価」
『10 Heuristics for User Interface Design: Article by Jakob Nielsen』より

38. ©Astrolab Inc. 38
1. シンプルに
2. 移動距離は常に短く
3. 記憶に頼らない
4. 寛容性を持つ
アストロラボのUIデザイン原則
5. 適切なフィードバック
6. 一貫性を保つ
7. よい見た目にする
8. 実際のコンテンツを使う

39. ©Astrolab Inc. 39
シンプルに UIデザイン原則
KISSの法則
Keep It Simple, Stupid!

40. ©Astrolab Inc. 40
移動距離は常に短く UIデザイン原則
メールアドレス
quickstart@astrolab.co.jp
利用開始
ご連絡先情報などは初回購入時に入力ください

41. ©Astrolab Inc. 41
記憶に頼らない UIデザイン原則
店舗
大
大手町店
大手町シティスクウェア店
大手町タワーパーク店
大手町パークスクウェア東店
大庭店

42. ©Astrolab Inc. 42
寛容性を持つ UIデザイン原則
03-1234-5678
電話
電話番号は半角・ハイフンなしで入力してください
東京都
住所
住所は全角で入力してください
千代田区2-6-2

43. ©Astrolab Inc. 43
適切なフィードバック UIデザイン原則
Pi

44. ©Astrolab Inc. 44
一貫性を保つ UIデザイン原則
申込
申し込む
+1.0 pt
前年差異
-1.0 pt
前年差異

45. ©Astrolab Inc. 45
よい見た目にする UIデザイン原則
肯定的感情は、創造的で広がり優先の思考を促進するのに対し
否定的感情は、深さ優先の思考過程を促進して
できるかぎり他に注意を向けさせず、認知に集中させる
肯定的感情によって、人々は些細な困難に対してより寛容になり
解決策を見つける上でより柔軟かつ創造的になる
ドナルド・ノーマン 『Emotion and Design: Attractive Things Work Better』 より

46. ©Astrolab Inc. 46
デザインには実際のコンテンツを使う UIデザイン原則
あああああああああああああああああああああああああああ
テキストが入りますテキストが入りますテキストが入りますテ
キストが入りますテキストが入りますテキストが入りますテキ
ストが入りますテキストが入ります
名前がはいります
DUMMY

47. ©Astrolab Inc. 47
UIデザインパターン

48. ©Astrolab Inc. 48
情報アーキテクチャと構造
検索と一覧
タイムライン
シングルビュー
編集フォーム
カンバス
ダッシュボード
ウィザード

49. ©Astrolab Inc. 49
ドリルダウン
パジネーション
複合的インタラクション
ログインカレンダー
アップロード
モーダル
メッセージ
データテーブル

50. ©Astrolab Inc. 50
コントロールとパーツ
ドロップダウンテキストフィールド
チェックボックス、ラジオ、スイッチ
ボタン
スライダー
****
、
ツールチップ

51. ©Astrolab Inc. 51
適切なパターンを選ぶ

52. ©Astrolab Inc. 52
ラジオボタン スイッチ
単一チェックボックス ドロップダウン

53. ©Astrolab Inc. 53
期限切れも
表示
選択肢 1 選択肢 2
期限切れは
表示しない

54. ©Astrolab Inc. 54
ラジオボタン スイッチ
単一チェックボックス ドロップダウン
期限切れも表示
期限切れは表示しない
期限切れも表示 ON
期限切れも表示
期限切れも表示
期限切れも表示
期限切れは表示しない

55. ©Astrolab Inc. 55
ラジオボタン スイッチ
単一チェックボックス ドロップダウン
ラベル文言が長め・説明的で、
もう一方は明記が不要なもの
主従がなく概念的に等価
ラベルが両方ともいちどにみえている
ほうがいいもの
2つから選ぶときに
ドロップダウンが最適というケースは
あまりない
アクティブ／非アクティブの概念を持ち
繰り返し行き来ができる表裏一体のもの

56. ©Astrolab Inc. 56
かんがえてみよう

57. ©Astrolab Inc. 57
どちらがしっくりきますか?
キャンセル／実行ボタンの配置

58. ©Astrolab Inc. 58

59. ©Astrolab Inc. 59
どちらが操作しやすいでしょうか？
スクロールバーのアローの配置

60. ©Astrolab Inc. 60
伝わりますか？
システムからのメッセージ
致命的なエラー！
error-123456
ユーザIDの検証に失敗しました

61. ©Astrolab Inc. 61
業務システムでのUI

62. ©Astrolab Inc. 62
• 定型作業と役割
• ユーザーの専門性とレベル
• 対象環境の限定
• エラーに対する許容度
• 業務フローと帳票主義の伝統
• タスクベースとオブジェクトベース
• 使用頻度と反復、取り扱うデータの量
• 改修を重ねるオンプレ型システム
業務システムのUIの特徴

63. ©Astrolab Inc. 63
定型作業と役割 業務システムのUIの特徴
システム
ユーザー
システム
ユーザー

64. ©Astrolab Inc. 64
ユーザーの専門性とレベル 業務システムのUIの特徴
• 特定の業務知識・理解
• 専門性
• OJT・研修
ユーザー
システム

65. ©Astrolab Inc. 65
対象環境の限定 業務システムのUIの特徴

66. ©Astrolab Inc. 66
エラーに対する許容度 業務システムのUIの特徴
(c) ANDREW CABALLERO-REYNOLDS / AFP
スリーマイル島原子力発電所事故
• 起こっていることがブラックボックス化され、適切な表示がなかった
• 取り返しのつかない状態になってしまう操作ができてしまった
• システムからのフィードバックが無意味になってしまった

67. ©Astrolab Inc. 67
帳票主義と業務フロー 業務システムのUIの特徴

68. ©Astrolab Inc. 68
タスクベース
業務のタスクを手順に沿って
タスクベースとオブジェクトベース 業務システムのUIの特徴
オブジェクトベース
業務の対象となるオブジェクトを起点に

69. ©Astrolab Inc. 69
一覧 → 編集
使用頻度と反復、取り扱うデータの量 業務システムのUIの特徴
一括処理・直接編集

70. ©Astrolab Inc. 70
• 大規模で複雑なため、いちどに全てをリプレイスするのは難しい
• 費用が高額で開発期間も長くかかる
• ソフトウェア投資が会計上資産に計上される
複合的な理由から、既存システムとのインターフェースや
操作の整合性などの面でレガシーが継承されやすい
改修を重ねるオンプレ型システム 業務システムのUIの特徴

71. ©Astrolab Inc. 71
AstroBlaster UI Design System

72. ©Astrolab Inc. 72
AstroBlaster UI抜粋版
AstroBlaster UI Design System

73. ©Astrolab Inc. 73
統一してデザインされた豊富なUIパーツ
テキストフィールド
ドロップダウン スイッチ
チェックボックス ラジオボタン
テキストエリア
ツールチップ
スライダー
ボタン
プログレスバー
タブ
パジネーション
通知 ダイアログ
一部抜粋

74. ©Astrolab Inc. 74
業務システムに利用できる様々なUIパターン 一部抜粋

75. ©Astrolab Inc. 75
UIデザインのナレッジと
AstroBlaster UI活用のためのコンテンツ
使いやすいUIを作るための
デザイン原則や共通ルール
適切なUIを採用するための判
断基準として、よくあるUIのパ
ターンを目的／用途別に例示
コーディング時に役立つソース
コード、マークアップ方法の参
照用ドキュメント
GUIDELINE PATTERN COMPONENT

76. ©Astrolab Inc. 76
利用例

77. ©Astrolab Inc. 77
生鮮スーパー向け基幹システム&ダッシュボード 利用例
一回あたりの買い
上げ金額平均、最
高額、点数がわか
ることで買い上げ
傾向把握
ヘッダーやサイドバー、ナビゲーションバーの
レイアウトパターンも豊富に用意
切替や入力など
複雑なコントロールを
ともなう表組
データを視覚化
したチャート表示
グリッドシステムに
よる柔軟な
レイアウト

78. ©Astrolab Inc. 78
建設機械メーカー向け建機登録アプリ 利用例
メディアクエリを利用した仕組みでスマートフォンにもレスポンシブで対応
プリセットに加え
自由に変更可能な
カラースキーム
タッチ操作のモバイル
向けにも最適化された
UIパーツ
プリセットに加え
自由に変更可能な
カラースキーム

79. ©Astrolab Inc. 79
人事情報カルテ 利用例
UIでの利用に
最適化してデザイ
ンされたアイコン
ロジカルな裏付けと
ともに配置やスタイ
リングを統一した
ボタンほか様々なUI
パーツ
タブなど情報の切
替えや段階的表示
のパターン

80. ©Astrolab Inc. 80
旅行代理店向けツアープラン作成アプリ 利用例
時間や場所、各種条件
のあるものなど、適切な
支援がある入力
受付可能な値のみ自然に
入力されるよう適切な
制限を設けてエラーも
起こりにくく

81. ©Astrolab Inc. 81
いいデザインとは、
かたちではなく、時間。
だいじなのは、UIの造形（かたち）ではなく体験（時間）ではないでしょうか。
だめなUXは、ユーザーの貴重な人生の時間を無駄にする時間ドロボウでもあります。
単により短い時間で目的を達成できるだけではなく、
システムと接している間、ストレスなくこころよくいられること。
楽しく、使い続けたいと感じられる魅力があること。
画面の中だけの話でなく、
使う人とシステムの関係性から、デザインははじまっています。

82. ©Astrolab Inc. 82
参考図書

83. ©Astrolab Inc. 83
デザイニング・インターフェース
— パターンによる実践的インタ
ラクションデザイン
出版社：オライリージャパン
著者：Jenifer Tidwell
UIデザイン実践／事例
デザイニング・ウェブインター
フェース — リッチなウェブアプリ
ケーションを実現する原則とパ
ターン
出版社：オライリージャパン
著者： Bill Scott、Theresa Neil
インタフェースデザインの心理
学 ―ウェブやアプリに新たな視
点をもたらす100の指針
出版社：オライリージャパン
著者：Susan Weinschenk

84. ©Astrolab Inc. 84
誰のためのデザイン？ — 認知科
学者のデザイン原論
出版社：新曜社
著者： D.A. ノーマン
融けるデザイン — ハード×ソフト
×ネット時代の新たな設計論
出版社：ビー・エヌ・エヌ新社
著者：渡邊恵太
UIデザイン理論
学習まんが アフォーダンス
原作・監修：大林 寛
まんが：コルシカ

85. ©Astrolab Inc. 85
一人から始めるユーザーエクス
ペリエンス
出版社：丸善出版
著者：Leah Buley
UX
ユーザビリティエンジニアリング
(第2版)―ユーザエクスペリエン
スのための調査、設計、評価手法
出版社：オーム社
著者：樽本 徹也
行政におけるデザイン思考の推
進に向けた人材育成に関する調
査研究報告書
出版/編著：一般社団法人 行政情報
システム研究所
才能に頼らない文章術
出版社：ディスカヴァー・トゥエンティ
ワン
著者：上野郁江

86. ©Astrolab Inc. 86
! Apple Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/
! Google Material Design
https://material.io/design/
! Windows10 アプリ UXデザインガイド
https://msdn.microsoft.com/ja-jp/mt634411.aspx
IT各社が提供するUIガイドライン