【Schoo】企業をデザインシフトさせる方法と今後のデザイン戦略 https://schoo.jp/class/3241

1. 企業をデザインシフトさせる方法と今後のデザイン戦略
Tomo Tsubota @tsubotax

2. 2
坪田 朋 (35歳)
UI/UX Designer
livedoor、DeNAなどで新規事業のディ
レクション、デザイン組織の立ち上げ、
マジネジメントを実施。現在は、DeNA
を退職して、新しい活動の準備中。

3. 3
今日の授業で学べること
1. デザインシフトとは何か
2. なぜ必要なのか
3. 具体的な導入事例と実行方法

4. 4
Design Thinking

5. 5

6. 6
これ以前の問題が山積み

7. 7
もしかして？
• デザイナーが社内(社外)下請けになっている
• 意思決定者がプロジェクトチーム内に居ない
• プロトタイピングツール未導入
• デザイナーの給与が他職種比較で理由なく安価
• 経営者とデザイナーのコミュニケーションが少
ない

8. 8
自分のスキルレベルは上がって
いるが良い製品が作れない
と感じる方
もしかして？

9. 9
「もしかして」の項目にピンと
来る方が居たらぜひ教えてください
みなさんに質問です

10. 10
デザインシフトとは

11. 11
企画
エンジニア デザイナー
よくある開発チームの構成

12. 12
企画
エンジニア デザイナー
よくある開発チームの構成
UI/UX論

13. 13
企画
エンジニア デザイナー
よくある開発チームの構成
UI/UX論

14. 14
企画
エンジニア デザイナー
開発チームの構成
チームとして全力でUI/UXの会話ができる状態に
UI/UX論

15. 15
理想論のフライングはNG

16. 現場と理想論のギャップ
UI/UX？
16
Journey
Map
CXD

17. 17
現場と理想論のギャップ
UI
UX
transition
Journey
Map

18. 18
正しいモノを作るには
開発体制の整備が重要

19. 19
• 市場は、スマートフォン / アプリ / プロダクト開発へシフト
• 開発現場は「ウォーターフォール」から「アジャイル」へ変化
• 高品質なサービス提供にUI/UXへの投資は必然になってきた
• 多くの会社でアクセルを踏んでないため、費用対効果が高い
なぜデザインシフトなのか

20. 20
• 市場は、スマートフォン / アプリ / プロダクト開発へシフト
• 開発現場は「ウォーターフォール」から「アジャイル」へ変化
• 高品質なサービス提供にUI/UXへの投資は必然になってきた
• 多くの会社でアクセルを踏んでないため、費用対効果が高い
なぜデザインシフトなのか

21. 21
理論や哲学的なアプローチの前にまずは
普通に開発できる環境作り
チェンジ・マネジメント

22. 22
ここからデザイン組織を
作って実行したことまとめ

23. 23
1. 新規事業のUI/UXデザイン
2. プロモーションクリエイティブ
3. プラットフォーム事業の運営クリエイティブ
4. CIデザイン
5. デザイナーのプレゼンス向上
6. クリエイター採用活動
7. クリエイターの働きやすい組織づくり整備
デザイン戦略室の現場業務

24. 24
80名前後が所属する、DeNAの中にある
制作会社みたいな組織です
Creative Director Illustrator Front-end
Engineer
UI Designer HR / Assistant

25. 25
実行したこと
1. 開発できる環境を整える
2. プロトタイプ開発の導入
3. バックオフィスの強化
4. 採用強化・強い仲間を集める
5. 社内・社外ブランディング強化

26. 26
実行

27. 1. 開発できる環境を整える

28. 28
・決まった要件にグラフィックを描く、社内下請け感
・理解が得られにくく、裁量が少なく環境が整わない
・何でも屋を求められて器用貧乏になる
・慢性的にリソース不足で、品質があがらない
デザイン周りで起こっていた課題 (デザイナー視点)

29. 29
デザイン周りで起こっていた課題 (非デザイナー視点)
デザインってよくわからないんだよね？(笑)

30. 30
経営者
企画
エンジニア デザイナー
よくある開発チームの構成
予算
人員計画
採用
言語化して説明

31. 31
デザインという言葉が広義なので、各職種のスキルセット
がわかりにくく、プロジェクトの適切なアサインが不明。
UIデザイナーといっても、設計オンリーの人と、設計 ∼
グラフィックができる人が居て、誰をアサインすれば良い
のか…
デザイン周りで起こっていた課題 (非デザイナー視点)

32. 32
デザインプロセスや工数感は非デザイナーから見えにく
いので、リソース見積もりやアサインがあいまいなまま
開発を走らせてしまったりする
デザイン周りで起こっていた課題 (非デザイナー視点)

33. 33
デザイン = 絵心・センスが必要という印象が強く、理系
の人からするとなんとなく深いコミュニケーションを避
けがち、距離感があり全力で会話できてない
デザイン周りで起こっていた課題 (非デザイナー視点)

34. 34
リソース調達が必要なのは理解しているが、採用方法や
スキル評価の判断基準が定まらず、アクセルを踏み切れ
ない
デザイン周りで起こっていた課題 (非デザイナー視点)

35. 35
1. デザインを言語化し、サービスを開発する上で何ができる職種な
のか、非デザイナーにもわかるように説明する
2. 正しいリソース・工数の提示とアサインの適切化を実施して、事
業予算に組み込んでもらう交渉と提案をする
3. デザイナーに必要なソフトウェア、開発環境を導入して、生産性
を上げる
4. リソース足りなければ、採用計画を立てつつ、直近で必要ならば
外部パートナーからリソース調達する
課題を踏まえ、開発環境を整えるために実施したこと

36. 36
Graphic Design
エンジニアが作ったhtmlのテンプレートにグラフィック装飾と
整形、運用バナーやランディングページを作るのが主な仕事
当時の開発体制

37. 37
Graphic Design UI Design
グラフィックだけではなく、サービスの価値を高めるための
ユーザー体験を実現できるUI設計までをデザイナーのミッションにシフト
デザイン領域の拡張に伴う役割変化

38. 38
デザインを言語化し、サービスを開発する上
で何ができる職種なのか社内で明文化 & 非デ
ザイナーにもわかるように説明して回る

39. 39
UI Designer
POが決めたユーザーストーリーを、デバイス毎に最適なUser
Interfaceの設計とグラフィック化を行える。プロトタイピング
ツールを駆使したモックアップを作ってチームがプロダクトのUI
評価できるように言語化と自走ができる人。
iOSが得意、Android得意な人で分かれるが、各プラットフォー
ムのデザインガイドラインは一通り頭に入っていて、ベストなソ
リューションを提案できる。
使いこなせるツールの例
UI Designerの紹介例

40. 40
正しいリソース・工数の提示とアサインの適切化
を実施して、事業予算に組み込んでもらう交渉と
提案をする

41. 開発チーム
・開発に必要なスキルセットとリソースをプロダクトオーナーに提案する
・外部に頼った方が良いモノは、きちんと頼る
プロダクトオーナー
Front-end
Engineer
UI Designer × 2 Illustrator
外部ヘルプ
Creative Director
プロジェクトに必要な工数と人員見積り
41

42. 42
プロジェクトにおいてデザインに必要なデザイナーのタスク例
競合調査 UI設計 GUI設計UIドラフト & プロトタイプ
思考、調査時間(5割) アウトプット時間(5割)
レギュレーション
・グラフィックのアウトプット部分だけにフォーカスがあたって、思考時間が見積
もりに反映されてない
・巻き込むタイミングが遅く、事前情報が無いまま、明日からグラフィックを求め
る無茶振り
工数見積でよく勘違いされるケース

43. 43
希望キャリアを踏まえた中長期の目標設定

44. 44
メンバーのスキルセットを可視化し、得意領域・
サービスステージに合わせたアサインを部署異
動無く実現可能に

45. 45
事業A 事業B 事業C 事業D 事業E
デザイン戦略室 & パートナー会社
部署異動なく、開発に必要な人材を柔
軟にアサインできるような体制
事業部に属さずデザイン組織を横断化

46. 46
1. メンバーのスキルセットを可視化し、得意領域・
サービスステージに合わせたアサインを部署異動無く
実現
2. 正しい工数見積もりの提示とアサインの適切化を横
断的に実施
3. 希望キャリアを踏まえた中長期の目標設定を可能に
横断組織にした狙い

47. 47
事業A
事業B
iOS新規開発のUIデザイン
iOS新規開発のUIデザイン
アサイン変更
iOSの運用開発はiOS開発にチャレンジしたい若手に引き継ぎ、育成する
フォロワー
Xcodeのstoryboadにチャレンジ
スキル領域拡大
http://www.slideshare.net/MayumiNarisawa/xcode-up-5
・得意な事を仕事にした方が品質も上がる
・短期ではなく、人それぞれのキャリアストーリー定めてチャレンジできるような環境を
iOSのUIデザインを強みにしたい N さん のケース

48. 48
1. 成果評価：既存プロジェクトへの貢献
2. 発揮能力：伸ばすスキル
3. 社外活動：ブログ / 登壇 / ハッカソン
目標設定イメージ

49. 49
素直に外部パートナーに頼る事も必要

50. 50
お世話になった会社例
素直に外部パートナーに頼る事も必要

51. 51
・社内で完結せず、スポットタスクや弱み部分は、外部の力を借りる
=>自社の強みと弱みを自分たちで理解し、向き合うのが大事
=>未経験領域は、得意な外部パートナーへ依頼し、技術を学ぶ
・ただ、下請け感のある発注・コンペ発注は、多くの場合不幸せになるのでしない
=>外部ディレクションもスキルが必要なので、非デザイナーではなく、デザインディ
レクションできる人が、選定から入って、カウンターパートに立つ
・社内リソースが足りない場合でも、カルチャーにフィットしない人は採用しない
=>一時的な穴埋めの採用はお互い不幸せ。ただ、リソース不足で、事業のボトルネッ
クにならないように、外部の人に発注できる環境は、組織として、いつ何時でも整え
ておく
素直に外部パートナーに頼る事も必要

52. 2.プロトタイプ開発の導入

53. 53
みなさんに質問です
導入しているプロトタイピング
ツールはなんですか？

54. 54
好きな開発スタイル

55. 55
1000の会議より、10のプロトタイプ。

56. 56
サービス開発は、作り手がリードして
試行錯誤しながらすすめる環境にシフト

57. 57
プロジェクトにおいてデザインに必要なデザイナーのタスク例
競合調査 UI設計 GUI設計UIドラフト & プロトタイプ
思考、調査時間(5割) アウトプット時間(5割)
レギュレーション
この部分の工数をしっかりとって、プロトタイピング
の文化を根付かせる
デザインタスク再掲

58. 58
・モノづくりの現場では、資料ではなく、アウトプットドリブン
・検証に必要な最低限の機能を持った製品(MVP)で、ユーザーテ
ストと評価を実施
・デザイナー、エンジニアがサービスのプロダクトオーナーも担
うケースも
・座席は、プロジェクトの開発チームで固める
・プロトタイピングに必要なツールを準備して、チームで学習する
プロトタイプドリブンの開発にシフト

59. 59
Sketch3 - 99$
Prott - ¥1,900 /
month
・初期コスト¥12,000位で準備
・事業部毎ではなく横断導入、環境変化における学習コスト低下
プロトタイピングに必要なツール

60. 60
Sketch3 - 99$
なぜSketch3を使う必要があるのか

61. 61
終了スタート
A
B
C
グ
ラ
フ
ィ
ッ
ク
ワイヤー / UI設計
作業工程例
見た目の
完成度

62. 62
終了スタート
A
B
C
グ
ラ
フ
ィ
ッ
ク
ワイヤー / UI設計
作業工程例
見た目の
完成度
MVP 評価ライン

63. 63
終了スタート
A
B
C
グ
ラ
フ
ィ
ッ
ク
UI設計
作業工程例
見た目の
完成度
MVP 評価ライン
UI
アセット
評価 評価 評価

64. 64

65. 65

66. 66
・プラグインの豊富さ
・UIアセット活用
・シチュエーション再現
・適切な実機テスト
プロトタイピングに必要なツール

67. 67
ユーザーテスト環境を導入して、プロト
タイプのニーズ調査や課題を抽出して客
観的な評価ができるような文化に

68. 68
モニタールームテストルーム
スクリーン
All Team Members
Test User
検証デバイス
interviewer
利用シーンを撮影して、モニタールームで、MVPの評価を実施
ユーザーテスト部屋を新設

69. 69
■UI設計の課題
・ターゲットユーザーへのテストがされてなく属人的な判断で作られている場
合もある
・社内の開発者とターゲットユーザーの間にはリテラシーにギャップがある
・結果としてターゲットユーザーにとって使いやすいUIが開発できていない
■現場レベルでのスキル課題
・UX領域の意思決定基準がチーム毎で異なり、最適な基準が無い
・求められる品質が属人化していて、判断基準が感覚的になっている
・ベンチマークが不明確で、メンバー/制作者の主観で判断している
■組織横断的な課題
・作る事に追われて、大事なUIにおいて質を追求する体制が整っていない
・ケース毎のベストプラクティスが生み出せていない。共有されていない

70. 3. バックオフィスの強化

71. 71
開発に関わる人
Front-end
Engineer
UI DesignerIllustrator
Creative Director
Assistant
デザイナーサポートチーム
開発以外の業務サポート
・ソフト / フォント購入
・各種稟議
・書籍購入
・PCセットアップ
・交通費精算
・などなど
Salckに #support を作っ
てコミュニケーション
人事 法務 など
・エクセルやワード的な行為
・関連部署とのコミュニケー
ション
開発者がモノづくりに集中できる環境を

72. • モノづくりに時間を割けるように、モチベーションが低下する非開発系作業
/ IEを使わないといけない何らかしら調整業務はサポートチームで対応する
• デザインに必要な開発ツールやデバイスの予算を調達して各チーム毎の調整
コストを減らす
• モニターとPCスペックはケチらない
• アサイン変更時でも、作り方が変わらないように、プロジェクト横断で導入
• 技術書籍は、アウトプット前提で、会社負担で購入可能な制度の導入
• 勉強会は業務が調整できれば、自由に参加可能
72
開発者がモノづくりに集中できる環境を

73. 4. 採用強化・強い仲間を
集める

74. 採用チームや人事が、非デザイナーのスキルを把握
できない場合、ミスマッチが生じて会社が不幸にな
るので、人事や採用エージェント直接話して、現場
ニーズのスキルと人材要件を言語化する
74
採用プランを人事と一緒に考えて実行

75. • 各事業の見積もりから、半期ごとの採用計画をたてる
• スキルセットリストを作って欲しい人材を明文化
• 採用エージェントに直接現場から人材要件を伝える
• 会社実績をポートフォリオ掲載可能にすることで、将
来フリーを目指したい人の受け入れも可能に
• その場しのぎのリソース補填採用を行わない
75
採用プランを人事と一緒に考えて実行

76. • 履歴書・職務経歴書無し、ポートフォリオURLのみで
応募可能
• 必要な人材像をイベント、ブログで市場発信して、カ
ルチャーフィットする人の直応募を増やす
• 職種毎に、簡易な実技課題を用意して、スキルのミス
マッチを防止
76
採用プロセスの簡略化、ミスマッチ防止策

77. 77
https://dena.com/jp/recruit/career/portfolio/
コンセプトを決めて採用ページを制作

78. 78
会社実績をポートフォリオ掲載可能なガイドライン

79. 79
Deligt U：UX/UIオンラインスクール開講

80. 5. 社内・社外ブランディ
ング強化

81. 81
↓
Corporate logo icon
CI変更

82. 82
このタイミングでデザインに力を
入れていく宣言を社内外に周知

83. 83
http://creator.dena.jp/
Blog / 講演などで現場からの技術発信

84. 84
dena.com SNS
コーポレートサイト / SNSで企業情報発信

85. 85
http://ui-crunch.com/
技術系のセミナー実施

86. 86
・デザイン環境が整っていない場合は、まずは環境から整えた方が
生産性が上がる
・良いデザインが作れる組織は、エンジニアのモチベーションも上
がり品質も上がる
・非デザイナー、経営者の多くは、投資にネガティブではなく、デ
ザインの事がよくわからないので、やり方がわからない
・その場合、裁量をもらって任せてもらうか、理解を得るために、
デザイナーが言語化して説明する必要がある
まとめ

87. 87
1. 開発できる環境を整える
2. プロトタイプ開発の導入
3. バックオフィスの強化
4. 採用強化・強い仲間を集める
5. 社内・社外ブランディング強化
まとめ

88. 88
チェンジ・マネジメント
ユーザーとって正しい事を
実現したいのであれば、環
境を改善しよう

89. 89
キャリアの考え方
製品の
完成度
個人スキルの限界点
ディレクション
アウトプット
3∼5年

90. 90
チェンジ・マネジメント
Chief Creative Officer
CCO制度の導入

91. 91
実行が大事

92. 92
おまけ
なかなか理解してもらえない
場合は、実行してみて既成事実を作る

93. 93
おまけ
社内が口説けないなら
外から攻める

94. 94
おまけ
その領域で、優れてる会社へ
研修に行き仕組みを
インストールする

95. 95
Design Thinking

96. 96
お知らせ その1
UI Crunch #8
UIデザインに求められる実装スキルと考え方
http://ui-crunch.connpass.com/event/28054/

97. 97
お知らせ その2
デザインの事で困ってる方が居たら相談
のりますので、下記までご連絡ください
tsubotax@gmail.com
https://www.facebook.com/tsubotax
https://twitter.com/tsubotax

98. Thank you
ankyou
Tomo Tsubota @tsubotax