モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために

モバイルアプリの
インタラクションプロトタイピング
2016.01.23
- 高速に仮説・実行・検証サイクルを回すために -

Keisuke Tada
多田圭佑デザイナー
Holiday のプロダクト全般を担当
最近は iOS アプリ開発がメイン

ユーザに価値を届ける
プロダクトをつくる

価値のあるプロダクトをつくるために
速さ品質×

速さ
品質
・価値を発見する
・ユーザの変化に適応する
・価値を正しく届ける
・価値を高める

速さ
品質
・価値を発見する
・ユーザの変化に適応する
・価値を正しく届ける
・価値を高める
どうやって？

仮説
実行検証
細かく
何回も

仮説
実行検証
モバイルアプリの場合

開発工程
画面設計ビジュアルアニメーション実装

試行錯誤…
開発工程

進めてまた
試行錯誤…
開発工程

開発工程

開発工程
完成！

開発工程
完成？

画面設計からやりなおし…
開発工程

できあがりのイメージがしづらいため
それぞれの行程で問題に気づきにくい
開発工程

仮説
実行検証
速くしたい！

動作モック
実機で触って動かせるもの
開発工程

動作モック
仮説検証を繰り返す
・議論
・ユーザテスト、ヒアリング
開発工程

動作モック
・議論
できあがりのイメージがしやすいため
早い段階で確認できることが多い
開発工程

・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode
動作モック
レイヤーベース
・Flinto/InVision/Prott
・Flinto for Mac
・HTML + CSS
・Storyboard (Xcode)
ページベース

・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode
動作モック
ページが切り替わる
・Flinto for Mac
・HTML + CSS
ページベース

動作モック
・Flinto for Mac
・HTML + CSS
ページベース
各レイヤーが独立して動く
・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode

Flinto/InVision/Prott
Pros
Cons
・少ない手間で実機で動くモックを作れる
・チーム内での共有がしやすい
・複雑なインタラクションは作れない

実際に端末で触ってみることで
画面の抜け漏れがないか確認

1
2
複数パターンのフローを触って
遷移の分かりやすさを確認

HTML + CSS + JS
Pros
Cons
・実際のコンテンツを何パターンも表示しやすい
・インタラクションの表現の自由度が高い
・ページの遷移のパターンを試す用途では過剰
・インタラクションの精度を高めるのは結構たいへん

違うレイアウトで複数コンテンツを
見た時の感じ方を確認

Flinto for Mac
Pros
Cons
・普通の画面遷移から凝ったインタラクションまで
・精度の高いプロトタイプを素早く作ることができる
・表現できないインタラクションもある

実際のアプリに近い動きで
UI の分かりやすさを確認

Xcode
Pros
Cons
・なんでもできる
・手間がかかる

ユーザの入力と表示が組み合わさる
高精度プロトタイピング

Xcode：おまけ
Tweaks（ライブラリ）
・値をアプリ上で変更できる
・アニメーションの変数、文字サイズ、色など
・外で使っている時などに UI を調整できる
・最後の詰めの段階で品質向上の役に立つ

動作モック
・議論
開発工程
確かめたいことによって
プロトタイプを作り分ける

ご静聴ありがとうございました

Related slideshows