Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Goodpatch流、ユーザー視点のuiとデザイン設計_2013/07/24_第2回メンバーズモバイルセミナー

28,410 views

Published on

第2回メンバーズモバイルセミナー
新たな顧客接点を獲得!~3つの事例から学ぶスマホアプリのおさえるべきポイントとは~

【第2部】Goodpatch流、ユーザー視点のuiとデザイン設計

最近、Webやアプリなどを制作する際に以前よりもUIという概念が重要となってきております。UIとは人間と機械の関係を円滑にするものです。AppleがMacintoshで初めてGUIが実装されたパソコンを出してから約30年、なぜ今再びUIに注目が集まっているのか。
企業がWebサービスやアプリなどで長期的にユーザーと繋がっていく上で大事なことなど、Gunosyの例などを交えてお話します。

【講師】株式会社グッドパッチ 代表取締役/CEO 土屋 尚史氏

Published in: Business
  • Be the first to comment

Goodpatch流、ユーザー視点のuiとデザイン設計_2013/07/24_第2回メンバーズモバイルセミナー

  1. 1. Goodpatch流、ユーザー視点のUIとデザイン設計 株式会社グッドパッチ 土屋尚史
  2. 2. 自己紹介 Goodpatch Inc. 株式会社グッドパッチ 代表取締役 土屋 尚史 はUIの設計・デザインに特化した会社です。
  3. 3. ブログ:MEMOPATCH http://memo.goodpatch.co/
  4. 4. 簡単に略歴を紹介
  5. 5. 簡単に略歴を紹介 大阪のWeb制作会社のディレクター
  6. 6. 簡単に略歴を紹介 大阪のWeb制作会社のディレクター 2年半前に突如シリコンバレーに行くことを決意
  7. 7. 簡単に略歴を紹介 シリコンバレーに伝手なし、英語喋れない、初海外 大阪のWeb制作会社のディレクター 2年半前に突如シリコンバレーに行くことを決意
  8. 8. 簡単に略歴を紹介 シリコンバレーに伝手なし、英語喋れない、初海外 知り合いにSan Franciscoのbtraxを紹介してもらいインターン 大阪のWeb制作会社のディレクター 2年半前に突如シリコンバレーに行くことを決意
  9. 9. 簡単に略歴を紹介 シリコンバレーに伝手なし、英語喋れない、初海外 知り合いにSan Franciscoのbtraxを紹介してもらいインターン San Franciscoから帰国後グッドパッチを創業 大阪のWeb制作会社のディレクター 2年半前に突如シリコンバレーに行くことを決意
  10. 10. 簡単に略歴を紹介 シリコンバレーに伝手なし、英語喋れない、初海外 知り合いにSan Franciscoのbtraxを紹介してもらいインターン San Franciscoから帰国後グッドパッチを創業 半年でうまく行かなくなりUIに事業をフォーカス 大阪のWeb制作会社のディレクター 2年半前に突如シリコンバレーに行くことを決意
  11. 11. 簡単に略歴を紹介 シリコンバレーに伝手なし、英語喋れない、初海外 知り合いにSan Franciscoのbtraxを紹介してもらいインターン San Franciscoから帰国後グッドパッチを創業 半年でうまく行かなくなりUIに事業をフォーカス 共同創業者が渋谷の大手ネット企業に転職 大阪のWeb制作会社のディレクター 2年半前に突如シリコンバレーに行くことを決意
  12. 12. 残りの資金3ヶ月でたった1人になる
  13. 13. 残りの資金3ヶ月でたった1人になる Gunosyがメディアで取り上げられ復活
  14. 14. 残りの資金3ヶ月でたった1人になる Gunosyがメディアで取り上げられ復活 仕事も人も増えたが自転車操業状態で銀行残高4万円に
  15. 15. 残りの資金3ヶ月でたった1人になる Gunosyがメディアで取り上げられ復活 仕事も人も増えたが自転車操業状態で銀行残高4万円に ギリギリの状態で某大手通信社の案件が決まる
  16. 16. 残りの資金3ヶ月でたった1人になる Gunosyがメディアで取り上げられ復活 仕事も人も増えたが自転車操業状態で銀行残高4万円に ギリギリの状態で某大手通信社の案件が決まる そこから人をさらに増やし1年で社員は20数名に
  17. 17. 残りの資金3ヶ月でたった1人になる Gunosyがメディアで取り上げられ復活 仕事も人も増えたが自転車操業状態で銀行残高4万円に ギリギリの状態で某大手通信社の案件が決まる そこから人をさらに増やし1年で社員は20数名に イマココ
  18. 18. なぜいまUIデザインが 重要なのか
  19. 19. iOS7などのUI刷新がニュースになる時代
  20. 20. 昔に比べてデバイスに触れている時間が増えてる スマートフォンが出てきて飛躍的に増加
  21. 21. 一番ユーザーと距離が近いものなので UIが重要なのは当たり前!
  22. 22. なぜ最近になってUIが重要だと言われ始めたか iPhoneが出たのが2007年 初めはアプリが作れれば良かった。
  23. 23. スマートフォンアプリは作れば良いという 時代はすでに終わった 小さな画面に色々な情報を載せるには PCのWebサイトよりも 高度な情報設計が求められる
  24. 24. 世界ではデザイン会社が どんどん買収されている
  25. 25. アクセンチュアがデザインファームFjord買収
  26. 26. Adobeがデザイン会社Ideacodes買収
  27. 27. デザイナー目当てで買収されたと 思われる案件がちらほら
  28. 28. グッドパッチが UIに事業をフォーカスした理由
  29. 29. サンフランシスコで働いていて感じたこと サンフランシスコ、シリコンバレーの スタートアップはβ版の段階から UIにかなり力を入れている
  30. 30. UIは差別化の対象になる!
  31. 31. 良いUIとはなにか?
  32. 32. 機能や得られる結果が一緒でも UIによってユーザーの満足度が違ってくる
  33. 33. Twitterクライアント
  34. 34. タスク管理
  35. 35. UIを考える時の要素は大きく分けると 設計 デザイン(グラフィック) ・情報設計 ・レイアウト ・ユーザビリティ (使いやすさ) ・インタラクション (気持ちよさ) ・ラベリング ・カラーイメージ ・ブランド ・タイポグラフィ ・行間・字間 ・設計を補足する役割
  36. 36. 誰にどう思って使ってもらいたいか? どうやって決めていくかの羅針盤 ターゲットユーザーが満足する使い勝手 ターゲット 体験+
  37. 37. GunosyのUIデザインはどうだったのか?
  38. 38. みなさんが今回のセミナーで 期待しているような内容ではないかもしれません
  39. 39. 良くUI/UXセミナーなどで出てくる ・ペルソナ ・シナリオ ・カスタマージャーニーマップ ・ストーリーボードなど
  40. 40. 良くUI/UXセミナーなどで出てくる ・ペルソナ ・シナリオ ・カスタマージャーニーマップ ・ストーリーボードなど 無料で仕事を受けたので全く何もしておりません ※最初のWebスマホ版
  41. 41. とことん考え抜いたのは 誰に どう思ってもらうか アーリーアダプターの人達に (情報感度が高い) このサービスはCoolだ! 日本のサービスとは思えない。
  42. 42. GunosyのUIは とにかくCoolだと思われるようにデザイン
  43. 43. UIを考える上で各フェーズのターゲットユーザーに どう見られるかは気にしていつも考えていた。 アーリーアダプター層 アーリーマジョリティ層 イノベーター層 iPhoneアプリ 1.0 iPhoneアプリ 2.0 Web版スマホ版
  44. 44. UIを考える上で各フェーズのターゲットユーザーに どう見られるかは気にしていつも考えていた。 アーリーアダプター層 Gunosyのブランド価値を最大化するためのUI アーリーマジョリティ層 イノベーター層 iPhoneアプリ 1.0 iPhoneアプリ 2.0 Web版スマホ版
  45. 45. iPhoneアプリからはデザインプロセスが
  46. 46. 1、ペーパープロトタイピング ← → iPhoneアプリからはデザインプロセスが
  47. 47. 1、ペーパープロトタイピング ← → iPhoneアプリからはデザインプロセスが UI設計
  48. 48. 1、ペーパープロトタイピング ← → iPhoneアプリからはデザインプロセスが UI設計 → 2、コア機能のプロトタイプ  ←
  49. 49. 1、ペーパープロトタイピング ← → iPhoneアプリからはデザインプロセスが UI設計 インタラクション → 2、コア機能のプロトタイプ  ←
  50. 50. 1、ペーパープロトタイピング ← → iPhoneアプリからはデザインプロセスが UI設計 インタラクション → 2、コア機能のプロトタイプ  ← → 3、デザインパターン
  51. 51. 1、ペーパープロトタイピング ← → iPhoneアプリからはデザインプロセスが UI設計 インタラクション → 2、コア機能のプロトタイプ  ← → 3、デザインパターン 4、実装
  52. 52. ここでも普通のデザインプロセス 特別な事はしていない
  53. 53. Gunosyの本質的な価値を最大化するUI ニュースという コンテンツが一番 引き立つUI ニュースの邪魔をしないUI →フラットデザインを採用
  54. 54. 1つ1つの記事の性質 Gunosyはパーソナライズした良質な記事を25件
  55. 55. 1つ1つの記事の性質 Gunosyはパーソナライズした良質な記事を25件 ファーストビューで見えるニュース量は 通常のニュースアプリよりも少ないが 1つ1つの記事をしっかり見せる
  56. 56. 使いやすさについてはページ遷移や Webページから戻る際にスワイプでの動作を スワイプだけでしか 動作できないようにはしない。 必ずタップで同じ事が 出来るようにはしておく
  57. 57. フラットだが奥行きをつけるデザイン iOS7よりも前にレイヤー階層構造を取り入れる
  58. 58. 本に書いてあるようなデザインプロセスを 経たからといってヒットするサービスが 生まれるわけではない。 もちろん打率を上げたり チーム内での情報共有には使えるので やらなくてもいいという訳ではないが・・
  59. 59. コンテンツ(サービスの中身)が第一 本質的な価値を理解して最適なUIを作る
  60. 60. UIが良くなくてもダウンロードされるアプリは たくさんある ただ最初は良くても必ずUIの壁につき当たる
  61. 61. グッドパッチが UIのクオリティーを上げるために 工夫していること
  62. 62. 1、企画・コンセプトメイキング 2、UI設計・ペーパープロトタイピング 3、コア機能のプロトタイプ 4、ユーザーテスト 5、デザインパターン 6、フロントエンド実装 全ての案件でコンセプトメイキング などの上流工程から入る
  63. 63. プロトタイプを作ってからデザインをする 静的なカンプで判断しない
  64. 64. 最先端の情報が集まる グッドパッチ共有グループ
  65. 65. デザインレビュー(Design Review) Googleでは、コードレビュー(Code Review)が 必須とされている。プログラムを書いたら チームでレビューし承認されないとコミット出来ない。 これによりソースコードの品質を保っている。
  66. 66. デザインレビュー(Design Review) Googleでは、コードレビュー(Code Review)が 必須とされている。プログラムを書いたら チームでレビューし承認されないとコミット出来ない。 これによりソースコードの品質を保っている。 グッドパッチではデザインの品質を保つために 全スタッフに案件を共有し、 全員でデザインのレビューを行なっている
  67. 67. 最初はFacebookにデザインチェック というグループを作ってやっていたが あまりに使い勝手が悪いので 自分たちでツールを開発
  68. 68. これからアプリのUIを考える上で デザイナーじゃない企業の担当者でもできること
  69. 69. 自分たちでもプロトタイプを作りましょう!
  70. 70. プロトタイプは簡単に作れる ようになってきている
  71. 71. FLINTO https://www.flinto.com/
  72. 72. 完璧なUIというのは存在しない 理解してもらいたいのは 99%に近いものは作れるのかもしれない 残りの1%をずっと追い求めてUIを改善していく ユーザーの行動も時が経てば変わる 99%だと思っていたものが1年後 50%くらいの使い勝手になってるということもある
  73. 73. ユーザーの使い方は日々変わる 昔のユーザビリティ理論に縛られない
  74. 74. UI(デザイン)というのは消費財である

×