Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prott user meetup 16 効率よく、品質良く、アプリを育てよう。

785 views

Published on

Prott user meetup 16 にて発表した資料。
prottを用いたアプリを効率よく、品質良く育てるコツ。

Published in: Design
  • Be the first to comment

  • Be the first to like this

Prott user meetup 16 効率よく、品質良く、アプリを育てよう。

  1. 1. ~Google Play ベストオブ2016特集~ 効率よく、 品質よく、 アプリを育てよう。 Prott User Meetup Vol.16 2017.1.18 株式会社ネクスト 小林武蔵
  2. 2. Out Line • 自己紹介 • サービスの紹介 • なぜベストに選ばれたのか • Prott を活用した事例 • Prott のこんな使い方 • テーマについて考える
  3. 3. 自己紹介
  4. 4. こばやし むさし 小林 武蔵 デザイナー Android UI/UX 東京都出身 犬、写真
  5. 5. サービスの紹介
  6. 6. HOME’Sのビジョン より良い住生活のために優れた情報を提供し、 「最高のマッチング」を永続的に支援する。
  7. 7. HOME’S Android App の変遷 Ver.1 Ver.2 Ver.4~5 マテリアル対応 ベストアプリ 2010.xx 2010.05 2014.09 2016.11 Ver.3 リニューアル
  8. 8. なぜ、ベストに選ばれたのか
  9. 9. 実際はわからないので、 Androidアプリ開発メンバーの想像です。 • ユーザーの声に応える(レビューへの対応など) • テストの徹底とクラッシュログ管理 • マテリアルデザインガイドラインの徹底 • 新しい技術に取り組み続けること(Android Wear・Firebase) • スピードを持って対応する(更新性の高さ) • ビジョンを掲げ、邁進している • APIのマイクロサービス化で開発効率UP • etc
  10. 10. テストの徹底、クラッシュ管理、 ビジョンを掲げ邁進する、挑戦するなど 効率よく ユーザーとのコミュニケーション、 ガイドライン徹底、スピード対応など 品質よく
  11. 11. Prott を活用した事例
  12. 12. デザインチェック出しの工数削減 繰り返す作業をぐっと圧縮
  13. 13. デザインチェック出しの工数削減 繰り返す作業をぐっと圧縮 プロトタイピングツールを 使うまでは、HTML化して 実機で確認していたので チェックを準備する工数が 恐ろしく掛かっていた… 1m 20m 2m 1m 画像書き出し HTML化 サーバーにアップ 認証をつけて展開 Prott導入前
  14. 14. デザインチェック出しの工数削減 繰り返す作業をぐっと圧縮 Prott導入後 画像書き出し Prott にアップ 遷移を追加 認証をつけて展開 1m 30s 2m 1m 劇的に削減! 精神衛生上、効果スゴイ!
  15. 15. マテリアルデザインに便利 企画・制作・技術で共通認識を持つ
  16. 16. マテリアルデザインに便利 企画・制作・技術で共通認識を持つ オーバーレイで表示されるよ!とか アニメーションやタップ領域などの挙動もマテリアルデザインにおいてはとても重要 それを合わせてチェックし、伝えながら共有認識を持つのにも役立つ
  17. 17. このエリアをスワイプで表示されるよ!とか アニメーションやタップ領域などの挙動もマテリアルデザインにおいてはとても重要 それを合わせてチェックし、伝えながら共有認識を持つのにも役立つ マテリアルデザインに便利 企画・制作・技術で共通認識を持つ
  18. 18. 上スクロール時は ここで固定!だよ 下スクロール時は ここで固定!だよ アニメーションやタップ領域などの挙動もマテリアルデザインにおいてはとても重要 それを合わせてチェックし、伝えながら共有認識を持つのにも役立つ マテリアルデザインに便利 企画・制作・技術で共通認識を持つ
  19. 19. スピード ホットモックより早く、パターン出しとプラッシュアップ
  20. 20. 施策内容の共有 仕様の読み込み キックオフ デザイン開始 施策開始の流れ スピード ホットモックより早く、パターン出しとプラッシュアップ ホットモック Prott モック 仮実装済 施策内容の共有の タイミングで 作っちゃう こんなこと考えてる!やりたいね!の段階で 作っちゃうことも。
  21. 21. Prott のこんな使い方
  22. 22. 遷移図を印刷して俯瞰する 全画面(主要画面)入れて印刷 カラートーン、コンテンツが立っているかを見るのに便利
  23. 23. 仕様ページに埋め込みで一元化 仕様とモックを一緒に管理 属人化を減らし、次の施策に活かす
  24. 24. テーマについて考える ユーザー視点でのUI・UX設計のために
  25. 25. ユーザー視点で UI・UXを設計する方法
  26. 26. ユーザーになる
  27. 27. ユーザーになる でも、これってスゴい難しい…
  28. 28. そのためにやる3つのこと
  29. 29. 作業画面上だけではなく、 実機で触れる(Prott) ユーザーと同じ立場で サービスに触れる
  30. 30. ユーザーニーズを 認識する レビューやコメントから 改善箇所の源泉を探す
  31. 31. ユーザーから意見をもらう 価値はユーザーが決める フィードバックをもらい 一緒に育てていく
  32. 32. ユーザーと一緒に作る ユーザー視点でのUI・UX設計のために
  33. 33. ご静聴ありがとうございました 質疑応答お手柔らかに! 懇親会で気軽にお声がけください!

×