Enviar pesquisa
Carregar
マテリアルデザインを用いたデザインリニューアル [フリル編]
•
286 gostaram
•
93,757 visualizações
YUKI YAMAGUCHI
Seguir
DroidKaigiで発表したマテリアルデザインを用いたデザインリニューアル の資料です。
Leia menos
Leia mais
Engenharia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 88
Baixar agora
Baixar para ler offline
Recomendados
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
ドワンゴの新卒エンジニアが新規サービスを立ち上げるまで
ドワンゴの新卒エンジニアが新規サービスを立ち上げるまで
Kazunari Kida
TensorFlow Liteを使った組み込みディープラーニング開発
TensorFlow Liteを使った組み込みディープラーニング開発
Makoto Koike
スマートフォンアプリ企画書ver.0.1
スマートフォンアプリ企画書ver.0.1
tmr2013
差別化で未来を生き抜く エンジニアの7つの秘訣
差別化で未来を生き抜く エンジニアの7つの秘訣
Yusuke Yamamoto
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
龍野高校創立125周年記念講演:2030年までにやっておくべき3つのこと
龍野高校創立125周年記念講演:2030年までにやっておくべき3つのこと
Osaka University
Teslaにおけるコンピュータビジョン技術の調査 (2)
Teslaにおけるコンピュータビジョン技術の調査 (2)
Kazuyuki Miyazawa
Mais conteúdo relacionado
Mais procurados
スマホアプリ企画書
スマホアプリ企画書
naotaro0123
アイデアワークショップ基本キット ver001
アイデアワークショップ基本キット ver001
Rikie Ishii
AIによる未来のUXデサイン? 〜 ChatGPT・AIartなど 〜
AIによる未来のUXデサイン? 〜 ChatGPT・AIartなど 〜
Yoshiki Hayama
2015年度GPGPU実践プログラミング 第14回 N体問題
2015年度GPGPU実践プログラミング 第14回 N体問題
智啓 出川
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
#FTMA15 第一回 鬼コース 全PDF
#FTMA15 第一回 鬼コース 全PDF
Yoichi Ochiai
デザイン思考入門クラス【2016年1月30日】
デザイン思考入門クラス【2016年1月30日】
(旧アカウント)一般社団法人デザイン思考研究所
Air事業のデザイン組織とデザイナー
Air事業のデザイン組織とデザイナー
Recruit Lifestyle Co., Ltd.
Pixie Dust - SIGGGRAPH 2014
Pixie Dust - SIGGGRAPH 2014
Yoichi Ochiai
サービス開発とその進め方
サービス開発とその進め方
KazuyukiHashimoto4
機械学習をScrumで組織的に学習する (RSGT2022)
機械学習をScrumで組織的に学習する (RSGT2022)
Yukio Okajima
「NVIDIA プロファイラを用いたPyTorch学習最適化手法のご紹介(修正前 typoあり)」
「NVIDIA プロファイラを用いたPyTorch学習最適化手法のご紹介(修正前 typoあり)」
ManaMurakami1
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
Poole Team
Power biで気づく!現場機器の異常監視システム on azure
Power biで気づく!現場機器の異常監視システム on azure
IoTビジネス共創ラボ
Autoware: ROSを用いた一般道自動運転向けソフトウェアプラットフォーム
Autoware: ROSを用いた一般道自動運転向けソフトウェアプラットフォーム
Takuya Azumi
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
第1回 GPT / ジェネレーティブAI 勉強会「ChatGPTでMML音楽を奏でてみた&LLMで思うこと」
第1回 GPT / ジェネレーティブAI 勉強会「ChatGPTでMML音楽を奏でてみた&LLMで思うこと」
嶋 是一 (Yoshikazu SHIMA)
NLPソリューション開発の最前線
NLPソリューション開発の最前線
Deep Learning Lab(ディープラーニング・ラボ)
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
ゲームニクス理論
ゲームニクス理論
TANREN Inc.
Mais procurados
(20)
スマホアプリ企画書
スマホアプリ企画書
アイデアワークショップ基本キット ver001
アイデアワークショップ基本キット ver001
AIによる未来のUXデサイン? 〜 ChatGPT・AIartなど 〜
AIによる未来のUXデサイン? 〜 ChatGPT・AIartなど 〜
2015年度GPGPU実践プログラミング 第14回 N体問題
2015年度GPGPU実践プログラミング 第14回 N体問題
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
#FTMA15 第一回 鬼コース 全PDF
#FTMA15 第一回 鬼コース 全PDF
デザイン思考入門クラス【2016年1月30日】
デザイン思考入門クラス【2016年1月30日】
Air事業のデザイン組織とデザイナー
Air事業のデザイン組織とデザイナー
Pixie Dust - SIGGGRAPH 2014
Pixie Dust - SIGGGRAPH 2014
サービス開発とその進め方
サービス開発とその進め方
機械学習をScrumで組織的に学習する (RSGT2022)
機械学習をScrumで組織的に学習する (RSGT2022)
「NVIDIA プロファイラを用いたPyTorch学習最適化手法のご紹介(修正前 typoあり)」
「NVIDIA プロファイラを用いたPyTorch学習最適化手法のご紹介(修正前 typoあり)」
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
Power biで気づく!現場機器の異常監視システム on azure
Power biで気づく!現場機器の異常監視システム on azure
Autoware: ROSを用いた一般道自動運転向けソフトウェアプラットフォーム
Autoware: ROSを用いた一般道自動運転向けソフトウェアプラットフォーム
デザインのためのデザイン
デザインのためのデザイン
第1回 GPT / ジェネレーティブAI 勉強会「ChatGPTでMML音楽を奏でてみた&LLMで思うこと」
第1回 GPT / ジェネレーティブAI 勉強会「ChatGPTでMML音楽を奏でてみた&LLMで思うこと」
NLPソリューション開発の最前線
NLPソリューション開発の最前線
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
ゲームニクス理論
ゲームニクス理論
Destaque
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
kyon mm
Droid kaigiプレゼン
Droid kaigiプレゼン
Suguru Oho
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
JobStreamerではじめるJavaBatchのクラウド分散実行
JobStreamerではじめるJavaBatchのクラウド分散実行
Yoshitaka Kawashima
データモデルは時空を越える
データモデルは時空を越える
terahide
絶対落ちないアプリの作り方
絶対落ちないアプリの作り方
Fumihiko Shiroyama
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
sohta
Android学ぶを君へ。生き抜くためのナレッジ共有
Android学ぶを君へ。生き抜くためのナレッジ共有
Shinobu Okano
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
Shinichi Kozake
Java web application testing
Java web application testing
Tokuhiro Matsuno
DB設計でこだわりたい三つの要素
DB設計でこだわりたい三つの要素
Takahiro YAMADA
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
Akio Yonekura
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
Yoshinori OHTA
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
Sociomedia
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
Takahiro Ishiyama
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
Destaque
(20)
確実に良くするUI/UX設計
確実に良くするUI/UX設計
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
Droid kaigiプレゼン
Droid kaigiプレゼン
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
JobStreamerではじめるJavaBatchのクラウド分散実行
JobStreamerではじめるJavaBatchのクラウド分散実行
データモデルは時空を越える
データモデルは時空を越える
絶対落ちないアプリの作り方
絶対落ちないアプリの作り方
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
Android学ぶを君へ。生き抜くためのナレッジ共有
Android学ぶを君へ。生き抜くためのナレッジ共有
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
Java web application testing
Java web application testing
DB設計でこだわりたい三つの要素
DB設計でこだわりたい三つの要素
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Sketchで変わるワークフロー
Sketchで変わるワークフロー
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Mais de YUKI YAMAGUCHI
Think user first #2 フリルの機能改善における仮説と検証
Think user first #2 フリルの機能改善における仮説と検証
YUKI YAMAGUCHI
WordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれ
YUKI YAMAGUCHI
Abc words
Abc words
YUKI YAMAGUCHI
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
YUKI YAMAGUCHI
Sacss WordPress Special with Fireworks
Sacss WordPress Special with Fireworks
YUKI YAMAGUCHI
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
YUKI YAMAGUCHI
Road Map 2012
Road Map 2012
YUKI YAMAGUCHI
EC-CUBEとここが違う!はじめてみようCS-Cart
EC-CUBEとここが違う!はじめてみようCS-Cart
YUKI YAMAGUCHI
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
YUKI YAMAGUCHI
CS -Cart勉強会
CS -Cart勉強会
YUKI YAMAGUCHI
WordPressテーマの作り方
WordPressテーマの作り方
YUKI YAMAGUCHI
Osc2010fukuoka
Osc2010fukuoka
YUKI YAMAGUCHI
Word Camp Fukuoka2010
Word Camp Fukuoka2010
YUKI YAMAGUCHI
WordcampFukuoka2010プレイベント
WordcampFukuoka2010プレイベント
YUKI YAMAGUCHI
Mais de YUKI YAMAGUCHI
(14)
Think user first #2 フリルの機能改善における仮説と検証
Think user first #2 フリルの機能改善における仮説と検証
WordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれ
Abc words
Abc words
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
Sacss WordPress Special with Fireworks
Sacss WordPress Special with Fireworks
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
Road Map 2012
Road Map 2012
EC-CUBEとここが違う!はじめてみようCS-Cart
EC-CUBEとここが違う!はじめてみようCS-Cart
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
CS -Cart勉強会
CS -Cart勉強会
WordPressテーマの作り方
WordPressテーマの作り方
Osc2010fukuoka
Osc2010fukuoka
Word Camp Fukuoka2010
Word Camp Fukuoka2010
WordcampFukuoka2010プレイベント
WordcampFukuoka2010プレイベント
マテリアルデザインを用いたデザインリニューアル [フリル編]
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.
ご清聴ありがとう ございました
Baixar agora