Download - マテリアルデザインを用いたデザインリニューアル [フリル編]
![Page 1: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/1.jpg)
マテリアルデザインを 用いたデザインリニューアル
株式会社Fablic ninjinkun,yuki930
![Page 2: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/2.jpg)
@ninjinkun @yuki930エンジニア デザイナー
![Page 3: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/3.jpg)
ninjinkun• 最近はDagger2に入門中 • http://ninjinkun.hatenablog.com/
![Page 4: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/4.jpg)
yuki930• 山口 有由希 • ずっとAndroidユーザー • 福岡でデザイナー • 2014年1月にFablicに入社
![Page 5: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/5.jpg)
女の子のためのフリマアプリ
300万 ダウンロード
2014 Google
BestApp
![Page 6: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/6.jpg)
Fril 2.x
![Page 7: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/7.jpg)
Fril 3.x
![Page 8: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/8.jpg)
時系列の説明
• 2014年6月 マテリアルデザインガイドライン公開
• 2014年7月 フリルAndroid版リニューアル計画スタート
• TV CMが決まってリリース日が10月末に確定
• タイミングが5.0と重なりそう
• どうせリニューアルするならマテリアル対応…
• 2014年12月 Google Play Best App 2014受賞
![Page 9: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/9.jpg)
UIリニューアルの流れ
v2.5 v3.0 v3.1 v3.2~2014年10月 2014年10月 2014年11月 2014年12月
リニューアル前体験改善!自力Material
サポートライブラリ適用
タブレット対応
![Page 10: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/10.jpg)
マテリアルデザインのキャッチアップと実装について
今日お話すること
![Page 11: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/11.jpg)
マテリアルデザインの理解と取り組みデザイン編
![Page 12: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/12.jpg)
Google I/O 2014
![Page 13: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/13.jpg)
マテリアルデザインの理解
![Page 14: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/14.jpg)
信じられるもの:ガイドライン
http://www.google.com/design/spec/material-design/introduction.html
![Page 15: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/15.jpg)
リアルタイムに変わっていくから!今もなお…
![Page 16: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/16.jpg)
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
![Page 17: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/17.jpg)
マテリアル・デザインって何? Androidデザイン責任者にインタビュー どういう経緯で生まれたのか?が分かる記事
我々は誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザイ
ンシステムを作りたかったんです。
それは巨大なデザイン空間で、超エキサイティングでした。それほど大きなデザイン問題に取り組んだ
人とか機会が他にあったかわかりません。そこにチームがひとつになって取り組めたのは素晴らしかっ
たです。みんな本当にのめりこんでいきましたからね。デザイナーを巻き込めば巻き込むほど、彼らは
「あのさあ、もうちょっと本気出せば、僕らだってこの問題は解けるよ?」と言ってくるんです。
http://www.gizmodo.jp/2014/07/_android.html
![Page 18: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/18.jpg)
An exploration in Material Design 実際に上記ポイントを踏まえてリニューアルされたfeedlyの事例
https://medium.com/feedly-behind-the-curtain/an-exploration-in-
material-design-by-feedly-8c1a1cbdfdcd
![Page 19: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/19.jpg)
公式動画に日本語字幕もつきましたhttp://googledevjp.blogspot.jp/2015/02/blog-post.html
![Page 20: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/20.jpg)
プロトタイプ作成
![Page 21: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/21.jpg)
ユーザーからの要望やお問い合わせチェック
![Page 22: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/22.jpg)
UIパターンの調査
![Page 23: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/23.jpg)
ペーパープロトテスト
![Page 24: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/24.jpg)
![Page 25: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/25.jpg)
ユーザーテスト
![Page 26: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/26.jpg)
がんばってAndroidの標準に合わせたつもりだったが…
![Page 27: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/27.jpg)
既存ユーザーの使い勝手を悪くしてしまっていた
![Page 28: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/28.jpg)
![Page 29: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/29.jpg)
![Page 30: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/30.jpg)
![Page 31: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/31.jpg)
![Page 32: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/32.jpg)
![Page 33: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/33.jpg)
議論はユーザーテストで収束
![Page 34: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/34.jpg)
デザインルール作成
![Page 35: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/35.jpg)
カラー
![Page 36: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/36.jpg)
フリルらしい配色のカラーパレットを作成
![Page 37: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/37.jpg)
タイポグラフィー
![Page 38: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/38.jpg)
日本語だと強くなりすぎてしまう点を考慮して行間やフォントサイズを最適化
草案 最終的には値は変更しています
![Page 39: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/39.jpg)
![Page 40: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/40.jpg)
+1sp
ALL CAPSなし
![Page 41: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/41.jpg)
![Page 42: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/42.jpg)
デザイン起こし
![Page 43: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/43.jpg)
sticker sheetパーツのデザインがひと通り揃っています
Sketchのデータが扱いやすくとくにおすすめ!
http://www.google.com/design/spec/resources/sticker-sheets-icons.html
![Page 44: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/44.jpg)
アイコン作成
![Page 45: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/45.jpg)
提供されているアイコン類
![Page 46: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/46.jpg)
Githubでも管理
https://github.com/google/material-design-icons
![Page 47: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/47.jpg)
足りないモチーフの書き起こし
![Page 48: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/48.jpg)
IcoMoonでアイコンフォント化
• ブラウザから簡単にフォントファイルが作成可能
• jsonファイルを利用すれば誰でもブラウザだけで編集が可能
![Page 49: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/49.jpg)
16KBまで削減でき、アプリの容量もダウン
![Page 50: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/50.jpg)
![Page 51: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/51.jpg)
実装のための準備
![Page 52: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/52.jpg)
扱いやすいカラー定義基本的な配色ルールをcolors.xmlに定義
基本的にはそれらの色を参照する形で色を設定すると
変更に柔軟になりとても便利!
![Page 53: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/53.jpg)
カラー定義基本的な配色ルールをcolors.xmlに定義
基本的にはそれらの色を継承する形で色を設定すると
変更に柔軟になりとても便利!
![Page 54: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/54.jpg)
定数定義余白や基本的な
フォントサイズなどをdimen.xmlに定義
![Page 55: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/55.jpg)
ボタンの整備影もdrawableで書いていたが
1dp単位で書いていたので荒すぎた
影を必死に描くのは不毛なので影の背景画像、シェイプ、アイコンの重ね技で色変更のしやすいボタンに
![Page 56: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/56.jpg)
textAppearanceの活用
TextAppearanceを活用することでstyleの切り分けが容易に
スタイルがコンパクトになり、かつ無駄に似たような
スタイルが増えすぎることがない
![Page 57: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/57.jpg)
マテリアルデザインの理解と取り組み実装編
![Page 58: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/58.jpg)
Support Libraryがない状況でのマテリアル対応
実装とライブラリの変遷
![Page 59: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/59.jpg)
実装・ライブラリの変遷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
![Page 60: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/60.jpg)
Activity + Fragment• それまではActivityべた書きだった… • 回転対応、タブレット対応を見据えてFragment化
![Page 61: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/61.jpg)
Activity + Fragment• ひたすらFragment化
![Page 62: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/62.jpg)
Activity + Fragment• ひたすらFragment化
![Page 63: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/63.jpg)
Activity + Fragment• 一通り対応が終わってからFragment批判が盛り上がって辛い • 【翻訳】Android Fragmentへの反対声明
• しかしFragment使って良かったと思ってます • ViewPagerはFragment使わないと実装しづらい
http://ninjinkun.hatenablog.com/entry/2014/10/16/234611
![Page 64: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/64.jpg)
RetrofitSquare製のHTTP Client
インターフェイスにアノテーションを書くスタイルで読みやすい
JavaDocにAPIの仕様を記述していくと良い感じ
![Page 65: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/65.jpg)
RxJavaReactive ExtensionのJava実装
FrilではPromiseとして使用
複雑なAPIコールを宣言的に記述
商品情報のPOSTと画像アップロードを順に行う様子
商品情報POST
画像を4枚POST
レスポンス
レスポンス
![Page 66: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/66.jpg)
Material Tab Hostマテリアルスタイルで
ViewPager+Tabを実現する
NAVIGATION_MODE_TABSの代替
https://github.com/yanzm/MaterialTabHost
![Page 67: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/67.jpg)
Calligraphyアイコンフォントに使用
TextViewを拡張して外部フォントを読み込み可能にしてくれる
https://github.com/chrisjenx/Calligraphy
![Page 68: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/68.jpg)
Support Libraryがない状況でのマテリアル対応
![Page 69: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/69.jpg)
Support Libraryがない状況でのマテリアル対応
• パラメータを揃えてそれっぽく見せる • Floating Action Button • Scroll to Full Screen
←お手軽←お手軽←ハード
Android 5.0 & Support Library 21がリリース前だった
![Page 70: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/70.jpg)
パラメータを揃えてそれっぽく見せる48dp
10dp
Fril 2.5
52dp
16dp
Fril 3.0
Googleに怒られるやつ
![Page 71: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/71.jpg)
パラメータを揃えてそれっぽく見せる
Fril 2.5 Fril 3.0 Fril 3.2
![Page 72: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/72.jpg)
Floating Action Button
ボタンを置くだけ
今はOSS実装もありますmakovkastar/FloatingActionButton
![Page 73: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/73.jpg)
Scroll to Full Screen
ScrollViewやListViewのAPIを調べてがんばって実装
ninjinkun/ScrollFullScreen
![Page 74: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/74.jpg)
Scroll to Full Screen
ScrollViewやListViewのAPIを調べてがんばって実装
ninjinkun/ScrollFullScreen
![Page 75: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/75.jpg)
Scroll to Full Screen• 今ならSupport Libraryでできます • ActionBar. setHideOnContentScrollEnabled
• 細かいことがやりたければもっと良いライブラリも • Android-ObservableScrollView
![Page 76: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/76.jpg)
黎明期マテリアル対応の感想•Googleの標準も固まってなかったりして暗中模索 •先行実装しても損はしない •Support Libraryリリース時の対応もすぐできた
•先行実装でGoogleさんからの評価は上がった様子
![Page 77: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/77.jpg)
おわりに
![Page 78: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/78.jpg)
Androidの進化のタイミングはチャンス
いち早いキャッチアップはBest Appへの近道(かも)
でもユーザー視点は忘れずに
技術やデザインを自分たちのものにしようとする努力が大切
![Page 79: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/79.jpg)
リニューアルの裏話
![Page 80: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/80.jpg)
社外開発者との連携• 手が足りないので助けてもらった • 社内開発者のレベルアップにもなった • Android開発の定石、ハマり処の伝授 • コードレビュー
![Page 81: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/81.jpg)
社外開発者との連携• ドキュメントの整備 • 継承の使い方で議論
![Page 82: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/82.jpg)
ドキュメント整備CONTRIBUTION.mdに集約
branch運用
コーディング規約
Layout XMLの規約
![Page 83: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/83.jpg)
ドキュメント整備CONTRIBUTION.mdに集約
branch運用
コーディング規約
Layout XMLの規約
![Page 84: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/84.jpg)
JavaDoc整備クラスとpublicメソッドにはJavaDoc
を書く
API Clientは特に丁寧に
![Page 85: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/85.jpg)
継承で議論•Activity, Fragmentの孫継承を使うかで議論に •Android SDKは継承モデルだがしかし…
![Page 86: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/86.jpg)
継承で議論•似たような出品画面、編集画面、下書き編集画面 •BaseItemEditFragmentみたいなのを作る?
![Page 87: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/87.jpg)
継承で議論•FrilではActivity, Fragmentの孫継承は使わない •差分プログラミングのための継承は見通しが悪くなる •ベースクラスを弄る誘惑と戦う羽目になる
![Page 88: マテリアルデザインを用いたデザインリニューアル [フリル編]](https://reader031.vdocuments.mx/reader031/viewer/2022013122/55a588811a28abd9138b4580/html5/thumbnails/88.jpg)
ご清聴ありがとうございました����������