読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

アプリデザインに役立つプロトタイピング まとめ #fdev_shimane

デザイナー。

  • アプリデザインに役立つプロトタイピング
  • プロトタイピングとは

フェンリル デザイン部

  • UIデザイナー

流れ

  1. プロトタイピングとは
  2. アプリ開発の問題点
  3. プロトタイピングの実施
  4. プロトタイプ作成例
  5. プロトタイピングツール比較

プロトタイピングとは

シュミレーションを目的とした試作品を用いたソフトウェア開発手法

低精度プロトタイピング

  • 動作モックレベル
  • 紙芝居

高精度プロトタイピング

  • 実際に機能する暫定システムレベルのプロトタイピング

→こんかいは低精度のほうについて取り上げる

アプリ開発の問題点

  • 受託開発がメイン
  • アプリ作って→作った→使いづらいよね…(☆1個のレビューなど)
  • 競合他社に負けられない 失敗できない 早くアプリを出したい
  • 品質 開発スピードも重視

アプリ開発フローの見直し

  • 企画→デザイン→実装→リリース(ウォーターフォール)
  • スケジュール組みやすい 予算が立てやすい
  • この開発フローではあまり品質よくなかったりする
  • 使い勝手が確認できない
  • 手戻りコストが大きい(巨大なサンクコストに対応できない)
  • フェーズがあとになればなるほど変更しづらくなる
  • その解決策としてのプロトタイピング
  • 手戻りの削減、実装前にわかりやすくする

プロトタイピングの内容

  • ペーパープロトタイピング
  • アプリ開発のときに紙にインターフェースを手書きする
  • ラフ図でもってだいたいどんなものを作るか
  • 紙で作るので切り離しや書き足し、修正も簡単
  • みんなで作ることができる
  • 紙芝居をしっかり作る
  • エンドユーザーのレビュー テスト
  • 迷うところなどを洗い出す
  • iPhoneアプリのナビゲーション考察

実例 カーシェアリングサービス

  • 急に車が必要になったユーザーが手元のスマートフォンで付近にあるすぐに使える自動車をすばやく使える
  • iPhoneアプリのナビゲーションタイプ

  • ユーティリティ型

  • 明快
  • あんまり機能を詰め込めない
  • ナビゲーション型
  • 構造化できる
  • 階層が深くなって複雑になりがち
  • タブ型(AppStore)
  • コンテンツを多く扱える
  • ナビゲーション型の内包
  • 拡張性が最大5つで少ない
  • 大型になりがち
  • ドロワー型(Gmail)
  • タブより多くの数のコンテンツを入れられる
  • 実装コストが高い
  • 階層が深くなりがち
  • 没入型
  • ユーザーを体験に没頭させられる
  • 工数予算がかかる
  • UIマナーから逸脱しやすいので使いづらくなりがち

ペーパープロトタイピングを複数案つくる

  • ユーティリティ型 1 (予約済みを最初に表示する)
  • ユーティリティ型 2
  • タブ型(短所とくにないか)
  • ドロワー型(拡張しやすい)

  • アプリのゴールは、付近にあるすぐに使える車を素早く見つけること

  • 重要視されるべきは車をすぐに見つけ、見逃さないこと
  • 思考のビジュアル化
  • より明確に比較検討することで目的に沿った最適なUIを導き出せる
  • エンジニアにも客にも納得できるものが作れる

プロトタイピングツール比較

  • 結構いろいろなプロトタイピングツールがある
  • POP(シンプル スマホのみで完結できる)
  • Prott(値段高い スケッチなどの機能が豊富 日本語サポート)
  • Pixate(ほぼ無料 トランジションが豊富 細かいアニメーションなどが作れる 端末上に保存してシェアできる)

  • どれが良いかは状況や目的による

  • シンプルにPOP
  • プレゼンしたいときはPixate

まとめ プロトタイピングとは

  • クライアントやユーザーとの意思疎通を行うためのもの
  • 高いレベルでの認識あわせや潜在的なニーズの洗い出し
  • クライアント ユーザー両方に満足してもらえるものを開発できる