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

～Google Play ベストオブ2016特集～

効率よく、品質よく、アプリを育てよう。

Prott User Meetup Vol.16

2017.1.18

株式会社ネクスト

小林武蔵

Out Line

• 自己紹介

• サービスの紹介

• なぜベストに選ばれたのか

• Prott を活用した事例

• Prott のこんな使い方

• テーマについて考える

自己紹介

こばやしむさし

小林武蔵

デザイナーAndroid UI/UX

東京都出身

犬、写真

サービスの紹介

HOME’Sのビジョン

より良い住生活のために優れた情報を提供し、「最高のマッチング」を永続的に支援する。

HOME’S Android App の変遷

Ver.1 Ver.2 Ver.4~5マテリアル対応

ベストアプリ

2010.xx 2010.05 2014.09 2016.11

Ver.3リニューアル

なぜ、ベストに選ばれたのか

実際はわからないので、Androidアプリ開発メンバーの想像です。

• ユーザーの声に応える（レビューへの対応など）

• テストの徹底とクラッシュログ管理

• マテリアルデザインガイドラインの徹底

• 新しい技術に取り組み続けること（Android Wear・Firebase）

• スピードを持って対応する（更新性の高さ）

• ビジョンを掲げ、邁進している

• APIのマイクロサービス化で開発効率UP

• etc

テストの徹底、クラッシュ管理、

ビジョンを掲げ邁進する、挑戦するなど

効率よくユーザーとのコミュニケーション、

ガイドライン徹底、スピード対応など

品質よく

Prott を活用した事例

デザインチェック出しの工数削減繰り返す作業をぐっと圧縮


プロトタイピングツールを

使うまでは、HTML化して

実機で確認していたので

チェックを準備する工数が

恐ろしく掛かっていた…

1m

20m

2m

1m

画像書き出し

HTML化

サーバーにアップ

認証をつけて展開

Prott導入前


Prott導入後

画像書き出し

Prott にアップ

遷移を追加

認証をつけて展開

1m

30s

2m

1m

劇的に削減!精神衛生上、効果スゴイ！

マテリアルデザインに便利企画・制作・技術で共通認識を持つ


オーバーレイで表示されるよ！とか

アニメーションやタップ領域などの挙動もマテリアルデザインにおいてはとても重要

それを合わせてチェックし、伝えながら共有認識を持つのにも役立つ

このエリアをスワイプで表示されるよ！とか




上スクロール時はここで固定！だよ

下スクロール時はここで固定！だよ




スピードホットモックより早く、パターン出しとプラッシュアップ

施策内容の共有

仕様の読み込み

キックオフ

デザイン開始

施策開始の流れ

スピードホットモックより早く、パターン出しとプラッシュアップ

ホットモック

Prott モック

仮実装済

施策内容の共有の

タイミングで

作っちゃう

こんなこと考えてる！やりたいね！の段階で作っちゃうことも。

Prott のこんな使い方

遷移図を印刷して俯瞰する全画面（主要画面）入れて印刷

カラートーン、コンテンツが立っているかを見るのに便利

仕様ページに埋め込みで一元化仕様とモックを一緒に管理

属人化を減らし、次の施策に活かす

テーマについて考えるユーザー視点でのUI・UX設計のために

ユーザー視点でUI・UXを設計する方法

ユーザーになる

ユーザーになる

でも、これってスゴい難しい…

そのためにやる3つのこと

作業画面上だけではなく、実機で触れる（Prott）

ユーザーと同じ立場でサービスに触れる

ユーザーニーズを認識する

レビューやコメントから改善箇所の源泉を探す

ユーザーから意見をもらう

価値はユーザーが決めるフィードバックをもらい一緒に育てていく

ユーザーと一緒に作る

ユーザー視点でのUI・UX設計のために

ご静聴ありがとうございました質疑応答お手柔らかに！

懇親会で気軽にお声がけください！

Design

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