Prott User Meetup vol.16を開催しました！
Google Play ベストオブ 2016特集
ProttはUser Meetupを定期的に開催して、サービスの開発・改善に欠かせないユーザーの皆様の声を直接聞く機会を大切にしています。
またユーザー同士でProttの活用方法を共有することもUser Meetupの目的です。
今回は1月18日に開催したvol.16「Google Play ベストオブ 2016特集」のレポートをお届けします！
効率よく、品質よく、アプリを育てよう。｜株式会社ネクスト 小林様
※株式会社ネクスト様は、2017年4月1日より社名を「株式会社LIFULL」に変更されました。
(詳細：http://lifull.com/news/9088/)
株式会社ネクスト様は、国内と海外の住宅・不動産関連情報サービスを行っています。その中でも総掲載物件数が日本最大級の不動産・住宅情報サイトの「HOME’S」での事例をご紹介頂きました。
Prottを活用した事例
①デザインチェック出しの工数削減！
Prott導入前は、以下の手順が実機でのデザインチェックを行う準備として必要だったそうです。
【Prott導入前】
画像の書き出し(1分) → HTML化(20分) → サーバーにアップ(2分) → 認証をつけて展開(1分)
最も準備に時間がかかっていた手順は「HTML化→サーバーにアップ(合計22分)」でした。
【Prott導入後】
画像の書き出し(1分) → Prottにアップ(30秒) → 遷移を追加(2分) → 認証をつけて展開(1分)
時間がかかっていたところをProttを使うことにより約8倍以上の工数削減に繋がったそうです。
②マテリアルデザインに便利なPrott！
マテリアルデザインにおいてはアニメーションやタップ領域などの挙動もとても重要です。チームでの共通認識を持つために、Prottのトランジションやオーバレイ機能を使い、プロトタイプの時点で共通認識を持つことを大切にしているとのことでした。
③アイデアをかたちにするスピードの早さ！
会議での施策内容の共有後に、Prottでパターン出しとブラッシュアップを行うとのこと。また、「こんなことやりたい！」というアイデアの段階で、Prottでプロトタイプを作成し、会議でメンバーに提案をすることもあるそうです。
プロトタイプ作成後のProttの使い方
①画面遷移図を印刷して俯瞰する
全画面（主要画面）を入れて印刷し、カラートーン、コンテンツが立っているかを確認するのに、便利な機能が画面遷移図機能とのこと。全体を俯瞰してみることで、ブランディングがぶれないように心がけているとのことです。
②埋め込み機能で仕様とモックを一元管理
デザインの属人化を避けるために、Prottの埋め込み機能を活用されていました！
社内ツールに、仕様とモックを一緒に管理することで、属人化を減らし、次の施作に活かしているそうです。
良きサービスの確かな成長の為に｜スタディプラス株式会社 小松様
200万人以上が利用する日本最大級の学習管理プラットフォーム「Studyplus」を運営している、スタディプラス株式会社様。
2年連続でベストアプリを受賞したお話や、スタディプラスの開発・運営でのProttの活用事例についてお話し頂きました。
スタディプラスの開発・運営
現在のところ、ディレクター1名、デザイナー2名、エンジニア9名で「Studyplus」を開発をされています。
エンジニアと比較し、デザイナーが少人数での開発で気をつけている3つのポイントをお話しされました。
①ユーザーの使い勝手
「Studyplus」を利用するユーザーの多くは勉強をしている切実な学生さんです。先日も機能の追加を行いましたが、センター試験直前のユーザーを混乱させない様に試験後に変更されました。
②スピード
「Studyplus」の運営にはユーザーの試験等といった季節要因も多く発生するため、スピードを意識して開発を行っているそうです。施策のタイミングを逃すとその機能の対象となるユーザーがどっと減ってしまうということもあるそうです。
③開発メンバーとのコミュニケーション
少人数のチームだからこそ、的確な指示を行う必要性があるので開発メンバーとのコミュニケーションを意識し、Prottを使ってメンバー全員での共通認識をとっていくそうです。
良きサービスを作り上げるデザインフロー
①ペーパーで仕様を検討・共有
デザイナーが画面を紙・付箋で書き出したものを元に、懸念点をホワイトボードに書き出しながら議論します。会議での議論内容は開発メンバーに共有します。
②ワイヤーフレームの作成
議論を元に、デザイナーがSketchでワイヤーフレームの作成を行います。
③プロトタイピング
1. 画面の遷移の確認・UIパーツのレイアウトの検討をPrott上で行います。
操作の検討の場合は、Prottアプリのカメラ機能を使いペーパーモックを取り込み、Prottに入れて確認することもあるとのこと。
2. Sketchで作成したワイヤーフレームは、Sketchプラグイン機能を使いProttに同期します。
3. 画面遷移をつけた後は、実機でProttアプリを使って確認します。
4. 社内の情報共有に使っているQiita TeamにProttのプロジェクトを埋め込み、社内の人に触ってもらうそうです。
④UIデザイン
様々なUIデザインの比較検討を行うためにSketchを使用しています。複数のデザインのバリエーションを検討する為にアートボードをどんどん増やしながら制作していくそうです。
その際、アートボードの周りには制作時の思考やデザインのポイントをテキストでまとめているそうです。 このUIデザインの比較検討時にも、随時Prottで確認しながら行われています。
⑤ファイル・ガイドラインの共有
最後にZeplinを使いファイル・ガイドラインの共有を行います。アートボード単位で、サイズ・座標などを社内に共有し、必要なパーツはZeplinからダウンロードしてもらえることが便利で利用されているそうです。
Prott Update News!｜Prottチーム エンジニア鬼灯・古家
ProttのAndroidエンジニアの鬼灯・古家より、最近リリースされたPrott Viewer for Androidについてお話しました！
Prott Viewer for Androidとは、共有されたプロトタイプのURLを、ログインやホーム画面へ追加せずに、実際のAndroid端末で簡単にプレビューできるアプリです。
直近では、ホーム画面へのショートカット機能とタブレット端末専用の表示にも対応しました。
Prott Viewerアプリは引き続き改善し新機能をリリースしていきます！
また、開発の裏話としてPrott Viewer for Androidの開発時に使用したツールをご紹介しました。
デザイナーとのデザイン共有やフィードバックはフェーズに応じ、ProttはもちろんFramer、Sketch、Zeplin、Fabric、Baltoを使いました。
ProttとFramerの使い分けとしては、最初に Prott で全体図を作成し、どんな画面があるか、その画面は必要なのか、どこからどこに遷移するかなどの認識を共通化するために利用しました。Prottで認識を合わせた後は、画面遷移のアニメーションの詳細を伝えるためにFramerを利用しています。
そして開発時にはFabric、Baltoを使いました。
BaltoはProttに続くグッドパッチの自社開発プロダクトです。
ワンアクションで開発中の画面のスクリーンショット・ムービーを撮影し、コメントと共にチームにフィードバックすることが可能です。先日のローンチ直後からご好評いただいているプロダクトです！
懇親会
発表の後には、グッドパッチ恒例のピザを食べながら懇親会を行いました。
今回はProttやBaltoを体験できるブースを設置し、皆さまに体験してもらいました。
お越しいただいた皆さまとProttチームの交流だけでなく、参加された皆さま同士での交流も活発で会場は大いに盛り上がっていました！
以上、Prott User Meetup vol.16のレポートでした。
ご参加いただいた皆さま、ありがとうございました！
私たちProttチームは、今後もユーザーの皆さまと一緒になって開発・改善を進められるよう、User Meetupを開催する予定です！
こちらのイベントページにある「メンバーになる」ボタンを押していただけると、今後Meetupを開催する際にお知らせが届くようになります。
Prottのことをあまり知らないという方も、過去に参加したことのある方も、是非お気軽に遊びに来てください！