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.
最速でリリースするため
の Android アプリデザイン
Designer, Wantedly, Inc.青山 直樹
自己紹介
青山 直樹
https://www.wantedly.com/projects/6708/staffings/104038
デザイナー。ソフトウェアプロダクトの UI/UX を中心に活動中だ
がなんでもやりたい。
Wantedly,I...
Sync
2015年8月リリース
ビジネスチャットアプリ
AlbertEinstein.xls
川崎 禎紀
og_image.zip
青山 直樹
outToMeeting.png
profile_2015.ppt
今井 貴之
Team Wante...
4週間の短期間で開発!
初回リリースまで
開発体制
Sync Android App Team
青山直樹 住友孝郎
Designer Engineer
デザインの流れ
UI設計
画面カンプ(完成イメージ)作成
遷移図作成
大まかに仕様の認識合わせ
デザインを修正してPull Request
アプリの設計
仕組みの部分を実装
UIをざっくり実装
デザインの流れ
UI設計
画面カンプ(完成イメージ)作成
遷移図作成
大まかに仕様の認識合わせ
デザインを修正してPull Request
アプリの設計
仕組みの部分を実装
UIをざっくり実装
カンプは作ったほうがいい
デザイナー自身の思考・確認のため
絵がないと伝わらないことは多い
最終アウトプットはアプリなので
あくまで伝わればOK
デザイナーもコードを書く
- 書いてみると、どんなデザインが効率的に組めるのかわかってくる
- 共通の認識ができるので、コミュニケーションが円滑に
- 伝えきれない部分、こだわりたい部分は自身で巻き取れる
いいことがいろいろ
ぜひデザイナーに勧...
デザイナーも
コードを書ける
Android Studioの
補完は優秀なので、
打ってみると大体出てくる
リソースの定義
デザインスタイルガイドに記載するような内容を、
そのままValuesにまず全部書いておき、それ以外は使わない
- カラーパレット
- 文字サイズの定義
- レイアウトグリッド
- コンポーネントごとのスタイル
Colors
カラーパレット
Dimens
Material Design の8dpグリッド
を基準にした値を入れておいた。便利!
Drawables
9-Patchを使わない!
9-Patch画像はデザイナー側としても作成が大変。
画像内にPaddingなどを含んでしまうので、
数値の参照が効かないなどメンテナンス性もよくない。
デザインする際に9-Patchを使わなくて...
Drawables
独自作成のアイコンもMaterial Iconsに準拠
標準のアイコンと混ぜて使って違和感のないものにすることで、
作成数を削減
https://design.google.com/icons/
Drawables
画像作成の手間 - 解像度対応・リネームなどを省く
Adobe Illustrator から各解像度ごとに書き出せるスクリプトを使
用して、リソースフォルダに直接書き出し
https://github.com/austynm...
Drawables
今後は Android Studio 2.0の Vector Assets を利用予定!
SVGファイルを1つ用意すればOK、
Material Icons を簡単に読み込める
現在はバグがあってまだ使えていない
Material Design
- Support libraryが充実してきた
- ドキュメントがしっかりしており、
 共通認識が作りやすい
- 体系だった仕組みがあるので、UIとして破綻が少ない
- カスタマイズでブランド表現
今ならMaterial Designを
基本...
Support Library
Floating Action Button
+
Coordinator Layout
+
Snack Bar
AlbertEinstein.xls
川崎 禎紀
og_image.png
青山 直樹
outToM...
Support Library
Collapsing Toolbar layout
ドキュメントが充実
https://www.google.com/design/spec を、
デザイナー、エンジニア間でよく読み合わせておこう。
Material Designに沿ったものであれば、実装指示のためのドキュ
メントを作成する必要...
ドキュメントが充実
Googleが公開している Sticker Sheet を元に、カスタマイズした
スタイルのデータを作成すると良い
抜け、漏れなく、カスタマイズ箇所を明確にできる
カスタマイズ例
まとめ
- Material Designをベースにしてカスタマイズを考えよう
- デザイナーもコードを書こう(書いてみよう)
- リソースがきれいにまとまるデザインをしよう
ざっくり
ご静聴ありがとうございました
Thank you for listening !
最速でリリースするためのAndroidアプリデザイン
Upcoming SlideShare
Loading in …5
×

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

10,979 views

Published on

DroidKaigi2016発表資料です。

ビジネスチャットSync(http://www.wantedly.com/sync)のAndroid版のデザイン時にやった効率化策をまとめました。効率化だけじゃなくこだわっている部分ももちろんあるので、ぜひ使ってみてください。

Published in: Technology
  • Be the first to comment

最速でリリースするための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ファイルを1つ用意すれば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 !

×