Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
ハートに響くUIを生み出すための
デザインプロセス
株式会社グッドパッチ 土屋尚史
自己紹介
Goodpatch Inc.
株式会社グッドパッチ 代表取締役
土屋 尚史
Twitter @tsuchinao83
はUIの会社です。
ブログも書いてます
http://likeasiliconvalley.tumblr.com/
簡単に略歴を紹介
シリコンバレーに伝手なし、英語喋れない、初海外
知り合いにSan Franciscoのbtraxを紹介してもらいインターン
San Franciscoから帰国後グッドパッチを創業
半年でうまく行かなくなりUIに事業をフォーカス...
残りの資金3ヶ月でたった1人になる
Gunosyがメディアで取り上げられ復活
仕事も人も増えたが自転車操業状態で銀行残高4万円に
ギリギリの状態で某大手通信社の案件が決まる
そこから人をさらに増やし1年で社員は20数名に
イマココ
ついてます
UIとは?
UI (User Interface) とは
UIとは機械、特にコンピューターとその機械の利用者(通常は人間)の間で
の情報をやりとりするためのインタフェースである。 - Wikipedia -
???
UIとは
コンピュータ
コンピュータと人間の関係を円滑にするもの
人間
なぜいまUIデザインが
重要なのか
昔に比べて機械と話す時間が増えてるから
一番ユーザーと距離が近いものなので
UIが重要なのは当たり前!
UIデザイナーの求人が増えてる
一年前はUIデザイナーの募集は
ほとんどなかった(日本)
シリコンバレーではデザイン会社が
どんどん買収されている
デザイナー目当てで買収されたと
思われる案件がちらほら
UIに事業をフォーカスした理由
サンフランシスコで働いていて感じたこと
サンフランシスコ、シリコンバレーの
スタートアップはβ版の段階から
UIにかなり力を入れている
UIは差別化の対象になる!
良いUIとはなにか?
・直観的に操作できる
・ユーザーの学習コストが低い?
・グラフィック(GUI)の精度が高い?
・ユーザー中心設計?ユーザービリティ?
・トレンドを追うこと?
・ラベリング
・インタラクション
全部大事
UI次第で
使いやすくも、使いにくくもなる
機能や得られる結果が一緒でも
ユーザーの満足度が高くなる
Twitterクライアント
タスク管理
天気アプリ
僕のiPhone
UIのデザインプロセスって
どうあるべき?
ベスト・プラクティスってあるの?
案件(サービス)の内容によって違う
GunosyのUIデザインはどうだったのか?
Gunosyとの出会い
2年前のサンフランシスコで
後にGunosyを作る関くんとシリコンバレーで
GoogleやFacebookなどを訪問
Gunosyのリリース当初のデザイン
「ロゴはPowerPointでつくりました」
( ゚Д゚)マジデ
GunosyのUI設計デザインプロセス
最初のPC・スマホWeb版は
ほぼデザインプロセスはなし
タダで受けてたので時間も掛けられなかった。
デザインはグッドパッチ側でほぼ勝手に考える
GunosyのUIは
とにかくCoolだと思われるようにデザイン
1、ペーパープロトタイピング ←
→
iPhoneアプリからはデザインプロセスが
UI設計
インタラクション
→
2、コア機能のプロトタイプ  ←
→
3、デザインパターン
4、実装
Ver2.0からは効率化するためのツールも
Git Slicy Kickoff
PSDのバージョン管理 スライス作業効率化 チャット&タスク管理
詳しくはMEMOPATCHの記事を見てね
Ver2.0ではフラットデザインを採用
iOS7よりも前にレイヤー階層構造を取り入れる
UIを考える上で各フェーズのターゲットユーザーに
どう見られるかは気にしていつも考えていた。
アーリーアダプター層
Gunosyのブランド価値を最大化するためのUI
アーリーマジョリティ層
イノベーター層
iPhoneアプリ 1.0
iPhon...
グッドパッチの
UI設計デザインプロセス
1、企画・コンセプトメイキング
2、UI設計・ペーパープロトタイピング
3、コア機能のプロトタイプ
4、ユーザーテスト
5、デザインパターン
6、フロントエンド実装
Web案件の最近のフロント実装はバックエンド側はAPIを
作ってもらいAPIの...
プロトタイプを作る
HTMLプロトタイプを作る
→時間の制約やリソースの兼ね合いで
 HTMLプロトタイプを作るのは
 効率的ではない場合もある。
最近は便利なプロトタイピングツールが沢山ある
FLINTO
BRIEFS
17,000円
グッドパッチの文化
素晴らしいソフトウェアには必ずお金を払う
ハートに響くUIを作るための
グッドパッチの取り組み
グッドパッチ共有グループ
MEMOPATCH
デザインレビュー(Design Review)
Googleでは、コードレビュー(Code Review)が
必須とされている。プログラムを書いたら
チームでレビューし承認されないとコミット出来ない。
これによりソースコードの品質を保っている。...
最初はFacebookにデザインチェック
というグループを作ってやっていたが
あまりに使い勝手が悪いので
自分たちでツールを開発
その名も
Dispatch
日本語訳すると「処刑する」
長谷川恭久さんとこれからのUIを考える
Patch Project
グッドパッチが求める理想のUIデザイナー像
1、サービスが提供されるContextが理解できること
ターゲットは誰なのか?どんなシチュエーションで利用されるのか?何がゴールなのか?
サービスが提供される背景を理解してUIを設計・デザインする
2、UIに関する選択肢(引き出し)をたくさん持...
グッドパッチがUIを作る上で
重要視しているポイント
コンテンツ(サービスの中身)が第一
本質的な価値を理解して最適なUIを作る
新しい体験を提案する
絞る&突き抜ける
GUIも体験を決める
重要な要素
これからのUIについて
よりコンテンツが重要に
コンテンツを最大限に活かすUI
ユーザーの使い方は日々変わる
昔のユーザビリティ理論に縛られない
ハートに響くUIを作りたいなら
自分が何に震えたか
常にメモっておく
Pathのボタンの動きは
Pixarのアニメーションを参考にしてる
What is the design process at Path? via Quora
http://www.quora.com/Path/What-is-the-desi...
素晴らしいUIのヒントは日常に隠されている
Goodpatchのビジョン
世界で有名なIDEOやFrog Designも
プロダクトデザインからのデザインだ
グッドパッチは最初からソフトウェアというより
WebでのUIデザインからスタートした会社
そこから世界的なデザインの会社にのし上げたい
グッドパッチでは引き続き仲間を募集しています。
UIデザイナー ディレクター iOSエンジニア
Javaエンジニア 広報・PR
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
Prochain SlideShare
Chargement dans…5
×

WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」

214 080 vues

Publié le

WebSig会議 vol.33:
http://websig247.jp/meeting/33/
2ndセッション
ハートに響くUIを生み出すためのデザインプロセス
/土屋尚史(株式会社グッドパッチ 代表取締役)

Publié dans : Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」

  1. 1. ハートに響くUIを生み出すための デザインプロセス 株式会社グッドパッチ 土屋尚史
  2. 2. 自己紹介 Goodpatch Inc. 株式会社グッドパッチ 代表取締役 土屋 尚史 Twitter @tsuchinao83 はUIの会社です。
  3. 3. ブログも書いてます http://likeasiliconvalley.tumblr.com/
  4. 4. 簡単に略歴を紹介 シリコンバレーに伝手なし、英語喋れない、初海外 知り合いにSan Franciscoのbtraxを紹介してもらいインターン San Franciscoから帰国後グッドパッチを創業 半年でうまく行かなくなりUIに事業をフォーカス 共同創業者が渋谷の大手ネット企業に転職 大阪のWeb制作会社のディレクター 2年半前に突如シリコンバレーに行くことを決意
  5. 5. 残りの資金3ヶ月でたった1人になる Gunosyがメディアで取り上げられ復活 仕事も人も増えたが自転車操業状態で銀行残高4万円に ギリギリの状態で某大手通信社の案件が決まる そこから人をさらに増やし1年で社員は20数名に イマココ
  6. 6. ついてます
  7. 7. UIとは?
  8. 8. UI (User Interface) とは UIとは機械、特にコンピューターとその機械の利用者(通常は人間)の間で の情報をやりとりするためのインタフェースである。 - Wikipedia - ???
  9. 9. UIとは コンピュータ コンピュータと人間の関係を円滑にするもの 人間
  10. 10. なぜいまUIデザインが 重要なのか
  11. 11. 昔に比べて機械と話す時間が増えてるから
  12. 12. 一番ユーザーと距離が近いものなので UIが重要なのは当たり前!
  13. 13. UIデザイナーの求人が増えてる 一年前はUIデザイナーの募集は ほとんどなかった(日本)
  14. 14. シリコンバレーではデザイン会社が どんどん買収されている
  15. 15. デザイナー目当てで買収されたと 思われる案件がちらほら
  16. 16. UIに事業をフォーカスした理由
  17. 17. サンフランシスコで働いていて感じたこと サンフランシスコ、シリコンバレーの スタートアップはβ版の段階から UIにかなり力を入れている
  18. 18. UIは差別化の対象になる!
  19. 19. 良いUIとはなにか?
  20. 20. ・直観的に操作できる ・ユーザーの学習コストが低い? ・グラフィック(GUI)の精度が高い? ・ユーザー中心設計?ユーザービリティ? ・トレンドを追うこと? ・ラベリング ・インタラクション
  21. 21. 全部大事
  22. 22. UI次第で 使いやすくも、使いにくくもなる 機能や得られる結果が一緒でも ユーザーの満足度が高くなる
  23. 23. Twitterクライアント
  24. 24. タスク管理
  25. 25. 天気アプリ 僕のiPhone
  26. 26. UIのデザインプロセスって どうあるべき? ベスト・プラクティスってあるの? 案件(サービス)の内容によって違う
  27. 27. GunosyのUIデザインはどうだったのか?
  28. 28. Gunosyとの出会い 2年前のサンフランシスコで 後にGunosyを作る関くんとシリコンバレーで GoogleやFacebookなどを訪問
  29. 29. Gunosyのリリース当初のデザイン
  30. 30. 「ロゴはPowerPointでつくりました」 ( ゚Д゚)マジデ
  31. 31. GunosyのUI設計デザインプロセス 最初のPC・スマホWeb版は ほぼデザインプロセスはなし タダで受けてたので時間も掛けられなかった。 デザインはグッドパッチ側でほぼ勝手に考える
  32. 32. GunosyのUIは とにかくCoolだと思われるようにデザイン
  33. 33. 1、ペーパープロトタイピング ← → iPhoneアプリからはデザインプロセスが UI設計 インタラクション → 2、コア機能のプロトタイプ  ← → 3、デザインパターン 4、実装
  34. 34. Ver2.0からは効率化するためのツールも Git Slicy Kickoff PSDのバージョン管理 スライス作業効率化 チャット&タスク管理 詳しくはMEMOPATCHの記事を見てね
  35. 35. Ver2.0ではフラットデザインを採用 iOS7よりも前にレイヤー階層構造を取り入れる
  36. 36. UIを考える上で各フェーズのターゲットユーザーに どう見られるかは気にしていつも考えていた。 アーリーアダプター層 Gunosyのブランド価値を最大化するためのUI アーリーマジョリティ層 イノベーター層 iPhoneアプリ 1.0 iPhoneアプリ 2.0 Web版スマホ版
  37. 37. グッドパッチの UI設計デザインプロセス
  38. 38. 1、企画・コンセプトメイキング 2、UI設計・ペーパープロトタイピング 3、コア機能のプロトタイプ 4、ユーザーテスト 5、デザインパターン 6、フロントエンド実装 Web案件の最近のフロント実装はバックエンド側はAPIを 作ってもらいAPIの組込みからグッドパッチでやるような形も多い。 フロントとバックが完全に分離できるのでややこしくならない。
  39. 39. プロトタイプを作る HTMLプロトタイプを作る →時間の制約やリソースの兼ね合いで  HTMLプロトタイプを作るのは  効率的ではない場合もある。 最近は便利なプロトタイピングツールが沢山ある
  40. 40. FLINTO
  41. 41. BRIEFS 17,000円
  42. 42. グッドパッチの文化 素晴らしいソフトウェアには必ずお金を払う
  43. 43. ハートに響くUIを作るための グッドパッチの取り組み
  44. 44. グッドパッチ共有グループ
  45. 45. MEMOPATCH
  46. 46. デザインレビュー(Design Review) Googleでは、コードレビュー(Code Review)が 必須とされている。プログラムを書いたら チームでレビューし承認されないとコミット出来ない。 これによりソースコードの品質を保っている。 グッドパッチではデザインの品質を保つために 全スタッフに案件を共有し、 全員でデザインのレビューを行なっている
  47. 47. 最初はFacebookにデザインチェック というグループを作ってやっていたが あまりに使い勝手が悪いので 自分たちでツールを開発
  48. 48. その名も Dispatch 日本語訳すると「処刑する」
  49. 49. 長谷川恭久さんとこれからのUIを考える Patch Project
  50. 50. グッドパッチが求める理想のUIデザイナー像
  51. 51. 1、サービスが提供されるContextが理解できること ターゲットは誰なのか?どんなシチュエーションで利用されるのか?何がゴールなのか? サービスが提供される背景を理解してUIを設計・デザインする 2、UIに関する選択肢(引き出し)をたくさん持っていること。 UIというのは考えてひねり出すというよりも、色々な情報を持っていて、それをうまく組み合わせて最適なUIを提案できる ことが重要である。それは必ずしもアプリだけでなく、家電や自動車やSF映画など色んなところにある情報を持っていて、 それをUIに反映できる能力が必要 3、徹底的にユーザー目線に立てること 常にユーザー側の視点に立ち、使いやすい使いたくなるUIを提案する。 4、データを元に仮説を立て、検証して、改善ができること 日々のサービス運営のデータから課題を抽出し、仮説を立て、検証しサービスがより良くなるためにアイデアを出せる。 5、驚きを与えること ユーザーやクライアントに少しでも驚きを与える印象に残るUIを心がけてデザインをする。
  52. 52. グッドパッチがUIを作る上で 重要視しているポイント
  53. 53. コンテンツ(サービスの中身)が第一 本質的な価値を理解して最適なUIを作る
  54. 54. 新しい体験を提案する
  55. 55. 絞る&突き抜ける
  56. 56. GUIも体験を決める 重要な要素
  57. 57. これからのUIについて
  58. 58. よりコンテンツが重要に コンテンツを最大限に活かすUI
  59. 59. ユーザーの使い方は日々変わる 昔のユーザビリティ理論に縛られない
  60. 60. ハートに響くUIを作りたいなら
  61. 61. 自分が何に震えたか 常にメモっておく
  62. 62. Pathのボタンの動きは Pixarのアニメーションを参考にしてる What is the design process at Path? via Quora http://www.quora.com/Path/What-is-the-design-process-at-Path
  63. 63. 素晴らしいUIのヒントは日常に隠されている
  64. 64. Goodpatchのビジョン
  65. 65. 世界で有名なIDEOやFrog Designも プロダクトデザインからのデザインだ グッドパッチは最初からソフトウェアというより WebでのUIデザインからスタートした会社 そこから世界的なデザインの会社にのし上げたい
  66. 66. グッドパッチでは引き続き仲間を募集しています。 UIデザイナー ディレクター iOSエンジニア Javaエンジニア 広報・PR

×