[&] CSS Nite LP33 #6

CSS Nite LP33
----------------
ディレクター･デザイナーのためのプロトタイプ制作とシナリオ作り 土屋 尚史（グッドパッチ）

グッドパッチ
UIの設計とデザインに特化した会社です。
大企業だと、新規事業開発系、アプリ、サービスのUIなど。
UIの会社ではあるが、サービス企画、サービスデザインから、実行フェースまで。
Gunosy 初期のUIから、バージョン2.0 までのUIを担当
3年前にシリコンバレーで働いていたときに Gunosy の関さんと出逢って、
手伝うことになり、現在はトップベンチャーになって、
最近新しいバージョンが出て、炎上していますが.....
グットパッチがやったの？と言われていますが.....

ちなみに、UIが変わってから、使わなくなった人は？
レビューが荒れてますが、アップデートが入ってから、なんとか..
僕的にもショックだったんですが、彼らはキュレーションメディアではなく、
もっと上に行くということを決断したということで。今も応援しています。

MEMOPATH というブログもやっています。
http://memo.goodpatch.co/

シリコンバレーに、社員全員を連れていきます。
売り上げで1億円こえたら...
利益はそれほどでていなかったのですが、借り入れして、700万かけて
シリコンバレーに行きました。

サービスのプロトタイピングと、ストーリー設計の２つの話しをします。
チャットワークのモバイルアプリも、HTML/CSS/JavaScript で作ってみています。
チャットワークさん、iOSエンジニアが以内ので、アプリが出ないんです。

日に日に高まるプロトタイプの重要性、
プロトタイプの作成は、労力を投入する前にアイデアを検討するための手段

●目的
作ろうとしているサービスのニーズがあるかどうか？
ユーザビリティと設計の問題点の洗い出し
技術的な要件を固めるため
ターゲットユーザーから適切なフィードバックを得るため
チーム内（クライアント）との意識共有

今までのアプリ制作フローの問題点
社内に iOS エンジニアが居ない。

今までのアプリ制作の問題点
エンジニアがいないと動くプロトタイプが作れなかった

●ディレクターが動くことを想像せずに設計／デザイン
●動くモノになってから使いづらさに気づく
●エンジニアに意図が伝わらない

動くイメージできずにデザインするので
何度も手戻りが発生し、ユーザーテストの時間が削られ、
劣悪な出来のアプリがマーケットに。

各フェーズでプロトタイプを作成して
ユーザーテストを重ねればクオリティは上がる

非エンジニアでコードが書けないディレクターやデザイナーには
使うのが難しい。

グッドパッチで主に使われているプロトタイピングツール
POP
Flinto （作っているの日本人）Ecofone の人
Invision（Webのプロトタイプ、チームでコラボレーションする時）NYの会社、2年くらい。11億円VC調達
Prott （グッドパッチで作成中、来週中からクローズドβ）

設計段階からワイヤーフレームを Invision で管理して、
Invision ではリンクを設定することができる。
かなり情報共有の効率があがった。
コメントがつけれるのが便利
モバイルの方は使いづらい....

Prott も簡単に説明します。
スケッチのノートも、モバイルのアプリも出します。
最初もっと予定していた機能があったんですが、全然実装できなくて、
とりあえずプロトとして出すバージョンです。
チーム内でコメントがつけれるようになっていたり。
Flinto と Invision のいいとこ取り
Web アプリとして使えるようになる。
実際に動くモックが、簡単に作れるようになりました。

プロジェクトのフェーズごとに作るプロトタイプは変わる
サービス設計フェーズは、ペーパープトロタイピング　MVP

要件定義フェース、ワイヤーフレームモック
どういう情報が、どういう要素、APIの設計ができるくらいまで、

ビジュアルデザインフェース
デザインプロトタイプ、ユーザーにヒアリングしながら、テイストを決めていく。

ここまでのフェーズは Prott, Flinto, Invision
などのツールを使えば充分伝わる

単純な遷移は少なくなってきて、より、アニメーションが入ってきて、
インタラクションをゴリゴリやっているアプリの方がうれる。
一番難しいのはインタラクションの部分、
インタラクションプロトタイプになると、一気に難しくなる。

Framer.js アニメーションを作る
Hype　http://tumult.com/hype/
Origami 柔軟に作れるけどハードルが高い

After Effect で映像を作る
「ポンポンポン」と言われてもエンジニアがわからない。
Flash でアニメーションを作る

CAPPTIVATE.co いろんなアプリの動きのパターン、かなり勉強になります。

あとはひたすらコミュニケーション「ギュインとして、もっとヌルヌルに」

単純な遷移ではない、インタラクションデザインのスキルが
UIデザイナーに求められている。

全体のユーザーストーリーを考えてから、プロトタイピングしましょう。
カスタマージャーニーマップ、結構ハードルが高い
ラフマップから作ろう

ストーリーは一回考えて終わりではない
ユーザーが実際どうでしょう？というのをターゲットユーザーに聞いて
ストーリーを見直したり、ラフなマップを作って、
ストーリーを見直すのをひたすら回していく。

全体のストーリーを
段階的ストーリー、

ユーザーオンボーディング、
ユーザーが最初にサービスにおとづれた時に、
いかにサービスの最初の体験をさせ、ユーザーを優良顧客にしていくかのプロセス

User Onbord というサイト
http://www.useronboard.com/
ひたすらコメントとともに紹介しているサイト

uxarchive.com/
アプリのオンボーディングのプロセス

こういうプロセスを考えるのが重要。
スタートアップや新しくサービスを作るばあい、
最初からフルフルで機能を作ることはなく、競合よりも劣っている場合がおおい、
チュートリアルだけを考えるのではなく、サインナップをしてから、
どういうメール、メッセージがでるのか？　というところまでデザインする。
ユーザーが離れて戻ってこないのではなく、

Square Cash のプロセスが面白くて、
メールアドレスを入れて、メールを送ると、
スクエアが $1 あげる、
$1 を上げるので、デビッドカードのナンバーを入れると、会員登録を完了させる。
すごいシンプルな作り、

Design Better
Finto も良く考えられていて、
当然最初に画像を持っているわけではない、
プロジェクト作っても何も素材がない、
お試し画像をあらかじめ用意してある。
最初の素材がそのまんまチュートリアルになっていて、
競合サービスなのですが、パクろうと思っています。

パクるの大事です。

グッドパッチのUIデザイナーは全体を俯瞰してデザインをするために、
モバイルアプリは、Photoshop ではなく、Sketch を使用
http://www.bohemiancoding.com/sketch/

プロトタイプを作るのが前提ではない、
作っては壊して、
考える時間を多く作らずに、なるべく早く、動くプロトタイプを作る

今 30名、専任はエンジニア3名