最速でリリースするためのAndroidアプリデザイン

最速でリリースするためのAndroidアプリデザイン

1. 1. 最速でリリースするため の Android アプリデザイン Designer, Wantedly, Inc.青山 直樹
2. 2. 自己紹介 青山 直樹 https://www.wantedly.com/projects/6708/staffings/104038 デザイナー。ソフトウェアプロダクトの UI/UX を中心に活動中だ がなんでもやりたい。 Wantedly,Inc. には昨年6月から勤務、それ以前は端末メーカーに て System UI、FW 周り、ホームなどを担当
3. 3. Sync 2015年8月リリース ビジネスチャットアプリ AlbertEinstein.xls 川崎 禎紀 og_image.zip 青山 直樹 outToMeeting.png profile_2015.ppt 今井 貴之 Team Wantedly Desktop.psd 森田 直樹 12:30 AlbertEinstein.xls 川崎 禎紀 og_image.png 青山 直樹 outToMeeting.png profile_2015.png 今井 貴之 Team Wantedly Desktop.png 森田 直樹 12:3012:30 Sync Android & iOS Team Wantedly @川崎 禎紀 ありがとうございます。 Welcome to the team ! Genki Yogi Group User Growth 弥真 岩永 勇輝 フィラース 37分ごろ到着します! 様々なプロダクトの初期フローUXの分析 これでしたっけ？ 11分前 27分前 1時間前 昨日 2 メッセージ つながり https://play.google.com/store/apps /details?id=com.wantedly.android.sync
4. 4. 4週間の短期間で開発！ 初回リリースまで
5. 5. 開発体制 Sync Android App Team 青山直樹 住友孝郎 Designer Engineer
6. 6. デザインの流れ UI設計 画面カンプ(完成イメージ)作成 遷移図作成 大まかに仕様の認識合わせ デザインを修正してPull Request アプリの設計 仕組みの部分を実装 UIをざっくり実装
7. 7. デザインの流れ UI設計 画面カンプ(完成イメージ)作成 遷移図作成 大まかに仕様の認識合わせ デザインを修正してPull Request アプリの設計 仕組みの部分を実装 UIをざっくり実装
8. 8. カンプは作ったほうがいい デザイナー自身の思考・確認のため 絵がないと伝わらないことは多い 最終アウトプットはアプリなので あくまで伝わればOK
9. 9. デザイナーもコードを書く - 書いてみると、どんなデザインが効率的に組めるのかわかってくる - 共通の認識ができるので、コミュニケーションが円滑に - 伝えきれない部分、こだわりたい部分は自身で巻き取れる いいことがいろいろ ぜひデザイナーに勧めてみてください！
10. 10. デザイナーも コードを書ける Android Studioの 補完は優秀なので、 打ってみると大体出てくる
11. 11. リソースの定義 デザインスタイルガイドに記載するような内容を、 そのままValuesにまず全部書いておき、それ以外は使わない - カラーパレット - 文字サイズの定義 - レイアウトグリッド - コンポーネントごとのスタイル
12. 12. Colors カラーパレット
13. 13. Dimens Material Design の8dpグリッド を基準にした値を入れておいた。便利！
14. 14. Drawables 9-Patchを使わない！ 9-Patch画像はデザイナー側としても作成が大変。 画像内にPaddingなどを含んでしまうので、 数値の参照が効かないなどメンテナンス性もよくない。 デザインする際に9-Patchを使わなくていいことを意識するだけで、 かなり作りやすくなります
15. 15. Drawables 独自作成のアイコンもMaterial Iconsに準拠 標準のアイコンと混ぜて使って違和感のないものにすることで、 作成数を削減 https://design.google.com/icons/
16. 16. Drawables 画像作成の手間 - 解像度対応・リネームなどを省く Adobe Illustrator から各解像度ごとに書き出せるスクリプトを使 用して、リソースフォルダに直接書き出し https://github.com/austynmahoney/mobile-export-scripts-illustrator
17. 17. Drawables 今後は Android Studio 2.0の Vector Assets を利用予定！ SVGファイルを１つ用意すればOK、 Material Icons を簡単に読み込める 現在はバグがあってまだ使えていない
18. 18. Material Design
19. 19. - Support libraryが充実してきた - ドキュメントがしっかりしており、  共通認識が作りやすい - 体系だった仕組みがあるので、UIとして破綻が少ない - カスタマイズでブランド表現 今ならMaterial Designを 基本に考えるのが効率的
20. 20. Support Library Floating Action Button + Coordinator Layout + Snack Bar AlbertEinstein.xls 川崎 禎紀 og_image.png 青山 直樹 outToMeeting.png 青山 直樹 profile_2015.png 今井 貴之 Team Wantedly Desktop.png 森田 直樹 12:3012:30 Sync Android & iOS Team Wantedly @川崎 禎紀 ありがとうございます。 Welcome to the team ! Genki Yogi Group User Growth 弥真 岩永 勇輝 フィラース 37分ごろ到着します! 様々なプロダクトの初期フローUXの分析 これでしたっけ？ 11分前 27分前 1時間前 昨日 2 メッセージ つながり 145人に招待を送信しました
21. 21. Support Library Collapsing Toolbar layout
22. 22. ドキュメントが充実 https://www.google.com/design/spec を、 デザイナー、エンジニア間でよく読み合わせておこう。 Material Designに沿ったものであれば、実装指示のためのドキュ メントを作成する必要がない。カスタマイズする場合も、Google のガイドラインとの差分で記載できるし、そのほうがわかりやす そう。 ※ 更新頻度が高いので要注意！
23. 23. ドキュメントが充実 Googleが公開している Sticker Sheet を元に、カスタマイズした スタイルのデータを作成すると良い 抜け、漏れなく、カスタマイズ箇所を明確にできる
24. 24. カスタマイズ例
25. 25. まとめ - Material Designをベースにしてカスタマイズを考えよう - デザイナーもコードを書こう(書いてみよう） - リソースがきれいにまとまるデザインをしよう ざっくり
26. 26. ご静聴ありがとうございました Thank you for listening !