Androidアプリデザインの基礎知識

Introduction

はじめまして。ジェネシックスでUIデザイナーとして働いている＠mihamochiです。

この記事は、ジェネシックス内で初めてAndroid端末向けアプリケーション開発に携わるデザイナーが、戸惑うことなく作業を始められるようデザインの各ステップごとに分けてまとめた内部資料を一般に公開するものです。
インターネット上にはAndroidアプリ制作に関連する様々な記事がアップされておりますが、スタートアップするにあたり、このようなまとまった記事がなかなかないのが現状です。”Android Developers”にすら、基本的なパーツの説明が主となり、ざっくりとしかデザイン定義がされていないのです。
”Androidアプリデザインの基礎知識”は、ポイントを絞り、基本、観念を抑え、まずこのドキュメントを読めば、アプリをスムーズに制作することができるよう意識して作成いたしました。今後も随時新しい情報を追加予定です。

Before Starting Design…

1．端末ごとの解像度の理解

Android端末は、ディスプレイサイズ、画像解像度が端末により異なるため、
もちろん見え方もそれぞれです。フォントもメーカーにより異なります。
よって、デザインをするにあたり、まず端末ごとの特徴の理解は必須になります。

下記リンクに端末ごとの情報が詳しくまとめられています。
Hacking My Way ～ itogのhack日記：  Androidデバイスのディスプレイサイズ、DPI一覧

※一番右のリスト：Densityが、
・0.75=ldpi（低解像度）
・1=mdpi（中解像度）
・1.5=hdpi（高解像度）
・2=xhdpi（超高解像度）
になります。

2．Android独自の単位の理解

Androidは端末によって解像度や画面サイズが異なるため、
サイズ指定をする上で、独自の単位が存在します。
デザイナーとして主に使うのは、pxの代わりに使われる
dip（ディップ）またはdp（ディーピー） = Density-independent Pixelsと呼ばれる抽象的な単位、
フォントサイズを指定するときに使うsp=Scale-independent Pixelsと呼ばれる単位です。

※Density-independent Pixels・・・密度非依存ピクセル
※Scale-independent Pixels・・・スケール非依存ピクセル
（どちらも解像度に合わせて表示サイズを拡縮する単位。）

下記の記事をよく理解し、特にdipの理解を高めましょう。

• Y.A.M の 雑記帳：  Android Dimension 単位
  Androidで用いる単位全般を説明してくれています。
• Y.A.M の 雑記帳：  Android　dip, dp, sp から pt, pxに変換する
  dipからpxに変換するやり方。プログラミングを含んでいるので参考まで。
• Lazy Goat：  Densityって何 「画面密度、解像度、画面サイズ」 （下のほう）
  実際に部品を入れdip指定した、解像度ごとの画面のスクリーンショットがのっています。

3．Read “Android UI Design Tips”（必読！）

Android端末用にＵＩ設計、デザインするにあたり、google社がどういったものを求めているのか、書かれています。
“Android Developers”のUI Guidelineよりも、具体的なデザインテイストについて、画像の書き出し方など、参考になります。（ちょっとしたiOS Human Interface Guideline的な感じです）

Y.A.M の 雑記帳：  Android UI Design Tips

※絵も入っているので、訳だけでなくプレゼンテーションの方もぜひみてください。

4．Android端末３つのカテゴリ

Androidの端末には大きく分けて３つのカテゴリに分けられます。

・海外製
ex ) HTC, LG, SAMSUNG(Galaxy)
画面解像度が低いものが多い。
アンドロイドの基準に添って作られている。
Galaxyはこの中ではソニエリ寄り。(解像度が大きかったりするので)

・ソニエリ製
ex ) Xperia arc, mini…
ソニエリが独自にアンドロイド基準をカスタマイズして搭載している。
アイコンのデザインやボタンのデザインが異なる場合が多い。
海外でも売られている。

・日本製
ex ) REGZA phone, AQUOS phone, LYNX, etc…..
海外では売られていない。
日本のガラケーからの機能を搭載している。（おさいふケータイ、赤外線通信、ワンセグ、、など。）

【まとめ】
海外をターゲットにいれているアプリを開発する場合は海外製の端末において一番よいデザインや設計をするとよい。このように、case by caseで端末対応をすること。上記カテゴリ分けは基礎知識として頭に入れておくとよい。

5．SDKをインストール

スクリーンキャプチャを撮る、また後で出てくる9-patchという技法を用いた画像を制作するために
ＳＤＫをインストールする必要があります。

・How to Install
インストールの仕方が詳しく載っています。
smartgoods.me：  【初心者向け】Android SDKインストール手順 2011年1月版！（windows版）

・ここからインストール
バージョンは常に新しくなるのでこちらから最新版をダウンロードしてください。
Android Developers：  Download the Android SDK

ツールの具体的な使い方については後ほど説明しております。

Design Steps

ここからは実際デザインをスタートするところから、アプリのデザインを完成させるまでの流れを
ステップごとに説明していきます。

Step1: 480*854（hdpi）でレイアウト作成
Step2: 画像の最適な書き出し方をエンジニアさんと相談
Step3: 部品を書き出す
Step4: エンジニアにデザイン指定を伝える
Step5: Lancher Iconの作成
Step6: マーケット素材の用意

Step1: 480*854（hdpi）でレイアウト作成

現在、Android端末において最も多いのが高解像度(hdpi)です。
よって、この解像度をベースに実機で確認しながらデザインするのがベストだと考えています。

【私なりのコツ・ポイント】
部品、レイアウトは3で割れる整数を使うこと。
hdpi=1dp=1.5pxなので、dip指定するとき計算しやすいため。
dipは視覚的単位なので、それぞれの解像度の端末で確認したとき、多少のずれはある可能性もあるが、目安にはなる。
高解像度でも480*854、480*800のように縦横の比率が違うものがあるが、基本上からdipを優先してあわせていき、下はみきれさせる、と考えるのが妥当ではなかろうか。
ライブドアのデザイナーさんは、高解像度（hdpi）をベースにグリッドを使って比率を出して制作しているとのことでした。

ブログの記事はこちらから
ジェネシックスブログ：  【寄稿】livedoor × genesix技術交流会をやってみた。

Step2: 画像の最適な書き出し方をエンジニアと相談

アプリをデザインする時は、エンジニアさんと密にやりとりをしながら進めていくことが基本です。
ベストな組み方を開発者と一緒に考えて、それにそった部品の書き出し方を考えるべきです。
（※書き出しパターンについては次のStep3にて詳しく説明しております。）

Step3:  部品を書き出す

・各部品のサイズやデザインルールはこちら（参考までに）
Android Developers：  User Interface Guidelines 

※特にアイコンやパーツのルールが書いてあります。
ただ、指定されたサイズで作ると少し小さいといった問題もあるので
その辺はフレキシブルに対応すること。
例：Lancher Iconの余白は上下左右1px（シャドウ分）程度で十分。など

～書き出しパターン～

以下、あくまで私のやり方として、紹介させていただきます。

その1：　高解像度用に書き出した画像を縮小する

高解像度用に書き出したPNGを縮小して、中解像度、低解像度用の画像を作成する方法。
そのまま画像を縮小しても絵のディテールなどつぶれたりしない場合は、こちらで対応すると早い。

その2：　各解像度ごとに部品を作りこむ

（特にアイコンなど、必ず綺麗に出したい画像に適した方法）

高解像度ベースで仕上げたデータをもとに、解像度の調整を行い、それぞれの解像度ごとに、
シェイプなどの修正を加える方法。（Android Developersでは推奨されているやり方）

各解像度別の画像のサイズは、
高解像度（hdpi）→100％とする場合、
中解像度（mdpi）→66％　（正確には66.666・・・）
低解像度(ldpi)→50％
・・・となります。

解像度を落としたとき、画像に含まれた文字や絵がつぶれてしまったり、レイヤー効果などがうまく反映されなかったりするときもあるので、そのときは調整する必要があるとAndroid Developersには書いてあります。また、低解像度用の部品に関しては、アンシャープマスクをかけてあげることで、若干ですがぱっきりした画像を制作することができます。

その3：　9-patchを使って作成

9-patchとは、解像度に応じてグラフィックを伸縮させるリキッドデザインを可能とした画像制作方法です。画像の一部分を引き伸ばすことが可能な画像は、9-patchをうまく利用して、超高解像度の端末対応もカバーしてしまいましょう。

～やりかた～

1. できるだけ最小サイズで画像を書き出す
2. SDKのtoolsの中にある”draw9patch.bat”を立ち上げる
3. 画像の上下左右に1pxの黒い線を引く（下記の9patchの原理参照）
4. ツールバーのメニューから保存（自動的に「ファイル名.9.png」と保存される）

☆9patchの原理
左、上は引き伸ばしてよい場所に黒の線を引く。
右、下は文字などがその上からのる場合に、そのコンテンツの領域を指定した線。
引き伸ばしたくないところっていう観点で引いたりもしました。

• 3156note： 9-patch
  Android DeveloperのDraw9-patchページの和訳、＋α実作例
• 明日への鍵： 9patchを覚えよう！
• タオソフトウェアブログ：  Android Nine Patch(9-patch)フォーマットとは
• Caraldo.net：  Draw 9-patchを使ってAndroidアプリを解像度に応じたリキッドデザインする
  ここでは関係ないですが、ついでにdpの説明などもわかりやすくしているのでお勧めです。

その4：　大きめに作った部品をdip指定してあげる

高解像度よりも大きめにひとつ部品を作ってあげて、レイアウトで決めたdipを指定する。

Step4: エンジニアにデザイン指定を伝える

Step３で切り出したパーツを実際に組み込んでもらうために、エンジニアさんにデザイン指定を詳しくお伝えします。

私の場合、ページのデザインを大きく印刷した紙に、フォントサイズやカラー、マージンの幅、各パーツのサイズなど、できるだけ詳細まで分かりやすく書き込み、エンジニアさんにお渡ししています。

伝わりやすいように、パーツの名前は何かルールを決めておくのがよいです。
なお、実機に組み込んで確認する場合は、各端末により見え方が異なるため、
できるだけたくさんの端末で確認しましょう。

Step5: Launcher Iconの作成

端末のホーム画面で表示されるアプリのアイコンをLauncher Iconと呼びます。
エンジニアさんがカリカリ組み込んでいただいてる間に、
端末でちょいちょいチェックしながらLauncher Icon制作もとりかかっていきましょう。

アシアルブログ：　AndroidにおけるLauncherアイコン、背景画像の作り方
一度目を通してみてください。わかりやすくまとまっています。

Step6: マーケット素材の用意

最後はマーケットに出す際に必要な素材作成です。
サイズや書き出し方などのルールがありますので下記リンクを確認してください。
Android Market ヘルプ： アプリケーション用の画像アセット

こちらでマーケット上に素材をアップします。
Android Market： google アカウント

——–  これで一連の流れはおわりです！ ——–

Others

・スクリーンショットの撮り方
逆引きAndroid入門： エミュレーター／実機の画面キャプチャ（スクリーンショット）を撮るには

上記リンクにステップが記載してあります。
私は「1. Android SDK のみで実行する方法（DDMS）」のやり方で撮っていました。
端末の解像度と同じ大きさでスクリーンショットが撮れます。

Conclusion

以上、私がAndroidアプリを初めて作るにあたり、つまづいたことから学んだ知識をわかりやすくまとめたものになります。
Androidアプリ展開の傾向として、iPhoneですでにリリースされているものを今度はAndroidで、、といったケースも多いと思います。この場合、ただデザインをそっくりそのまま使おうという考え方だと、より使い勝手のよいアプリを開発することはできません。
まず、メニューボタンが存在すること、タブは上に存在すること、戻るボタンがあることなど、様々な面でAndroidはiPhoneとは違う点があがります。その上、Androidマーケットにおいて上位に常に生き残ることは至難の業ですので、使い勝手のよくないアプリはダウンロード数が伸びず、すぐに埋もれてしまいます。Androidの特性をよく理解し、適切なＵＩパーツを用い、Android用にアプリをカスタマイズすることが、よりよいAndroidアプリを生み出す肝だと思います。
また、”Android Developers”で述べられているＵＩガイドラインはおおよその目安であって、”iOS Human Interface Guideline”と比較すると、まだまだしっかりとしたものではありません。さらに、バージョンアップする度に仕様等が変わっていくので、さらっと読んで、頭の片隅に入れておけばいいと思います。必読と書かせていただいた”Android UI Design Tips”をよく理解し、デザインする上で役立てていただければと思います。

**********

• 「iPhonesアプリとAndroidアプリを比較する〜はてなブックマーク開発の現場から〜」
  こちらもとても参考になります。
• 「speckyboy： Android App Developers GUI Kits, Icons, Fonts and Tools」
  こんなテンプレートキットがまとめられた記事見つけました。