1. Goodpatch流、ユーザー視点のUIとデザイン設計
株式会社グッドパッチ 土屋尚史

2. 自己紹介
Goodpatch Inc.
株式会社グッドパッチ 代表取締役
土屋 尚史
はUIの設計･デザインに特化した会社です。

3. ブログ：MEMOPATCH
http://memo.goodpatch.co/

4. 簡単に略歴を紹介

5. 簡単に略歴を紹介
大阪のWeb制作会社のディレクター

6. 簡単に略歴を紹介
大阪のWeb制作会社のディレクター
2年半前に突如シリコンバレーに行くことを決意

7. 簡単に略歴を紹介
シリコンバレーに伝手なし、英語喋れない、初海外
大阪のWeb制作会社のディレクター
2年半前に突如シリコンバレーに行くことを決意

8. 簡単に略歴を紹介
シリコンバレーに伝手なし、英語喋れない、初海外
知り合いにSan Franciscoのbtraxを紹介してもらいインターン
大阪のWeb制作会社のディレクター
2年半前に突如シリコンバレーに行くことを決意

9. 簡単に略歴を紹介
シリコンバレーに伝手なし、英語喋れない、初海外
知り合いにSan Franciscoのbtraxを紹介してもらいインターン
San Franciscoから帰国後グッドパッチを創業
大阪のWeb制作会社のディレクター
2年半前に突如シリコンバレーに行くことを決意

10. 簡単に略歴を紹介
シリコンバレーに伝手なし、英語喋れない、初海外
知り合いにSan Franciscoのbtraxを紹介してもらいインターン
San Franciscoから帰国後グッドパッチを創業
半年でうまく行かなくなりUIに事業をフォーカス
大阪のWeb制作会社のディレクター
2年半前に突如シリコンバレーに行くことを決意

11. 簡単に略歴を紹介
シリコンバレーに伝手なし、英語喋れない、初海外
知り合いにSan Franciscoのbtraxを紹介してもらいインターン
San Franciscoから帰国後グッドパッチを創業
半年でうまく行かなくなりUIに事業をフォーカス
共同創業者が渋谷の大手ネット企業に転職
大阪のWeb制作会社のディレクター
2年半前に突如シリコンバレーに行くことを決意

13. 残りの資金3ヶ月でたった1人になる

14. 残りの資金3ヶ月でたった1人になる
Gunosyがメディアで取り上げられ復活

15. 残りの資金3ヶ月でたった1人になる
Gunosyがメディアで取り上げられ復活
仕事も人も増えたが自転車操業状態で銀行残高4万円に

16. 残りの資金3ヶ月でたった1人になる
Gunosyがメディアで取り上げられ復活
仕事も人も増えたが自転車操業状態で銀行残高4万円に
ギリギリの状態で某大手通信社の案件が決まる

17. 残りの資金3ヶ月でたった1人になる
Gunosyがメディアで取り上げられ復活
仕事も人も増えたが自転車操業状態で銀行残高4万円に
ギリギリの状態で某大手通信社の案件が決まる
そこから人をさらに増やし1年で社員は20数名に

18. 残りの資金3ヶ月でたった1人になる
Gunosyがメディアで取り上げられ復活
仕事も人も増えたが自転車操業状態で銀行残高4万円に
ギリギリの状態で某大手通信社の案件が決まる
そこから人をさらに増やし1年で社員は20数名に
イマココ

19. なぜいまUIデザインが
重要なのか

20. iOS7などのUI刷新がニュースになる時代

21. 昔に比べてデバイスに触れている時間が増えてる
スマートフォンが出てきて飛躍的に増加

22. 一番ユーザーと距離が近いものなので
UIが重要なのは当たり前！

23. なぜ最近になってUIが重要だと言われ始めたか
iPhoneが出たのが2007年
初めはアプリが作れれば良かった。

24. スマートフォンアプリは作れば良いという
時代はすでに終わった
小さな画面に色々な情報を載せるには
PCのWebサイトよりも
高度な情報設計が求められる

25. 世界ではデザイン会社が
どんどん買収されている

26. アクセンチュアがデザインファームFjord買収

27. Adobeがデザイン会社Ideacodes買収

28. デザイナー目当てで買収されたと
思われる案件がちらほら

29. グッドパッチが
UIに事業をフォーカスした理由

30. サンフランシスコで働いていて感じたこと
サンフランシスコ、シリコンバレーの
スタートアップはβ版の段階から
UIにかなり力を入れている

31. UIは差別化の対象になる！

32. 良いUIとはなにか？

33. 機能や得られる結果が一緒でも
UIによってユーザーの満足度が違ってくる

34. Twitterクライアント

35. タスク管理

36. UIを考える時の要素は大きく分けると
設計 デザイン（グラフィック）
･情報設計
･レイアウト
･ユーザビリティ
（使いやすさ）
･インタラクション
（気持ちよさ）
･ラベリング
･カラーイメージ
･ブランド
･タイポグラフィ
･行間･字間
･設計を補足する役割

37. 誰にどう思って使ってもらいたいか？
どうやって決めていくかの羅針盤
ターゲットユーザーが満足する使い勝手
ターゲット 体験＋

38. GunosyのUIデザインはどうだったのか？

39. みなさんが今回のセミナーで
期待しているような内容ではないかもしれません

40. 良くUI/UXセミナーなどで出てくる
･ペルソナ ･シナリオ
･カスタマージャーニーマップ
･ストーリーボードなど

41. 良くUI/UXセミナーなどで出てくる
･ペルソナ ･シナリオ
･カスタマージャーニーマップ
･ストーリーボードなど
無料で仕事を受けたので全く何もしておりません
※最初のWebスマホ版

42. とことん考え抜いたのは
誰に
どう思ってもらうか
アーリーアダプターの人達に
（情報感度が高い）
このサービスはCoolだ！
日本のサービスとは思えない。

43. GunosyのUIは
とにかくCoolだと思われるようにデザイン

44. UIを考える上で各フェーズのターゲットユーザーに
どう見られるかは気にしていつも考えていた。
アーリーアダプター層
アーリーマジョリティ層
イノベーター層
iPhoneアプリ 1.0
iPhoneアプリ 2.0
Web版スマホ版

45. UIを考える上で各フェーズのターゲットユーザーに
どう見られるかは気にしていつも考えていた。
アーリーアダプター層
Gunosyのブランド価値を最大化するためのUI
アーリーマジョリティ層
イノベーター層
iPhoneアプリ 1.0
iPhoneアプリ 2.0
Web版スマホ版

46. iPhoneアプリからはデザインプロセスが

47. 1、ペーパープロトタイピング ←
→
iPhoneアプリからはデザインプロセスが

48. 1、ペーパープロトタイピング ←
→
iPhoneアプリからはデザインプロセスが
UI設計

49. 1、ペーパープロトタイピング ←
→
iPhoneアプリからはデザインプロセスが
UI設計
→
2、コア機能のプロトタイプ ←

50. 1、ペーパープロトタイピング ←
→
iPhoneアプリからはデザインプロセスが
UI設計
インタラクション
→
2、コア機能のプロトタイプ ←

51. 1、ペーパープロトタイピング ←
→
iPhoneアプリからはデザインプロセスが
UI設計
インタラクション
→
2、コア機能のプロトタイプ ←
→
3、デザインパターン

52. 1、ペーパープロトタイピング ←
→
iPhoneアプリからはデザインプロセスが
UI設計
インタラクション
→
2、コア機能のプロトタイプ ←
→
3、デザインパターン
4、実装

53. ここでも普通のデザインプロセス
特別な事はしていない

54. Gunosyの本質的な価値を最大化するUI
ニュースという
コンテンツが一番
引き立つUI
ニュースの邪魔をしないUI
→フラットデザインを採用

55. 1つ1つの記事の性質
Gunosyはパーソナライズした良質な記事を25件

56. 1つ1つの記事の性質
Gunosyはパーソナライズした良質な記事を25件
ファーストビューで見えるニュース量は
通常のニュースアプリよりも少ないが
1つ1つの記事をしっかり見せる

57. 使いやすさについてはページ遷移や
Webページから戻る際にスワイプでの動作を
スワイプだけでしか
動作できないようにはしない。
必ずタップで同じ事が
出来るようにはしておく

58. フラットだが奥行きをつけるデザイン
iOS7よりも前にレイヤー階層構造を取り入れる

59. 本に書いてあるようなデザインプロセスを
経たからといってヒットするサービスが
生まれるわけではない。
もちろん打率を上げたり
チーム内での情報共有には使えるので
やらなくてもいいという訳ではないが･･

60. コンテンツ（サービスの中身）が第一
本質的な価値を理解して最適なUIを作る

61. UIが良くなくてもダウンロードされるアプリは
たくさんある
ただ最初は良くても必ずUIの壁につき当たる

62. グッドパッチが
UIのクオリティーを上げるために
工夫していること

63. 1、企画･コンセプトメイキング
2、UI設計･ペーパープロトタイピング
3、コア機能のプロトタイプ
4、ユーザーテスト
5、デザインパターン
6、フロントエンド実装
全ての案件でコンセプトメイキング
などの上流工程から入る

64. プロトタイプを作ってからデザインをする
静的なカンプで判断しない

65. 最先端の情報が集まる
グッドパッチ共有グループ

66. デザインレビュー(Design Review)
Googleでは、コードレビュー(Code Review)が
必須とされている。プログラムを書いたら
チームでレビューし承認されないとコミット出来ない。
これによりソースコードの品質を保っている。

67. デザインレビュー(Design Review)
Googleでは、コードレビュー(Code Review)が
必須とされている。プログラムを書いたら
チームでレビューし承認されないとコミット出来ない。
これによりソースコードの品質を保っている。
グッドパッチではデザインの品質を保つために
全スタッフに案件を共有し、
全員でデザインのレビューを行なっている

68. 最初はFacebookにデザインチェック
というグループを作ってやっていたが
あまりに使い勝手が悪いので
自分たちでツールを開発

70. これからアプリのUIを考える上で
デザイナーじゃない企業の担当者でもできること

71. 自分たちでもプロトタイプを作りましょう！

72. プロトタイプは簡単に作れる
ようになってきている

73. FLINTO
https://www.flinto.com/

74. 完璧なUIというのは存在しない
理解してもらいたいのは
99％に近いものは作れるのかもしれない
残りの1％をずっと追い求めてUIを改善していく
ユーザーの行動も時が経てば変わる
99％だと思っていたものが1年後
50％くらいの使い勝手になってるということもある

75. ユーザーの使い方は日々変わる
昔のユーザビリティ理論に縛られない

76. UI(デザイン)というのは消費財である