AndroidのUIをデザインするとき参考にしている資料まとめ


a

メインのお仕事が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/
日本語版

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

qiitaのAndroid関連の資料

http://qiita.com/tags/android

参考記事ピップアップ

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

http://qiita.com/appwatcher/items/aa5f4026dc7db0dd10b2
画像リソースなどは自分でコミットしたほうがエンジニアさんに余計な手間をかけさせずにすみますし、色や文字サイズの変更などでも直接コードを変更させてもらうこともあるので(もちろんしっかりコードレビューしてもらっています)効率よく作業していくために

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

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

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

http://qiita.com/m1noon/items/3824c37a2ac8ab77950e

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

http://qiita.com/m1noon/items/365233b06343b08140a5
マテリアルデザインのそれぞれの要素についてポイントをわかりやすくまとめてあります

yanzmさんのブログ

http://y-anz-m.blogspot.jp/
ここの色ってどこ変えたら変わるんだったっけ…とかいうときに調べていたら、だいたいstackoverflowか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

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なのか?をひとつひとつ考えた上で実装していくようにしたいと思っています。
ユーザーヒアリングも続けつつ、使ってくれている人にとってのベストなUIを常に考えていきたいです。


Tags:, ,

こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト