Slide 1
Slide 1 text
Material Design
守破離
〜えこよみ編〜
Androidエンジニア
デザイン部 #1
株式会社ノハナ 瀬戸優之
@seto_hi
Slide 2
Slide 2 text
自己紹介
● 瀬戸優之 Seto HiroYUKI @seto_hi
● Androidエンジニア & アプリデザイン
● 株式会社ノハナ
○ 一組でも多くの家族に笑顔を届ける
○ 絶賛採用中
● Material Design大好き
● 好きなAPIはCanvas#saveとViewGroup#layout
Slide 3
Slide 3 text
2018/2/22
Slide 4
Slide 4 text
2018/2/22
Release
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
えこよみ
と
Material Design
Slide 7
Slide 7 text
ガイドラインを守れば
必ず
使いやすいのか
Slide 8
Slide 8 text
ガイドラインを守れば
必ず
売れるのか
Slide 9
Slide 9 text
そうとは言い切れない
Slide 10
Slide 10 text
もう少し発展が必要
Slide 11
Slide 11 text
守破離
Slide 12
Slide 12 text
守破離
守破離（しゅはり）は、日本での茶道、武道、芸術等における師弟
関係のあり方の一つ。
守：支援のもとに作業を遂行できる（半人前）。
～ 自律的に作業を遂行できる（1人前）。
破：作業を分析し改善・改良できる（1.5人前）。
離：新たな知識（技術）を開発できる（創造者）。
https://ja.wikipedia.org/wiki/%E5%AE%88%E7%A0%B4%E9%9B%A2
Slide 13
Slide 13 text
Material Designと守破離
守：ガイドラインを覚える
ガイドラインを厳密に守る
破：ガイドラインの意図を理解して
ガイドラインにないコンポーネントの作成
離：既存のガイドラインを破る
新たなガイドラインの作成
Slide 14
Slide 14 text
Material Design
守破離
〜えこよみ編〜
Slide 15
Slide 15 text
守
Slide 16
Slide 16 text
守
Slide 17
Slide 17 text
守
Slide 18
Slide 18 text
守
Slide 19
Slide 19 text
守
Slide 20
Slide 20 text
守
Slide 21
Slide 21 text
守
● 大前提：Material Designは素晴らしいガイドライン
● ガイドラインを忠実に守った設計
○ 8dpのgrid
○ Shadow & Elevation
○ Accent ColorとPrimary Color
● 重要でない画面には有用
○ 工数削減
■ エンジニアもデザイナーも
Slide 22
Slide 22 text
破
Slide 23
Slide 23 text
破
Slide 24
Slide 24 text
破：CardViewの使い方
● CardViewのレイアウト
○ 画像比率
● トップ画面をエモくしたい
○ カードを作らなくても使われるアプリが理想
● ポストカードの画像を有効活用する
○ フォトブックアプリでも同様のアプローチ
● 思い出は個別事象なのでリストでなくカード
Slide 25
Slide 25 text
破
Slide 26
Slide 26 text
破：中央ボタン
● カードの裏表を切り替えるボタン
● 独自Viewコンポーネント
● 左右と時間軸の話
○ FABはなぜ画面右下か
http://seto-hi.hatenablog.com/entry/2017/12/04/084404
■ 左が過去・否定、右が未来、肯定
● 否定でも肯定でもない、そこそこ重要なボタン
○ 画面中央に白ベースでFloating
● まだ改善点がある
Slide 27
Slide 27 text
破：Progress
● Progress Dialogがひとつもない(守)
○ 全画面でProgressBar表示も2カ所だけ
● ボタンと円形Progressの切り替え
● まだ改善点がある
○ チラつき、連続性など
Slide 28
Slide 28 text
離
Slide 29
Slide 29 text
離
Slide 30
Slide 30 text
離：プレビュー画面
● 現実世界を意識させた画面
○ ポストカードを買ってもらうためのアプリ
○ Material Designの世界だけでは不十分
○ 背景、影、サイズなど調整
● 「バーンとエモくしてください」
○ ランディングページ、GooglePlayと共通の背景、配色
● まだまだ発展途上
Slide 31
Slide 31 text
エンジニアは
デザインに
どのように
向き合うか
Slide 32
Slide 32 text
エンジニアが武器にする
Material Design
(p13~)
https://speakerdeck.com/seto_hi/enziniagawu-qi-nisurumaterial-design
Slide 33
Slide 33 text
実装
● 実装できるものを増やす
● Viewの実装に関する知識
○ どんなViewコンポーネントがある
○ 描画、レイアウト、アニメーション
● 逆引きで実装できるようになる
○ 「○○したら××になる」ではなく
「××を実現するのには○○したら良い」という知識
○ 実現力
Slide 34
Slide 34 text
カスタムViewの勘所
● Drawable
○ LayerDrawable、GradientDrawable
● アニメーション
○ beginDelayedTransition
+ Transition(ChangeBounds, Fade, Slide)
○ ValueAnimator, ObjectAnimator, StateListAnimator
● Canvas
○ clipPath, translate, rotate, scale
○ save, restoreToCount
Slide 35
Slide 35 text
オススメの実装資料
● Android Support Libraryのコード
○ 特にdesignライブラリ
Slide 36
Slide 36 text
オススメの資料(Animation系)
● サポートライブラリを支える技術
○ http://yaraki.github.io/slides/gdg-kobe-2016q3
● 動かす
○ http://yaraki.github.io/slides/devfest-kansai-2016
● In transition
○ https://goo.gl/photos/puv99eA7nz98Nkku9
● How to implement material design animation
○ https://speakerdeck.com/takahirom/how-to-implement-material-design-animation
Slide 37
Slide 37 text
デザインへの貢献
● デザインの実現可能性の判断
○ 工数の見積もり
■ 工数は守＜破＜離
■ エンジニアがデザインをやると
画面設計と工数見積もりが同時にできる
○ 理想と妥協点の折り合い
■ デザインの意図のくみ取り
■ 実現可能なUIを提案
● Viewの知識がプロダクトの効率を高める！
Slide 38
Slide 38 text
まとめ
● ガイドラインと守破離
○ 守：記憶・実践
○ 破：理解・応用
○ 離：独立
● エンジニアは実装の知識で貢献
○ 実現可能性の判断
○ 実装工数
Slide 39
Slide 39 text
以上