VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-

この記事は 約 7 分 で読めます。

メインのお仕事がAndroid UI担当になって早1年。

今年は絶対に月に1回はブログを更新すると決めました。
こんにちは。YUKIです。

AndroidのUIデザイン関連でこまめにチェックしている資料をまとめてみました。
これからAndroidのUI関係の情報を集める方、Material Designのガイドラインが発表されてからどう変わったのか収集中の方の参考になれば幸いです！

(2015/1/10 現在)

ドキュメント関係

公式資料関係

Material Design ガイドライン

http://www.google.com/design/spec/material-design/introduction.html

まずは読み込んでMaterial Designの思想を理解

Google Developers Blog

http://googledevelopers.blogspot.jp/

最新情報が更新されるのでチェック

Google Developers Blog 日本語

[http://googledevjp.blogspot.jp/]
(http://googledevjp.blogspot.jp/)

日本語版

その他、ガイドラインなどが日本語でわかりやすく解説されている資料

qiitaのAndroid関連の資料

http://qiita.com/tags/android

参考記事ピップアップ

職種の枠を超えて劇的な効率化をはかる！デザイナーさんむけAndroid のUI作成の簡単まとめ

http://qiita.com/appwatcher/items/aa5f4026dc7db0dd10b2

Frilでは、アプリのUI部分部分はデザイナーでもコードがいじれるようにしてもらってます。（もちろんしっかりコードレビューしてもらう）エンジニアさんと効率よく作業していくために

マテリアルデザイン#1 Menus, Dialog, Pickers

http://qiita.com/m1noon/items/0cab1f685ff9f2a0ee3d

マテリアルデザイン#2 Subheaders, Switches, Snackbars & toasts

[http://qiita.com/m1noon/items/3824c37a2ac8ab77950e]
(http://qiita.com/m1noon/items/3824c37a2ac8ab77950e)

マテリアルデザイン#3 Card, Chips, Tabs

http://qiita.com/m1noon/items/365233b06343b08140a5

マテリアルデザインのそれぞれの要素についてポイントをわかりやすくまとめてあります

yanzmさんのブログ

http://y-anz-m.blogspot.jp/
ここの色ってどこ変えたら変わるんだったっけ…とかいうときにググったらだいたいyanzmさんのブログに辿り着きます。ありがたや…！

デザインしていく上で参考になるリソース

Googleが公式に配っているもの

Color palettes

http://www.google.com/design/spec/resources/color-palettes.html

IllustratorとPhotoshop用のカラースウォッチがダウンロードできます

Layout templates

http://www.google.com/design/spec/resources/layout-templates.html

ai形式のレイアウトのテンプレートがダウンロードできます

Roboto & Noto fonts

http://www.google.com/design/spec/resources/roboto-noto-fonts.html
RobotoとNotoのフォントファイルがダウンロードできます

Sticker sheets & icons

http://www.google.com/design/spec/resources/sticker-sheets-icons.html

各コンポーネントのファイルとアイコンファイルがダウンロードできます。
アイコンファイルはGithubでも管理されています。
svgファイルとかも全部置いてあります！

デザインの参考になる資料

Android UI Patterns

http://www.androiduipatterns.com/
2段タブとかいろんなUIパターンが紹介されています

Material UI Kit

https://ui8.net/product/material-ui-kit?rel=sar

PhotoshopとSketch用の有料のテンプレート集。
ECやSNSっぽい感じだったり、かなりの種類のレイアウトがあります。
買わなくてもどんなレイアウトのページが含まれているのか一覧になっているので、見るだけでも配置や店方の参考になります。

MaterialDialogs Sample

https://play.google.com/store/apps/details?id=com.afollestad.materialdialogssample

マテリアルデザインのダイアログのサンプルアプリ

その他

Lollipop 用のコードサンプル(Google公式、日本語訳)

http://googledevjp.blogspot.jp/2014/12/lollipop.html

##3## ULTRALINX内のBest Android Apps & Gamesに乗っているアプリのUI
http://theultralinx.com/best-android-apps-games

iOS側のデザイン思想やUIパターンも知っておく

公式ドキュメント

iOS Human Interface Guidelines
https://developer.apple.com/jp/devcenter/ios/library/documentation/UserExperience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html

ユーザーインターフェースデザインのヒント
https://developer.apple.com/jp/design/tips/

iOSのデザイン、インターフェース、アニメーションを知るために

Mobile Design Inspiration

http://inspirationmobile.tumblr.com/

Inspired UI

http://inspired-ui.com/

pttrns

http://www.pttrns.com/

uiGIFs

http://uigifs.com/

動きのサンプル

他にも参考になるサイトやリソースの情報があればお待ちしています！

ここ数ヶ月Material Designやその他アプリのUI関係のガイドラインを深く読みこんで、読みこめば読みこむほどガイドラインの捉え方が変わってきました。
ただ単純に準拠するのではなく、そういうガイドラインになった経緯をしっかり考えて、それは自社のアプリのユーザーにとっても最適の解なのか？を社内でのユーザーヒアリングも続けつつ、ユーザーにとってのベストなUIを作っていきたいです。