デザイナー。
- アプリデザインに役立つプロトタイピング
- プロトタイピングとは
フェンリル デザイン部
- UIデザイナー
流れ
- プロトタイピングとは
- アプリ開発の問題点
- プロトタイピングの実施
- プロトタイプ作成例
- プロトタイピングツール比較
プロトタイピングとは
シュミレーションを目的とした試作品を用いたソフトウェア開発手法
低精度プロトタイピング
- 動作モックレベル
- 紙芝居
高精度プロトタイピング
- 実際に機能する暫定システムレベルのプロトタイピング
→こんかいは低精度のほうについて取り上げる
アプリ開発の問題点
- 受託開発がメイン
- アプリ作って→作った→使いづらいよね…(☆1個のレビューなど)
- 競合他社に負けられない 失敗できない 早くアプリを出したい
- 品質 開発スピードも重視
アプリ開発フローの見直し
- 企画→デザイン→実装→リリース(ウォーターフォール)
- スケジュール組みやすい 予算が立てやすい
- この開発フローではあまり品質よくなかったりする
- 使い勝手が確認できない
- 手戻りコストが大きい(巨大なサンクコストに対応できない)
- フェーズがあとになればなるほど変更しづらくなる
- その解決策としてのプロトタイピング
- 手戻りの削減、実装前にわかりやすくする
プロトタイピングの内容
- ペーパープロトタイピング
- アプリ開発のときに紙にインターフェースを手書きする
- ラフ図でもってだいたいどんなものを作るか
- 紙で作るので切り離しや書き足し、修正も簡単
- みんなで作ることができる
- 紙芝居をしっかり作る
- エンドユーザーのレビュー テスト
- 迷うところなどを洗い出す
- iPhoneアプリのナビゲーション考察
実例 カーシェアリングサービス
- 急に車が必要になったユーザーが手元のスマートフォンで付近にあるすぐに使える自動車をすばやく使える
iPhoneアプリのナビゲーションタイプ
ユーティリティ型
- 明快
- あんまり機能を詰め込めない
- ナビゲーション型
- 構造化できる
- 階層が深くなって複雑になりがち
- タブ型(AppStore)
- コンテンツを多く扱える
- ナビゲーション型の内包
- 拡張性が最大5つで少ない
- 大型になりがち
- ドロワー型(Gmail)
- タブより多くの数のコンテンツを入れられる
- 実装コストが高い
- 階層が深くなりがち
- 没入型
- ユーザーを体験に没頭させられる
- 工数予算がかかる
- UIマナーから逸脱しやすいので使いづらくなりがち
ペーパープロトタイピングを複数案つくる
- ユーティリティ型 1 (予約済みを最初に表示する)
- ユーティリティ型 2
- タブ型(短所とくにないか)
ドロワー型(拡張しやすい)
アプリのゴールは、付近にあるすぐに使える車を素早く見つけること
- 重要視されるべきは車をすぐに見つけ、見逃さないこと
- 思考のビジュアル化
- より明確に比較検討することで目的に沿った最適なUIを導き出せる
- エンジニアにも客にも納得できるものが作れる
プロトタイピングツール比較
- 結構いろいろなプロトタイピングツールがある
- POP(シンプル スマホのみで完結できる)
- Prott(値段高い スケッチなどの機能が豊富 日本語サポート)
Pixate(ほぼ無料 トランジションが豊富 細かいアニメーションなどが作れる 端末上に保存してシェアできる)
どれが良いかは状況や目的による
- シンプルにPOP
- プレゼンしたいときはPixate
まとめ プロトタイピングとは
- クライアントやユーザーとの意思疎通を行うためのもの
- 高いレベルでの認識あわせや潜在的なニーズの洗い出し
- クライアント ユーザー両方に満足してもらえるものを開発できる
