BPStudy#95にてデザインに関するトレンドと、Goodpatchでどのようにデザインしているのかについて話すというテーマで話した内容です。

1. How
What
Why
WhyandHow
DesignUI
2015 Goodpatch Inc. Mikihiro Fujii

2. 藤井 幹大
株式会社グッドパッチ
組織デザイン担当 執行役員
チーフUXデザイナー
VOYAGE GROUPでBePROUDさんとお仕事
自己紹介

3. 人々のハートを揺さぶるようなDesign&Productを生み
出し、世界をより良い方向に前進させる

4. プロトタイプをつくるツールではなく、
プロトタイピングをチームにインストールするツール

5. Prottの基本的な使い方

6. なぜ、今
「デザイン」
なのか

7. 2013/5 2015/5
2012/10 2014/10

8. 2013/5 2015/5
2012/10 2014/10
デザイン会社の買収が進み、
ビジネス×デザインへの期待が高まっている。

9. ビジネス×デザインへの期待が高まっている。

10. なぜ
UIをデザイン
するのか

11. User Interface?

12. User ?
Interface
User / Interface / ?
【Interface】接触面、境界
「User」が誰で「？」が何なのかによって、その間に入
るべきInterfaceは変わる。

13. User ?User
Interface
User / Interface / ?
コンピュータ
アプリ
サービス
事業
社会
【Interface】接触面、境界
「User」が誰で「？」が何なのかによって、その間に入
るべきInterfaceは変わる。

14. UI Design?

15.
体験 行動
UI
UI
事業
サービス
システム
ユーザーの
体験
ユーザーの
行動
UIの役割
• 事業/サービス/システム/社会…と人の接点
• 体験と行動を生み出す。

16. 既存のマインドセット
事業の存続のためにモノをつくるというマインドセット
では成功しにくくなっている。
ユーザーの
体験
ユーザーの
行動
モノ
存続
{
収益目標
ユーザー数
問題解決

17. 2000年代前半
誰よりも早くビジネスモデルを発見
Google Adwords：2000年10月 米国サービス開始
Value Commerce(1999年), a8.net(2000年), Linkshare(2001年) 開始
存続
{
ユーザーの
行動
{
CTR / CVR
Acquisition
Activation
Retention
Revenue
Referral
収益目標
ユーザー数
問題解決

18. 2000年代後半
誰よりも早く開発
Ruby on Rails： 最初のバージョン公開（2004年7月）
Django：BSD License で公式にリリース（2005年7月）
モノ 存続
} {
ユーザーの
行動
{
事業
サービス
コンテンツ
機能、価格
収収益目標
ユーザー数
問題解決
CTR / CVR
Acquisition
Activation
Retention
Revenue
Referral

19. 2010年代
誰よりも早くユーザーに価値を提供する
iPhone3G(2008年)→iPhone4S(2011年 SOFTBANK+KDDI)
『The Lean Startup』『UX白書』（2011年）
ユーザーの
体験
ユーザーの
行動
モノ 存続
}
}
価値
感覚 / 感情 / 作業 / 意味
ストーリー
{
{
事業
サービス
コンテンツ
機能、価格
収益目標
ユーザー数
問題解決
CTR / CVR
Acquisition
Activation
Retention
Revenue
Referral

20. UIデザインの役割
• サイクル全体のデザイン
• モノと人の接点となり、体験と行動を生み出す。
ユーザーの
体験
ユーザーの
行動
モノ 存続
}
}
価値
感覚 / 感情 / 作業 / 意味
ストーリー
{
{
事業
サービス
コンテンツ
機能、価格
収益目標
ユーザー数
問題解決
UI
CTR / CVR
Acquisition
Activation
Retention
Revenue
Referral

21. どうやって
UIをデザイン
するのか

22. UIデザインのスペシャリスト集団

23. 取締役会
経営会議
Tokyo Berlin
管理部
組織デザイン室
広報室
デザイン ディビジョン（受託）
Goodpatch組織図
プロジェクトチームプロダクト ディビジョン（自社）

24. プロジェクトチームMTG
1. 各チーム(2人以上)が独立してプロジェクトを進める。
2. メンバーはRole別に責任と権限持つ。
3. 原則掛け持ちしない。案件ベースで招集/解散。

25. 28.4歳
平均年齢
長老4人除外
27.7歳
PM
26%
Designer
35%
Engineer
39%
クリエイター系職種比率
メンバーの統計
経験豊富なメンバーは多くない

26. UIデザインのスペシャリスト集団 ?

27. UIデザインのスペシャリスト集団
目指してはいるがまだ途上

28. UIデザインのスペシャリスト集団
お互いに補い合いながらデザイン

29. どうやって実現
しているのか?

30. How
What
Why
なぜやるのか
価値観の共有
• 職種問わず、デザインの力を信じている人だけを採用。
• 常にビジョンや「理由」を共有する。

31. 価値観だけでは
質は高まらない。

32. How
What
Why
どうやってやるのか
(Co-)Prototyping (ぷろとたいぴんぐ)
• アイディアをリアルな評価ができる状態にして
チームで試しながらモノをつくっていくこと。
• それを当然だと思うマインドセット。
※公式の名称ではありません。

33. 課題チーム＆前提 プロトタイピング デリバリー
!
チーム×プロトタイピング前提。
要件定義から開発完了までプロトタイピングし続ける。
デザインプロセス
※公式版作成中です。

34. レビュー
レビュー
レビュー
プロトタイピング
発見 → 仮説 → アウトプット を繰り返しながら常にレ
ビューを入れていく。
コツ：制限時間をつくって未完成でもレビュー。
仮説に応じたプロトタイプ

35. How
What
Why
何をするのか
レビュー
・チーム内レビュー
・プロジェクトレビュー
・Role別MTGでのレビュー

36. サンク
コスト効果
投資は無駄に
したくない
IKEA効果
がんばったから
いいモノができた
確証
バイアス
思ったとおり
の結果だ
内なる敵
人は迷わずに行動するための仕組みを持っている。
影響範囲の大きさが個人の領域を大きく超える時、
自分が自分の敵になる。

37. レビュー! レビュー! レビュー!

38. チーム内レビューMTG
チーム内では常にオープンなSlackチャンネルとProttプ
ロジェクトで共有して、職種関係なく意見を出し合う。
チームメンバーだけではなく、社内の誰でも参加可能。

39. プロジェクトレビューMTG
毎週週明け午前中に開催。全プロジェクトを全社員で
共有して、Goodpatchのデザインとしてレビューす
る。

40. 各Roleで気になっていることや発見を共有する。
Role担当者だけではなく、社内の誰でも参加可能。
Role別MTGでのレビュー

41. (Co-)Prototyping (ぷろとたいぴんぐ)
• アイディアをリアルな評価ができる状態にして
チームで試しながらモノをつくっていくこと。
• それを当然だと思うマインドセット。
※公式の名称ではありません。
♥
?
+

42. まとめ

43. User ?
Interface
User / Interface / ?
「User」だけではなく「？」を理解し、両サイドの間に
入るべきリアルなInterfaceをデザインしよう。

44. なぜUIをデザインするのか
人の体験と行動を実際に生み出すのは、アイディアで
はなくモノだから。
ユーザーの
体験
UI
UI
事業
サービス
システム
存続
ユーザーの
行動

45. どうやってUIをデザインするのか
• チームでデザインする。
• UIの目的を明確にした上で、可能なかぎり多くの
視点と回数で確かめる。
♥
?
+

46. 偉大なチームをつくり
世界を前進させるモノをつくりましょう！
ユーザーの
体験
UI
UI
事業
サービス
システム
存続
ユーザーの
行動

47. ご静聴ありがとうございました。
Design your world!

48. 人々のハートを揺さぶるようなDesign&Productを生み
出し、世界をより良い方向に前進させる
Engineer, Project Manager, Designerなど全職種募
集してます！Wantedlyでポチッと！
チームメンバー募集中！

50. UX Design
どんな体験をしてもらうかを計画し、その体験が量
産・再生産される仕組みをつくること

51. User Interface
Smartphone
App
自分の個性に
合っているかどうか
感覚的に魅力がある
・よりパーソナル
・ストアで競合の中から選択
目的を
果たせるかどうか
コア機能>>>その他の機能
画面に入る情報の制約
↓
要件のフォーカス
コンテクスト上で
使いやすいかどうか
視認性/操作性の確保 移動時に小さい画面で見る