システム設計の流れを前提としたデザイナーにおける考え方のアプローチをご紹介です。

1. システム開発でデザイナーは何をすればいい？
株式会社 電通国際情報サービス
高見祐介
UX MILK All Night

2. 今宵お伝えしたいこと
2
00. はじめに
01. システム開発ノススメ
02. フェーズ別のアプローチ
03. 俺の屍を越えてゆけ
04. 負けたことがある
⛰ Hit the wall （言葉の壁）

3. 3
自己紹介
高見祐介 @aghome
電通国際情報サービス（ISID）
グループ経営コンサルティング4部 / エクスペリエンスデザイン部
デザイン制作
G/Wデザイナー
10年
ホスティング/サービス事業
Wディレクター、UIデザイナー
5年
システム開発/販売事業
UX/UIデザイナー
2年∼
人間中心設計スペシャリスト / さとなおラボ 3期生
トレラン / ソロキャン / 漫画

4. 4
ISIDについて

5. 5
ISIDについて

6. システム開発ノススメ
Introduction
不確実性とシステム思考

7. 7
システム開発の流れ
一般的に、「企画」「要件定義」「開発」「運用」「保守」 のプロセスに分けられる。
ソフトウェア開発の企画段階から利用終了まで
一連の工程全体のこと
z要件定義
基本設計
（外部設計）
詳細設計
（内部設計）
テスト
運用
保守
要求定義 実装

8. 8
要求/要件/設計/実装/テスト/運用・保守
z要件定義
基本設計
（外部設計）
詳細設計
（内部設計）
テスト
運用
保守
要求定義 実装
開発の核となる【要求/要件/設計】に着目

9. 9
要求なのか？要件なのか？設計なのか？
z要件定義
基本設計
（外部設計）
詳細設計
（内部設計）
テスト
運用
保守
要求定義 実装
こうしたい、こうありたいという希望が「要求」
、 感
⾒ 化 、AI ⾃動化 ？
仕事 。夢 ERP ！

10. 10
要求なのか？要件なのか？設計なのか？
z要件定義
基本設計
（外部設計）
詳細設計
（内部設計）
テスト
運用
保守
要求定義 実装
こうしたいを実現する条件が「要件」
中 機能⼊ 。
誰 何 管理 。
全部 解決 。 ？

11. 11
z要件定義
基本設計
（外部設計）
詳細設計
（内部設計）
テスト
運用
保守
要求定義 実装
、 種類 ？
任意 作 聞 ？
完了 ？誰 ？
要件を満たすための詳細な条件としての「仕様」
要求なのか？要件なのか？設計なのか？

12. 12
生まれる不確実性…
要求なのか？要件なのか？設計なのか？
機能要求
非機能要求
カン
経験則
夢のドリーム

13. 13
物事を全体的&体系的にとらえ、多くの視点
から構造化し可視化する
感性的なアプローチで観察、発想、試作を
何度も繰り返し共創する
不確実性を下げるための2つの思考
共感
問題定義
創造
プロト
タイプ
テスト
多視点 構造化 可視化
全体俯瞰
行動
パターン
システム思考 × デザイン思考
デザイン思考システム思考

14. 14
意外と相性いいかもしれない
インサイトから問題点・課題をあぶり
出しミクロ視点から素早く解決案を提
案し続け最適解を定義する
デザイン思考
実現可能な仕組みを前提に、表層に現
れない構造とパターンをマクロ視点か
ら仮説として定義する
システム思考
システム思考 × デザイン思考
部分・具体化志向全体・抽象化志向

15. 15
全体を把握しならパターンを洗い出す
更に課題となるポイントを徹底的に検証する
不確実性をゼロに近づけたい

16. フェーズ別のアプローチ
Case
デザイナータカミマンの場合

17. 17
要求定義フェーズ
体験価値設計
1. 調査・分析
• 価値マップ
• KJ法
• 共感マップ
2. ユーザーモデリング
• ペルソナ
• ジャーニーマップ【AS-IS】
3. コンセプトメイキング
• バリュー/アクティビティシナリオ
• UXDコンセプトシート
• ジャーニーマップ【TO-BE】
4. プロトタイピング
• ペーパープロト
• プロトタイプ
みんなで価値想像しましょう！
共通認識を作り、仮想のユー
ザーになって理想の業務シーン
を描きだします。
企画の背景が知りたい！
どんな人が使うの？
どんな課題があるの？
共感実施項目

18. 18
要件定義フェーズ
UI標準設計
• 稼働対象とするOSやブラウザ
• 解像度
• レスポンシブルデザインの適用
• 画面様式
• 画面レイアウト
• デバイスごとの画面幅
• 処理内容に応じた画面形式
• ボタンコントロールの配置
• エラー、確認メッセージの方針
• 画面名称、ID名
• 表示項目の統一
• ヘルプ形式
• プレースホルダーの表示
• キーボード操作
• 辞書
問題定義
UXMILK
Dashboard
Buttons
Gallery
Title
提供したい価値を叶える機能を
考えます。機能に必要なUIと様
式をルール化していきます。
表示する情報はこれ！
この画面で何ができること、
ページ遷移はこんな感じ！
実施項目

19. 19
設計フェーズ
ユーザビリティ設計
エンタープライズ系システムのユーザビリティ
• データのやりとりが円滑であること
• シンプルに業務が遂行できること
• マニュアルを沿って業務を遂行できること
• ユーザーが想定した動作が実行されること
• キーボード操作で完結できること
• 許容できる応答速度であること
設計からモックアップを作りま
す。実際に操作して使い勝手を
対象ユーザーに検証してもらい
ましょう！
創造
プロト
タイプ
テスト
通常業務が問題なく行える？
想像どうりの挙動？
慣れと違和感の塩梅は？
体感速度はあがった？
aghomeUXMILK
!
Dashboard
Widgets
UIElements
Base
Advance
Icons
Buttons
Gallery
Forms
Tables
実施項目

20. 20
実施したアクションの合意形成
1. 画面イメージを検討し、該当業務プロセスで必要とされる機能を洗い出そう
2. 早い段階からUI画面のレイアウトと仕様項目のイメージをつかもう
3. 画面遷移と発生イベントを優先的に確認しよう
aghomeUXMILK
!
Dashboard
Widgets
UIElements
Base
Advance
Icons
Buttons
Gallery
Forms
Tables
Cards
status
34,152 5,643 47,842 +12.58%
0
25
50
75
100
4月 5月 6月 7月 8月 9月 10月
TOTAL PROFIT ACTIVITY
New Sale
It's unfortunate weather
today.
Message
It's unfortunate weather
today.
New Report
It's unfortunate weather
Users Transaction
UXMILK
!
Dashboard
Widgets
UIElements
Base
Advance
Icons
Buttons
Gallery
Forms
Tables
Cards
status
34,152 5,643 47,8
0
25
50
75
100
4月 5月 6月 7月 8月 9月 10
TOTAL PROFIT
Users Transaction
Cancel No
←Back
There is an error in the input information
aghome
承認修正編集破棄

21. 俺の屍を越えてゆけ
Failure
もうUXなんてしないなんて言わないよ絶対

22. やらかした2020
22
すでにコンセプトメイキングされて
いたため要求定義として蓄積された
情報をおろそかにした

23. やらかした2020
23
専門用語を理解できないまま
体験設計を続けた

24. やらかした2020
24
ペルソナが一時的な扱いとなり、
継続的な対象者視点としてアップ
デートしなかった

25. やらかした2020
25
既存コンポーネントの影響範囲が
曖昧なままデザイナー視点優先で
モックアップ制作を実施した

26. やらかした2020
26
ユーザビリティテストの結果におい
て、本質的な問題点を言語化できず
結局有識者の判断にのっかった

27. 負けたことがある
Summary
それがいつか大きな財産になる

28. 28
DNFを続けたからわかってきたこと
ビジネスサイドのコンセプトを咀嚼し、仕様へ落とし込むための言語化を行う
客観的な視点を持ち、リアリティある利用シーンをシナリオに落とし込む
言語化
01

29. 29
共創
画面設計書に違和感がないか
ページ全体に共通したモックアップを設計者と作る
02
DNFを続けたからわかってきたこと

30. 30
合意形成
ユーザビリティテストの観察結果や発言を丁寧に解釈し、何が課題か徹底議論する
課題の対処法をUIで表現・共有し、実装チームの合点を得る
03
DNFを続けたからわかってきたこと

31. 31
アジャイルソフトウェア開発宣言
個人と対話
包括的 動くソフトウェア
契約交渉 顧客との協調
計画 従 変化への対応
引用元：https://agilemanifesto.org/

32. 32
システム開発との向き合い方
デザイナーだからこそ
要求・要件定義フェーズから参画し
価値を言語化・視覚化させ
開発における不確実性と戦おう

33. 33
参考文献

34. 粒度
Hit the wall 01
（りゅうど）
⼀

35. 【粒度】
処理の細分化の単位。
テーブルや表などのデータセットにおいて、データの細かさを表す指標。
例）会員マスタは、会員IDひとつにつき、データが1件格納されている
「オブジェクトの粒度的にはこれくらいがいいんじゃね？」
Hit the wall 01
⼀
出所：gixo

36. トランザクション
（とらんざくしょん）
Hit the wall 02
⼆

37. 【トランザクションデータ】
企業の情報システムなどが扱うデータの種類の⼀つで、業務に伴って発⽣
した出来事の詳細を記録したデータのこと
例）原料などの購買、製品の⽣産、社員への給与の⽀払い、経費の精算
対義語：マスタデータ
Hit the wall 02
⼆
出所：IT⽤語辞典

38. 帳票
（ちょうひょう）
Hit the wall 03
三

39. 【帳票】
帳簿や伝票、申込書など、業務や取引に必要な情報の記⼊や印刷のために
⽤いられる定型的な書類の総称。画⾯ではない。
例）レポート（報告書・分析資料・同意書・問診票）
帳簿類（出納帳・仕訳帳・売上帳・各種台帳・財務諸表）
伝票類（⾒積書・発注書・注⽂書・請求書・領収書・納品書・明細書・通知書）
Hit the wall 03
三
出所：e- Words

40. Font：游ゴシック体, 游教科書体, Avenir Next, Flood Std
Photo：Designed by wirestock / Freepik
終
制作・著作
🍺 Thanks cheers!