SlideShare a Scribd company logo
マテリアルデザインを
用いたデザインリニューアル
株式会社Fablic
ninjinkun,yuki930
@ninjinkun @yuki930
エンジニア デザイナー
ninjinkun
• 最近はDagger2に入門中
• http://ninjinkun.hatenablog.com/
yuki930
• 山口 有由希
• ずっとAndroidユーザー
• 福岡でデザイナー
• 2014年1月にFablicに入社
女の子のためのフリマアプリ
300万
ダウンロード
2014
Google
BestApp
Fril 2.x
Fril 3.x
時系列の説明
• 2014年6月 マテリアルデザインガイドライン公開
• 2014年7月 フリルAndroid版リニューアル計画スタート
• TV CMが決まってリリース日が10月末に確定
• タイミングが5.0と重なりそう
• どうせリニューアルするならマテリアル対応…
• 2014年12月 Google Play Best App 2014受賞
UIリニューアルの流れ
v2.5 v3.0 v3.1 v3.2
∼2014年10月 2014年10月 2014年11月 2014年12月
リニューアル前
体験改善!

自力Material
サポート

ライブラリ適用
タブレット対応
マテリアルデザインの

キャッチアップと実装について
今日お話すること
マテリアルデザインの理解と取り組み

デザイン編
Google I/O 2014
マテリアルデザインの理解
信じられるもの:ガイドライン
http://www.google.com/design/spec/material-design/introduction.html
リアルタイムに変わっていくから!
今もなお…
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
マテリアル・デザインって何?

Androidデザイン責任者にインタビュー
どういう経緯で生まれたのか?が分かる記事
我々は誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザイ
ンシステムを作りたかったんです。
それは巨大なデザイン空間で、超エキサイティングでした。それほど大きなデザイン問題に取り組んだ
人とか機会が他にあったかわかりません。そこにチームがひとつになって取り組めたのは素晴らしかっ
たです。みんな本当にのめりこんでいきましたからね。デザイナーを巻き込めば巻き込むほど、彼らは
「あのさあ、もうちょっと本気出せば、僕らだってこの問題は解けるよ?」と言ってくるんです。
http://www.gizmodo.jp/2014/07/_android.html
An exploration in Material Design
実際に上記ポイントを踏まえてリニューアルされたfeedlyの事例
https://medium.com/feedly-behind-the-curtain/an-exploration-in-
material-design-by-feedly-8c1a1cbdfdcd
公式動画に日本語字幕もつきました
http://googledevjp.blogspot.jp/2015/02/blog-post.html
プロトタイプ作成
ユーザーからの要望や

お問い合わせチェック
UIパターンの調査
ペーパープロトテスト
マテリアルデザインを用いたデザインリニューアル [フリル編]
ユーザーテスト
がんばってAndroidの標準に

合わせたつもりだったが…
既存ユーザーの使い勝手を

悪くしてしまっていた
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
議論は

ユーザーテストで収束
デザインルール作成
カラー
フリルらしい配色のカラーパレットを作成
タイポグラフィー
日本語だと強くなりすぎてしまう点を考慮して

行間やフォントサイズを最適化
草案 最終的には値は変更しています
マテリアルデザインを用いたデザインリニューアル [フリル編]
+1sp
ALL CAPSなし
マテリアルデザインを用いたデザインリニューアル [フリル編]
デザイン起こし
sticker sheet
パーツのデザインが

ひと通り揃っています
Sketchのデータが扱いやすく

とくにおすすめ!
http://www.google.com/design/spec/resources/sticker-sheets-icons.html
アイコン作成
提供されているアイコン類
Githubでも管理
https://github.com/google/material-design-icons
足りないモチーフの書き起こし
IcoMoonで

アイコンフォント化
• ブラウザから簡単にフォントファ
イルが作成可能
• jsonファイルを利用すれば

誰でもブラウザだけで編集が可能
16KBまで削減でき、アプリの容量もダウン
マテリアルデザインを用いたデザインリニューアル [フリル編]
実装のための準備
扱いやすい

カラー定義
基本的な配色ルールを

colors.xmlに定義
基本的にはそれらの色を参照する

形で色を設定すると

変更に柔軟になりとても便利!

カラー定義
基本的な配色ルールを

colors.xmlに定義
基本的にはそれらの色を継承する

形で色を設定すると

変更に柔軟になりとても便利!

定数定義
余白や基本的な

フォントサイズなどを

dimen.xmlに定義
ボタンの整備
影もdrawableで書いていたが

1dp単位で書いていたので荒すぎた
影を必死に描くのは不毛なので

影の背景画像、シェイプ、アイコンの
重ね技で色変更のしやすいボタンに
textAppearance

の活用
TextAppearanceを活用することで

styleの切り分けが容易に
スタイルがコンパクトになり、

かつ無駄に似たような

スタイルが増えすぎることがない
マテリアルデザインの理解と取り組み
実装編
Support Libraryが

ない状況での

マテリアル対応
実装と

ライブラリの変遷
実装・ライブラリの変遷
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
Activity + Fragment
• それまではActivityべた書きだった…
• 回転対応、タブレット対応を見据えてFragment化
Activity + Fragment
• ひたすらFragment化
Activity + Fragment
• ひたすらFragment化
Activity + Fragment
• 一通り対応が終わってからFragment批判が盛り上がって
辛い
• 【翻訳】Android Fragmentへの反対声明
• しかしFragment使って良かったと思ってます
• ViewPagerはFragment使わないと実装しづらい
http://ninjinkun.hatenablog.com/entry/2014/10/16/234611
Retrofit
Square製のHTTP Client
インターフェイスにアノテーション
を書くスタイルで読みやすい
JavaDocにAPIの仕様を

記述していくと良い感じ
RxJava
Reactive ExtensionのJava実装
FrilではPromiseとして使用
複雑なAPIコールを宣言的に記述
商品情報のPOSTと画像アップロード
を順に行う様子
商品情報POST
画像を4枚POST
レスポンス
レスポンス
MaterialTabHost
マテリアルスタイルで
ViewPager+Tabを実現する
NAVIGATION_MODE_TABSの代替
https://github.com/yanzm/MaterialTabHost
Calligraphy
アイコンフォントに使用
TextViewを拡張して外部フォントを
読み込み可能にしてくれる
https://github.com/chrisjenx/Calligraphy
Support Libraryがない状況での

マテリアル対応
Support Libraryがない状況でのマテリアル対応
• パラメータを えてそれっぽく見せる
• Floating Action Button
• Scroll to Full Screen
←お手軽
←お手軽
←ハード
Android 5.0 & Support Library 21がリリース前だった
パラメータを えてそれっぽく見せる
48dp
10dp
Fril 2.5
52dp
16dp
Fril 3.0
Googleに怒られるやつ
パラメータを えてそれっぽく見せる
Fril 2.5 Fril 3.0 Fril 3.2
FloatingAction
Button
ボタンを置くだけ
今はOSS実装もあります

makovkastar/FloatingActionButton
Scrollto

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

FullScreen
ScrollViewやListViewのAPIを調べ
てがんばって実装
ninjinkun/ScrollFullScreen
Scroll to Full Screen
• 今ならSupport Libraryでできます
• ActionBar. setHideOnContentScrollEnabled
• 細かいことがやりたければもっと良いライブラリも
• Android-ObservableScrollView
黎明期マテリアル対応の感想
• Googleの標準も固まってなかったりして暗中模索
• 先行実装しても損はしない
• Support Libraryリリース時の対応もすぐできた
• 先行実装でGoogleさんからの評価は上がった様子
おわりに
Androidの進化のタイミングはチャンス
いち早いキャッチアップはBest Appへの近道(かも)
でもユーザー視点は忘れずに
技術やデザインを自分たちのものにしようとする努力が大切
リニューアルの裏話
社外開発者との連携
• 手が足りないので助けてもらった
• 社内開発者のレベルアップにもなった
• Android開発の定石、ハマり処の伝授
• コードレビュー
社外開発者との連携
• ドキュメントの整備
• 継承の使い方で議論
ドキュメント整備
CONTRIBUTION.mdに集約
branch運用
コーディング規約
Layout XMLの規約
ドキュメント整備
CONTRIBUTION.mdに集約
branch運用
コーディング規約
Layout XMLの規約
JavaDoc整備
クラスとpublicメソッドにはJavaDoc
を書く
API Clientは特に丁寧に
継承で議論
• Activity, Fragmentの孫継承を使うかで議論に
• Android SDKは継承モデルだがしかし…
継承で議論
• 似たような出品画面、編集画面、下書き編集画面
• BaseItemEditFragmentみたいなのを作る?
継承で議論
• FrilではActivity, Fragmentの孫継承は使わない
• 差分プログラミングのための継承は見通しが悪くなる
• ベースクラスを弄る誘惑と戦う羽目になる
ご清聴ありがとう
ございました



More Related Content

マテリアルデザインを用いたデザインリニューアル [フリル編]