[&] CSS Nite LP33 #7
CSS Nite LP33
----------------
問題解決のためのプロトタイピング 深津 貴之（ギルド）
すごいいろんな人のイベントで、最後の話しを仰せつかったのですが、
もう喋ることないんじゃないかと思っていますが。。。。。
自己紹介UIデザイナー @fladdict
スマートフォンのUIを中心とした制作を中心としたチームで、
カメラのアプリ、リブレという日記アプリ、テレビ局キャンペーンアプリ、フリフリTV
iPhoneアプリ設計の極意、モバイルデザインパターン
自社ではプロトタイピングだけでなくツールから作ろう、
定規、ノート、デザインテンプレートも自分たちで作ったりしています。
なぜプロトタイピング？
トレンドの変化、時代のスピードの上昇
アプリケーションをつくっても、すぐにライバルが登場したり、
すぐにシェアが変わってきたり、
ウォーターフォールでは間に合わない
作っている間に状況が変わってきてしまう。
評価と検品が最後だと危険すぎる
自分たちが売れるものを作っているのかわからなくなる。
プロトタイピングを一番最初にやれば、方向転換もできる。
リスクを避けるためのプロトタイピングとは？
よいプロトタイピング
早期にリスク検証。テストファースト
問題を分割したプロトタイピング
よく作ろうと考えると、データベースにつないでいないだけで、ほぼ完成版を想像しますが、
もしろ必要なのは、問題を分割した細かいプロトタイプ
ドロワーが良いのか、タブで作った方いいのか？
縦スクロールがいいのか？横スクロールの部分だけをつくって試すとか。
問題ごとに分けて作るのが良いプロトタイピング
下手するとプロト自体が、ウォータフォールにならないように。
●本質に特化。
全部入りプロトタイピングの話し、危険かどうか？ユーザーが欲しいかどうか？
設定画面の中までつくりこんでしまったり、
実際は、設定や画面がきたなくても、プロジェクトが失敗するかしないかにおいては、
どうでもいいところ。
サブ機能にはコストをかけないで、アプリのコア機能のところにプロトタイプを沢山つくっていく。
ダメなプロトタイピング、アンチパターン
●一球入魂
ジャストアイデアみたいな、一個しか作らないのは良くない。
ダメだと解っていても作りつづけるようなことになる。
プロトタイピングする時は、問題を分割して、リスクを分割して小さいものを沢山つくる。
●モニタ上で作業が完結
最近はツールが発達しているので、モニタ上だけでも良いのですが、
PCでプロトタイプで作ったものだと、ボタンが押せると押せないかわからないとか、
最近は技術が進歩しているので、Photoshop の画像を転送したりできるので、
使いやすくなってきています。
モニタだけのプロトタイプは大きな弱点があって、チームで作るとか、
チームでシェアするのが難しくなる。
プロジェクトの最初の段階で、ああでもないこうでもないと考えながらプロトタイプできない。
モニタを囲んで作れない、誰かが作ったのが確認するだけ、
単なるオペレーターになってしまう。
●プロジェクトの品質が他人事になりやすい。
プロトの段階でチーム全体で、
全員で危機感を持つためにも、必要
紙やホワイトボード、できるだけ皆が同時に関われることが重要
●スーパーゴージャス
機能ありすぎ、機能はないのにアニメーションだけが凄いとか。
ゴージャスなものが全部だめなわけではなく、
クライアントプレゼンで、お金をひっぱるために作るのであれば、よい。
偉い人を説得するには良い。
そういうのは、プロジェクトのゴーサインをもらうために必要なもので、
チーム内で作るには時間とリソースがもったいない。
じっさいそいう良いプロトタイプを作るには？
fladdict 式メソッド
プロトタイピングのコツ
一番初期のフェーズに特殊なスキルが無くても皆でできるもの、
●みんなでやる
シンプルであること、ツールが気軽で特殊なスキル無しで使えること、
そういうプロトタイピングが終わったら、それぞれチームの中のエキスパートがやれば良い。
持って帰れるメソッドを。
●プロコン・リスト
UIやUXの教科書に載っているようなことではない。
他の分野から、UI/UX で使えることをそしゃくして使えるようにしている。
長所と短所を列挙したリスト
プロコンリスト
長所
客観的に評価
簡単に行える
チームで共有しやすい
短所
感覚面の評価ができない
正確な重み付けが難しい
つりあいの取れる長所と短所をセットで消していき、
どっちが重いか？
最終的に「チームで共有しやすい」が残り、やる方がメリットが多いということがわかる。
思い込みにブレーキをかけ、客観的評価の機会を作る。
もりあがって、欠点を考えないで、すすめてしまわないよう。
アプローチごとに長所と短所のリストを列挙して、
その後に深呼吸して考えることで、安全弁になるメソッド
思い込みにブレーキをかけ、客観的評価の機会を作る
いろんなメソッドを集めるのが好きで調べているのですが、
詳しく無くても、即実行できるものです。
●プレス・ファースト
これもプロトタイピングに入るかどうかわからないのですが、
商品の前に疑似プレスリリースを作る。
それをメディアに送ったりしないのですが、
そのインチキプレスリリースを見てもらう。
疑似プレスリリースで、ユーザーの反応を見る。
商品無しに商品の需要を計れる。
トリッキーな方法に見えますが、
ユーザー視点の企画書をもう一回書き直しているようなもの。
これも強力なプロトタイピングの手法
●フィッシュボーン図
ふわっとした問題が、具体的な問題になり、
具体的な問題を解決する方法になります。
「ミスタップが多い」という具体的な問題
大問題、中問題を書きこんでいく。
中問題
機能がわからないからミスタップ
ボタンが小さいからミスタップ
小問題
文字のないボタンが多いからミスタップが多い
ボタンが小さすぎてとなりのボタンを押してしまうのでミスタップが多い
これはあくまで問題を分析して解析するためのツール
実際自分でやるときには、問題をブレイクダウンすると、
それらを解決するプロトタイプを作ると、具体的な問題に分析して、解決できる。
プロコンリスト
長所
複雑な問題を単純か
複数のアプローチを探せる
状況を俯瞰できる
短所
枝の精査／評価に時間がかかる
これらのメソッドをよく使っています。
ペーパープロトタイピング
長所
最速
リスク最小
費用が安い
みんなでできる
短所
アニメーションに弱い
遠隔共有に弱い
プロト図は技法なので、絵が苦手でも描ける
まっすぐ線がかけるツールが安心すると思っているかもしれないが、
プロト図は技法だと思っているので、絵が苦手でも描ける
鉛筆で描いたり消したり、書き直したり、わりと雑でOK
細いペンと太いペンで、清書をします。
線を引いただけでそれっぽくなる。
コンポーネントレベルは太い線、細かいところは細い線、
重要なところは太い線、ルールをわけるだけで読みやすくなる。
定規は好みで。
マーカーで、濃いマーカーと薄いマーカーで、
レベルわけして濃くするだけでそれっぽくなる。
絵が上手くなくても、ぱっと見でわかるようになる。
絵が下手な人でも 2-3枚かけばわかる。
描ければ楽しくなってくる。
スタートポイントとしては楽しくできます。
紙でプロトタイプをするのであれば、太い線、細い線、濃いペン、薄いペン、
簡単に綺麗なプロトタイピングが作れるのですが、
同じ要素を何度も描くのは面倒。
常に解決法はありまして、
ポストイットはペーパーの弱点を補完する
同じような画面があったときに、再利用できる。
コンポーネント、アラートとかをあらかじめ用意しておいてます。
周囲にあるものをすべて利用する
Flipboard 的アプリの場合は、
Xcode よりホッチキスを使う
文房具の星形シールとか使ったり。
必ず複数パターンを作る
ATMの送金アプリを考えた時のフィッシュボーン図
お金を送るUIであれば、おこる間違いを解析して、問題を対応するアプローチで
複数案を作る。
お金を送るまえに確認する、ポップアップだと情報が見えなくなる、
タップする代わりにスライドで送金するようにすれば、間違わなくなる。
あらかじめ、プロトタイピングの前にフィッシュボーン図をつくり、
別々の方式で検証していけば、
問題として認識していなかったことも、
解決したと思ったことも、より深い解決にできたりする。
プロコンリストで一番いいものを探す。
プロトタイプは作るだけでなく、比較して検証することが一番大事
検証と比較はプロトタイプの両輪
●紙から先へ
だいたいできたかなとなってから、
チームで共有できないとか、インタラクションがわからないとか。
POPというツールを使っています。
https://popapp.in/
紙で描いたプロとでインタラクティブ性が確かめられる。
長所
コストがきわめて低い
高フットワーク
スマホだけでできる
チームで参加できる
ポップアップも、タブもポストイットを使っています。
実際は設計しているので作ったり壊したりしているのですが、
一回ペーパープロトができれば、20-30分で取り込んでリンクをつけて、
コストパフォーマンスが良いツールだと思います。
POPの人と仲良くなったので、ビデオレターをもらいました。
POPは台湾のスタートアップで、アメリカに行って、YouTube 関連のVCに買われた？
POPからのメッセージ
------------------------------------------------------------------------------
これからの新規を紹介させてくだしい。
もともと5年毎に作り始めて、いろいろ作っていたのですが、
最初に始めたころは大きな失敗を繰り返していました。
作る前に全くテストしないで作っていて、
なんかおかしんじゃないかと思って、問題を解決するために、
いろんなツールを探してみましたら、解決するツールはありませんでした。
2012年ぐらい、簡単に使えるものが部品を組み合わせるだけで、
出来合いのものは作れたが、ペンと紙で作れるツールを作ったのがこの POP です。
ペンと紙でアプリを作り始めて、紙は使いにくいし、共有しにくい、
自分たちでカメラで撮ってiPHoneに入れればいい、と
思いついて開発しました。
その頃はそういうツールが無かったので、友達と２人で作りました。
最近、アップデートして、もうすぐ 2.0 になる、
Dropbox と連動するし、自動シンクするように、
日本語を含む New バージョン、アンドロイドも。
POP からプレゼント
プロジェクト作成上限を無料プレゼント
popaapp.in のリンクと一緒にツイート、support@popapp.in へメール
●手触りのプロトタイプ
手触り専門のプロトはプレゼン以外ではまず必要ない
プロトタイピングはリスクを最小化と、作っているものが良いのか評価するためのもので、
「ふわん」とするとかは、重要ではない。
Flipborad のようなものではなければ重要ではない。
Flash や Xcode ではチーム全体で作れない。
自分は Flash 使えるが、プロトで使うのは封印している。
チームで共有できる動きのモックはどうするか？
豪華なアニメーションのデモ、
キーノートで作ってます。
iPhone のスクリーンサイズでキーノートのアニメーションを活用。
これだけ動けば、いいデモになる。
モーション最強のプロトツールは Keynote.
QuickTime にエクスポートして、その動画を iPhone で再生すれば、
何時間もかける必要がない。
全部アニメーションの検証もできる。
●Xcode を使うプロト、
データが動的なとき、待ち時間の検討をしなければいけないとき
ドラッグやピンチなどジェスチャや複雑な操作があるとき
基本的に紙で良い、遷移は POP, 高度なアニメーションは Keynote
大げさなツールを使わなくてもチーム全員が使える。
●まとめ
プロトの本質は、最初に可能性を模索するのが一番大事。
地雷を外すのが大事、
ビジョンを共有する。
このビジョンを共有するために、高度すぎるツールは使わないように、
プロトの時は、問題を細かく分割して、いろんなアプローチを考え、
長所と短所を比較して、ベストを探す、
紙やPOPはどうでもよくて、自分の使いやすいツールを使う、
ベストを模索する。
それが紙であってもなんでも良く、
紙だって、そのまま書くひとも、切り取って書く人もいる。
皆さんがやりやすい方法でやればよい。
まずはじめてみよう。
30分使うだけで、成果物は大きく変わる。
.JPG)
