ハートに響くUIを生み出すための

デザインプロセス

株式会社グッドパッチ　土屋尚史

自己紹介

Goodpatch Inc. 株式会社グッドパッチ 代表取締役

土屋　尚史

Twitter @tsuchinao83

はUIの会社です。

ブログも書いてますhttp://likeasiliconvalley.tumblr.com/

簡単に略歴を紹介

シリコンバレーに伝手なし、英語喋れない、初海外

知り合いにSan Franciscoのbtraxを紹介してもらいインターン

San Franciscoから帰国後グッドパッチを創業

半年でうまく行かなくなりUIに事業をフォーカス

共同創業者が渋谷の大手ネット企業に転職

大阪のWeb制作会社のディレクター

2年半前に突如シリコンバレーに行くことを決意

残りの資金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

iPhoneアプリ 2.0

Web版スマホ版

グッドパッチの

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を提案できる

ことが重要である。それは必ずしもアプリだけでなく、家電や自動車やSF映画など色んなところにある情報を持っていて、

それをUIに反映できる能力が必要

3、徹底的にユーザー目線に立てること 常にユーザー側の視点に立ち、使いやすい使いたくなるUIを提案する。

4、データを元に仮説を立て、検証して、改善ができること 日々のサービス運営のデータから課題を抽出し、仮説を立て、検証しサービスがより良くなるためにアイデアを出せる。

5、驚きを与えること ユーザーやクライアントに少しでも驚きを与える印象に残るUIを心がけてデザインをする。

グッドパッチがUIを作る上で

重要視しているポイント

コンテンツ（サービスの中身）が第一

本質的な価値を理解して最適なUIを作る

新しい体験を提案する

絞る＆突き抜ける

GUIも体験を決める

重要な要素

これからのUIについて

よりコンテンツが重要に

コンテンツを最大限に活かすUI

ユーザーの使い方は日々変わる

昔のユーザビリティ理論に縛られない

ハートに響くUIを作りたいなら

自分が何に震えたか

常にメモっておく

Pathのボタンの動きは

Pixarのアニメーションを参考にしてる

What is the design process at Path? via Quorahttp://www.quora.com/Path/What-is-the-design-process-at-Path

素晴らしいUIのヒントは日常に隠されている

Goodpatchのビジョン

世界で有名なIDEOやFrog Designも

プロダクトデザインからのデザインだ

グッドパッチは最初からソフトウェアというより

WebでのUIデザインからスタートした会社

そこから世界的なデザインの会社にのし上げたい

グッドパッチでは引き続き仲間を募集しています。

UIデザイナー　ディレクター　iOSエンジニア

Javaエンジニア　広報･PR