モバイルアプリの インタラクションプロトタイピング

2016.01.23

- 高速に仮説・実行・検証サイクルを回すために -

Keisuke Tada多田 圭佑 デザイナー

Holiday のプロダクト全般を担当 最近は iOS アプリ開発がメイン

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

価値のあるプロダクトをつくるために

速さ 品質×

価値のあるプロダクトをつくるために

速さ

品質

・価値を発見する

・ユーザの変化に適応する

・価値を正しく届ける

・価値を高める

価値のあるプロダクトをつくるために

速さ

品質

・価値を発見する

・ユーザの変化に適応する

・価値を正しく届ける

・価値を高める

どうやって？

仮説

実行検証

仮説

実行検証

細かく 何回も

仮説

実行検証

モバイルアプリの場合

開発工程

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

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

g試行錯誤…

開発工程

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

g C g進めてまた 試行錯誤…

開発工程

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

g C g C g C g

開発工程

開発工程

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

g C g C g C g完成！

開発工程

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

g C g C g C g完成？

なんか違う…

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

g C g C g C gP開発工程

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

g C g C g C gC

PC画面設計からやりなおし…

開発工程

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

g C g C g C gW

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

開発工程

W W

仮説

実行検証

速くしたい！

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

開発工程

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

動作モック

実機で触って動かせるもの

CCC

開発工程

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

動作モック

g

CCC

仮説検証を繰り返す ・議論 ・ユーザテスト、ヒアリング

開発工程

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

動作モック

g

CCC

仮説検証を繰り返す ・議論 ・ユーザテスト、ヒアリング

できあがりのイメージがしやすいため 早い段階で確認できることが多い

開発工程

・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/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode)

ページベース

動作モック

・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode)

ページベース

各レイヤーが独立して動く

レイヤーベース・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode

・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode

動作モック

レイヤーベース・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode)

ページベース

Flinto/InVision/Prott

Flinto/InVision/Prott

Pros

Cons

・少ない手間で実機で動くモックを作れる

・チーム内での共有がしやすい

・複雑なインタラクションは作れない

k

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

1

2

C C C

C C C

1

2

C C C

C C C

1

2

C C C

C C C

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

・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode

動作モック

レイヤーベース・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode)

ページベース

HTML + CSS + JS

HTML + CSS + JS

Pros

Cons

・実際のコンテンツを何パターンも表示しやすい

・インタラクションの表現の自由度が高い

・ページの遷移のパターンを試す用途では過剰

・インタラクションの精度を高めるのは結構たいへん

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

・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode

動作モック

レイヤーベース・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode)

ページベース

Flinto for Mac

Flinto for Mac

Pros

Cons

・普通の画面遷移から凝ったインタラクションまで

・精度の高いプロトタイプを素早く作ることができる

・表現できないインタラクションもある

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

・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode

動作モック

レイヤーベース・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode)

ページベース

Xcode

Xcode

Pros

Cons

・なんでもできる

・手間がかかる

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

Xcode：おまけ

Tweaks（ライブラリ）

・値をアプリ上で変更できる 　・アニメーションの変数、文字サイズ、色など

・外で使っている時などに UI を調整できる 　・最後の詰めの段階で品質向上の役に立つ

・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode

動作モック

レイヤーベース・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode)

ページベース

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

動作モック

g

CCC

仮説検証を繰り返す ・議論 ・ユーザテスト、ヒアリング

開発工程

確かめたいことによって プロトタイプを作り分ける

仮説

実行検証

細かく 何回も

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