Android UI Design ことはじめ

この記事は UI Design Advent Calendar 4日目の記事です。（日にちを一日勘違いしていた上、書くのに時間がかかって投稿が２日も遅くなってしまいました…）

はじめに

何を書くのか

AndroidのUIデザインを始めるに際しての考え方、デザイン環境セットアップについて書きます。

何故書くのか

自分用備忘メモの役割が大きいです。ただ、自分が「さてAndroid用アプリのUI始めるか！」となった時にまとまった情報を見つけるのが結構大変で…これからAndroidのUIデザインを始めます、という方の参考に少しでもなれば嬉しいです。

また、AndroidのUIデザインでお見せできる実際のファイルが無かったため、今回急遽私が普段使うアプリを一つ簡単にMaterial Designをベースにリデザインしてみました。Sketchファイルも置いておくので、参考になれば幸いです。

• Sketch ファイル
• 作成したデザインのプロトタイプ

目次

• AndroidのUIデザインの考え方
• デザイン環境セットアップ
• リソース・参考にしたもの

1. AndroidのUIデザインの考え方

Material Design

AndroidのUIデザインを始めるときにまず必ず押さえなければいけないのが、「Material Design」というGoogleが作成したビジュアル・インタラクション・モーションを包括したデザインガイドラインです。

2014年6月に発表されたこの「Material Design」は、「体験も見た目も含めた良いデザインの鉄則を統合した、「Visual Language」を作る」ため策定され、その目的はAndroidというプラットフォーム上・クロスデバイス間での体験の統一（そして底上げ）という2つの側面を持っています。（参考：Material Design Instruction）

私個人としては2つの理由から、Material DesignガイドラインをベースにAndroidのデザインを考えています。

1つ目は、中長期的にみたAndroidというプラットフォーム上の体験の統一からのユーザーの利便性向上。2つ目は開発のスピードアップや最終プロダクトのクオリティ向上です。（提供したい体験に対して、本当に必要なときにOriginalのビューを考える）つまり、そもそもの思想やコンポーネント単位ではMaterialに結構忠実なんですが　細かいデザインの見せ方はところどころその時々で必要なものに変えてます。

というのも重要なのは、1dpのズレもなくMaterialに従うことではなくて、常に今最適な体験ってなんだろう？このスクリーンでユーザーにとってもらいたい行動は何だろう？と考えた上でUIを考えることだからかなと。

実際に色々アプリインストールして使ってみると分かるんですが、別に全てが全てMaterial Designを導入してる訳じゃないんですよね。その都度、今回のプロダクトはどうしようかな？と考える必要があります。

まず最初にすること

• 「Material Design Introduction」http://www.google.com/design/spec/material-design/introduction.html#introduction-principles
• Developer向けのガイドライン
• Google Design ArticlesはどれもMaterialへの理解がすっごく深まります。分かりやすい。
• 「Android アプリにマテリアル デザインを導入する」Google Developer Japanブログより。日本語です！
• Google 純正アプリはMaterialを上手く使っているので片っ端から見ています
• Best Appに選ばれたアプリはMaterialを自プロダクトに上手く融合しているところが多いです。

2. デザイン環境セットアップ

使うアプリケーション・端末

• Sketch：言わずもがな
• Skala Preview：Sketchで作っているデザインのリアルタイムプレビュー用
• Android端末の実機：私はNexus5をヤフオクで2万円で買いました。格安SIM入れて日常使い。
• Prott：実機で画像にリンクを貼って導線確認するときのチェック用。

Androidのデザインの単位は「dp」

WebやiOSのデザインをするときは「px」という単位で考えるのに対し、Androidでは「dp」を使います。様々な端末があるAndroidでは、端末によってどのくらいの精緻さ（@1x,2x,3x…）で画面を描画するかが変わってきます。そんな状況下でも、「精緻さ」＝密度に依存せずに同じように表示できるのが「dp」です。詳しくはこちらの記事に分かりやすくまとまっています。

mdpi(@1x)をベースにデザインを作成する

実際にSketchで画面を作っていく際は、mdpi(@1x)をベースに構成し、画像書き出しが必要な箇所は上記の表の通り、@1x, @1.5x, @2x, @3x, @4xと5つのサイズで書き出します。画像引用元：Material Design Guideline “Layout > Units and measurements” 

アートボードのサイズは360 x 640px（スマートフォン向け）

SketchのArtboardテンプレサイズが360×640だったのと、自分自身の手元にある端末のNexus5も同サイズ、また「Device Metrics」で確認したところ360×640の端末が多かったのでこのサイズで作成しました。後述するプロトタイピングツール「Prott」の対応サイズもNexus5向けだったのもあります。

デフォルトで使う日本語フォントの悩ましい問題

Lollipop以降、欧文フォントとしてRoboto, 日本語・中国語・韓国語のフォントとしてはNoto CJKが提供されています。ただ、どの端末にもNotoがインストールされている訳ではありません。

そこでここでのポイントは、①デフォルトのフォントをその端末ごとのSystem Fontとするか否か　②独自で指定する場合に何を選ぶか、の2点と考えています。

私は今回携わったプロジェクトでは①各端末ごとのデフォルトフォントを選択。ただ、デザインデータ上はAndroid4.0系での標準だったモトヤLマルベリ3等幅を選択しました。（というのも、手元のNexus5 Android 5.0のシステムフォントがモトヤだったため。）モトヤフォントはこちらの記事を参照し、インストールしました。

②について留意点。Noto CJK自体をアプリに埋め込んでもらうのもアリだな？と当時は考えたのですが、Noto Sans CJKはフォントファイルのサイズが巨大だよ、とのアドバイスを社内のエンジニアさんからもらいました。その代わり、Noto Sans CJKをTrueType形式に変換した「源真ゴシック」だとファイルサイズが軽くなるそうで、そちらを使う選択肢もあるなと思いました。

色彩設計

原則として、3つの色―Base Color, Primary Color, Accent Color―の組み合わせがベースになります。（参考：Material Design Guideline内「Style > Color」の中の、UI color application）

今回のサンプルだと、Base Color #000, Primary Colorに赤、Accent Colorに山吹色を選択しました。

8dp単位でのレイアウト設計とコンポーネント調整・4dp単位でのテキスト調整

Material Designをベースとすると、8dpと4dpというのがグリッドの区切りの目安となります。

Material Design Guideline Metrics & Keylines

プロトタイピングツール「Prott」で実機確認

1. まずは自分が実機確認する端末のDensityを調べ、書き出しサイズを決定します。

「Device Metrics」にはそれぞれの端末のスクリーンサイズ、画面dpサイズ、Densityが一覧で提供されています。これによるとNexus5はDensity 3.0のxxxhdpi。Prottへの書き出し時は3xで書きだしたものを使います。

2. ProttのSketch Pluginで　ArtboardごとまるっとProttへ同期

3. リンクを繋いで、実機確認

Prott Web上からリンクを繋いだら、シェアURL生成→このURLを実機で確認しましょう！

その他参考にしたもの

記事、スライド

• 「Prott for android デザイナー&エンジニア わたしたちの開発秘話」
• 「初めてAndroidアプリをデザインするときの基本の「き」」
• 「Redesigning Chrome Android. Part 1 of 2」
• 「Starbucks Android Material Design」

その他

• とにかくエンジニアさんとどういう風に実装するか聞いたり、相談をたくさんしました。 Big thanks to Alan as a Material おじさん！

最後に

Material Designの素晴らしいところは、全体の体験のデザインから細部のコンポーネントまで全てが言語化されていること。

今の半年、Android―Material DesignをベースにUIを0から組み立てることを経験した結果、いかに「デザインの統一性」をとっていくか、というのをこのガイドラインと実際のデザインから学びました。「色、タイポグラフィ、グリッド、レイアウト」といった大きな原則から、「コンポーネント」や「ナビゲーションの選びどころ」といった細部まで、どういうふうに統一性をとってユーザーに体験を提供すればよいのかというのは　他の何をデザインするときも参考になるなと考えています。（実際、今会社で私のプロジェクトに入ってくれているアシスタントUIデザイナーの方には、iOSよりもAndroidのデザインを先に体験してもらっています。）

Goodpatch Design Schoolのお知らせ

宣伝になってしまうのですが、私が今勤めている会社―Goodpatchではこの冬学生さん向けに「Design School」というのを開催する予定です。こんな感じでUI Designを学べるほか、もっと広義のデザイン、サービスデザインやサービスのグロースについての講義を全部で6回、計1ヶ月のプログラムでお届けします。12/11がES締め切りなので、是非興味のある方は応募してください！（私も何かしらの講義をする予定です！）

UI Design Advent Calendar 2015…

最初にも述べた通り、本来なら12/4が私のパートだったのですが、、12/5は安藤先生、12/6はまだ空いております！12/7は弊社で同じチーム・そして私の憧れのデザイナー、りょうこさんが担当です！よろしくお願いします。