DroidKaigiで発表したマテリアルデザインを用いたデザインリニューアル の資料です。

1. マテリアルデザインを
用いたデザインリニューアル
株式会社Fablic
ninjinkun,yuki930

2. @ninjinkun @yuki930
エンジニア デザイナー

3. ninjinkun
• 最近はDagger2に入門中
• http://ninjinkun.hatenablog.com/

4. yuki930
• 山口 有由希
• ずっとAndroidユーザー
• 福岡でデザイナー
• 2014年1月にFablicに入社

5. 女の子のためのフリマアプリ
300万
ダウンロード
2014
Google
BestApp

6. Fril 2.x

7. Fril 3.x

8. 時系列の説明
• 2014年6月 マテリアルデザインガイドライン公開
• 2014年7月 フリルAndroid版リニューアル計画スタート
• TV CMが決まってリリース日が10月末に確定
• タイミングが5.0と重なりそう
• どうせリニューアルするならマテリアル対応…
• 2014年12月 Google Play Best App 2014受賞

9. UIリニューアルの流れ
v2.5 v3.0 v3.1 v3.2
∼2014年10月 2014年10月 2014年11月 2014年12月
リニューアル前
体験改善!
自力Material
サポート
ライブラリ適用
タブレット対応

10. マテリアルデザインの
キャッチアップと実装について
今日お話すること

11. マテリアルデザインの理解と取り組み
デザイン編

12. Google I/O 2014

13. マテリアルデザインの理解

14. 信じられるもの：ガイドライン
http://www.google.com/design/spec/material-design/introduction.html

15. リアルタイムに変わっていくから！
今もなお…

16. Material Design on Android Checklist
マテリアルデザインを理解する上でキーとなる4つのポイントの解説
Tangible Surfaces A Bold, Print-Like Aesthetic Authentic Motion Adaptive Design
手触りのある
表面の表現
印刷物デザインの
応用
修飾ではなく
意味を伝える動き
画面サイズの変化に
適応するデザイン
http://android-developers.blogspot.jp/2014/10/material-design-on-
android-checklist.html

17. マテリアル・デザインって何？
Androidデザイン責任者にインタビュー
どういう経緯で生まれたのか？が分かる記事
我々は誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザイ
ンシステムを作りたかったんです。
それは巨大なデザイン空間で、超エキサイティングでした。それほど大きなデザイン問題に取り組んだ
人とか機会が他にあったかわかりません。そこにチームがひとつになって取り組めたのは素晴らしかっ
たです。みんな本当にのめりこんでいきましたからね。デザイナーを巻き込めば巻き込むほど、彼らは
「あのさあ、もうちょっと本気出せば、僕らだってこの問題は解けるよ？」と言ってくるんです。
http://www.gizmodo.jp/2014/07/_android.html

18. An exploration in Material Design
実際に上記ポイントを踏まえてリニューアルされたfeedlyの事例
https://medium.com/feedly-behind-the-curtain/an-exploration-in-
material-design-by-feedly-8c1a1cbdfdcd

19. 公式動画に日本語字幕もつきました
http://googledevjp.blogspot.jp/2015/02/blog-post.html

20. プロトタイプ作成

21. ユーザーからの要望や
お問い合わせチェック

22. UIパターンの調査

23. ペーパープロトテスト

25. ユーザーテスト

26. がんばってAndroidの標準に
合わせたつもりだったが…

27. 既存ユーザーの使い勝手を
悪くしてしまっていた

33. 議論は
ユーザーテストで収束

34. デザインルール作成

35. カラー

36. フリルらしい配色のカラーパレットを作成

37. タイポグラフィー

38. 日本語だと強くなりすぎてしまう点を考慮して
行間やフォントサイズを最適化
草案 最終的には値は変更しています

40. +1sp
ALL CAPSなし

42. デザイン起こし

43. sticker sheet
パーツのデザインが
ひと通り揃っています
Sketchのデータが扱いやすく
とくにおすすめ！
http://www.google.com/design/spec/resources/sticker-sheets-icons.html

44. アイコン作成

45. 提供されているアイコン類

46. Githubでも管理
https://github.com/google/material-design-icons

47. 足りないモチーフの書き起こし

48. IcoMoonで
アイコンフォント化
• ブラウザから簡単にフォントファ
イルが作成可能
• jsonファイルを利用すれば
誰でもブラウザだけで編集が可能

49. 16KBまで削減でき、アプリの容量もダウン

51. 実装のための準備

52. 扱いやすい
カラー定義
基本的な配色ルールを
colors.xmlに定義
基本的にはそれらの色を参照する
形で色を設定すると
変更に柔軟になりとても便利！

53. カラー定義
基本的な配色ルールを
colors.xmlに定義
基本的にはそれらの色を継承する
形で色を設定すると
変更に柔軟になりとても便利！

54. 定数定義
余白や基本的な
フォントサイズなどを
dimen.xmlに定義

55. ボタンの整備
影もdrawableで書いていたが
1dp単位で書いていたので荒すぎた
影を必死に描くのは不毛なので
影の背景画像、シェイプ、アイコンの
重ね技で色変更のしやすいボタンに

56. textAppearance
の活用
TextAppearanceを活用することで
styleの切り分けが容易に
スタイルがコンパクトになり、
かつ無駄に似たような
スタイルが増えすぎることがない

57. マテリアルデザインの理解と取り組み
実装編

58. Support Libraryが
ない状況での
マテリアル対応
実装と
ライブラリの変遷

59. 実装・ライブラリの変遷
2.x 3.x
Activityまわり Activityべた書き Activity + Fragment
APIクライアント
AsyncTaskLoader
ベースの自作
Retrofit + RxJava
画像 Picasso Picasso
EventBus Otto Otto
View DI findViewById() ButterKnife
テスト なし >< JUnit4, Mocito
CI なし >< CircleCI

60. Activity + Fragment
• それまではActivityべた書きだった…
• 回転対応、タブレット対応を見据えてFragment化

61. Activity + Fragment
• ひたすらFragment化

62. Activity + Fragment
• ひたすらFragment化

63. Activity + Fragment
• 一通り対応が終わってからFragment批判が盛り上がって
辛い
• 【翻訳】Android Fragmentへの反対声明
• しかしFragment使って良かったと思ってます
• ViewPagerはFragment使わないと実装しづらい
http://ninjinkun.hatenablog.com/entry/2014/10/16/234611

64. Retrofit
Square製のHTTP Client
インターフェイスにアノテーション
を書くスタイルで読みやすい
JavaDocにAPIの仕様を
記述していくと良い感じ

65. RxJava
Reactive ExtensionのJava実装
FrilではPromiseとして使用
複雑なAPIコールを宣言的に記述
商品情報のPOSTと画像アップロード
を順に行う様子
商品情報POST
画像を4枚POST
レスポンス
レスポンス

66. MaterialTabHost
マテリアルスタイルで
ViewPager+Tabを実現する
NAVIGATION_MODE_TABSの代替
https://github.com/yanzm/MaterialTabHost

67. Calligraphy
アイコンフォントに使用
TextViewを拡張して外部フォントを
読み込み可能にしてくれる
https://github.com/chrisjenx/Calligraphy

68. Support Libraryがない状況での
マテリアル対応

69. Support Libraryがない状況でのマテリアル対応
• パラメータを えてそれっぽく見せる
• Floating Action Button
• Scroll to Full Screen
←お手軽
←お手軽
←ハード
Android 5.0 & Support Library 21がリリース前だった

70. パラメータを えてそれっぽく見せる
48dp
10dp
Fril 2.5
52dp
16dp
Fril 3.0
Googleに怒られるやつ

71. パラメータを えてそれっぽく見せる
Fril 2.5 Fril 3.0 Fril 3.2

72. FloatingAction
Button
ボタンを置くだけ
今はOSS実装もあります
makovkastar/FloatingActionButton

73. Scrollto
FullScreen
ScrollViewやListViewのAPIを調べ
てがんばって実装
ninjinkun/ScrollFullScreen

74. Scrollto
FullScreen
ScrollViewやListViewのAPIを調べ
てがんばって実装
ninjinkun/ScrollFullScreen

75. Scroll to Full Screen
• 今ならSupport Libraryでできます
• ActionBar. setHideOnContentScrollEnabled
• 細かいことがやりたければもっと良いライブラリも
• Android-ObservableScrollView

76. 黎明期マテリアル対応の感想
• Googleの標準も固まってなかったりして暗中模索
• 先行実装しても損はしない
• Support Libraryリリース時の対応もすぐできた
• 先行実装でGoogleさんからの評価は上がった様子

77. おわりに

78. Androidの進化のタイミングはチャンス
いち早いキャッチアップはBest Appへの近道（かも）
でもユーザー視点は忘れずに
技術やデザインを自分たちのものにしようとする努力が大切

79. リニューアルの裏話

80. 社外開発者との連携
• 手が足りないので助けてもらった
• 社内開発者のレベルアップにもなった
• Android開発の定石、ハマり処の伝授
• コードレビュー

81. 社外開発者との連携
• ドキュメントの整備
• 継承の使い方で議論

82. ドキュメント整備
CONTRIBUTION.mdに集約
branch運用
コーディング規約
Layout XMLの規約

83. ドキュメント整備
CONTRIBUTION.mdに集約
branch運用
コーディング規約
Layout XMLの規約

84. JavaDoc整備
クラスとpublicメソッドにはJavaDoc
を書く
API Clientは特に丁寧に

85. 継承で議論
• Activity, Fragmentの孫継承を使うかで議論に
• Android SDKは継承モデルだがしかし…

86. 継承で議論
• 似たような出品画面、編集画面、下書き編集画面
• BaseItemEditFragmentみたいなのを作る？

87. 継承で議論
• FrilではActivity, Fragmentの孫継承は使わない
• 差分プログラミングのための継承は見通しが悪くなる
• ベースクラスを弄る誘惑と戦う羽目になる

88. ご清聴ありがとう
ございました