iOS/Androidアプリ開発に関わる全てのデザイナーが知っておくべき20のこと

2015/03/27

みなさん、こんにちは！

今回は、「iOS/Androidアプリ開発に関わる全てのデザイナーが知っておくべき20のこと」と題して、アプリのデザイン作業について書いてみたいと思います。

「良いデザインを生む方法」ではなく、「実務でデザイン作業に関わる以上、最低限、知っておくべきこと」という視点から書いています。

デザイナーさんはもちろんのこと、発注側（デベロッパー）の参考にもなると思いますので、どうぞご覧ください。

ネタはほとんど社内資料（実務資料）です！

1. 成果物の確認から始める

アプリ開発時、デザイナーが作成する成果物は大きく分けて5つあります。

各画面のイメージ（カンプ）
アイコン画像
スプラッシュ画像
各画面の要素画像（背景、ボタン、キャラクター等）
スクリーンショット画像（アプリストア用）

アプリ開発の話が来たら、まず、今回のプロジェクトで何と何を作成すればいいのか確認するところから始めましょう。

ここを怠ると、後で次から次に「これもお願い」「あれもお願い」となって、大変なことになってしまうことも・・・。

2. アプリが対応する画面サイズを確認する

デザインの検討に入る前に、アプリが対応する画面サイズを確認しましょう。

アプリの画面サイズは、端末・OSによって大幅に異なります。

2015年3月時点では、以下の4点を確認しておけば大丈夫でしょう。

iOS、Androidのどちらに対応するのか。または両方に対応するのか。
iOSの場合、iPhoneとiPadのどちらか。または両方か。
iPhoneの場合、iPhone 4S（3.5インチ）からiPhone 6 Plus（5.5インチ）まで、どの端末に対応するのか。
Androidの場合、スマートフォンとタブレットのどちらか。または両方か。

3. アプリが対応する画面の向きを確認する

次に、各OS・端末について画面の向きを確認しましょう。

打合せ段階では縦画面前提で話が進んでいたのに、いざ実装が始まると横画面も・・・なんてことも多々ありますから、注意しておきたいところですね。

アプリが対応する画面の向きは、iPhoneは「縦固定」、iPadは「縦・横両対応」というように、端末ごとに区別して指定できます。

縦・横両対応のアプリを開発する場合、成果物としてカンプを両方作成する必要があるか、画面内の各要素は縦用・横用で区別するか確認します。

4. アプリが対応する画面解像度を確認する

次に、アプリが対応する画面解像度を確認しましょう。

2015年3月現在、iOSでは非Retina（iPad 2, mini）から@3x（iPhone 6 Plus）まで、3通りの画面解像度が存在します。

また、AndroidではMDPI(1x)からXXXHDPI(4x)まで、5通りの画面解像度が存在します。

つまり、iOS/Android両対応のアプリでは、最大で8通りの画面解像度に対応しなければならないということなんです！

作業量に直結してくる部分ですので、しっかりと確認したいところです。

5. カンプのサイズを確認する

カンプの作成に入る前に、納品するカンプのキャンバスサイズを確認しましょう。

例えば、iPhone 6をターゲットにしたカンプを作成する場合、750×1334ピクセルで作成するのが一般的です。

画面サイズ早見表

iPhone 4, 4S	640×960ピクセル
iPhone 5, 5S	640×1136ピクセル
iPhone 6	750×1334ピクセル
iPhone 6 Plus	1080×1920ピクセル
iPad 2, mini	768×1024ピクセル
iPad 3以降, mini 2以降	1536×2048ピクセル

6. iOSとAndroidの単位を理解する

さて、前段階の打合せが終わると、いよいよデザイン作業が始まります。

早速Illustratorを開いて・・・となりそうなところですが、ここでちょっと回り道をして基本の勉強をしましょう。

まず、開発者とのコミュニケーションを円滑にするため、iOSとAndroidで使われる単位を学びます。

iOSの場合

単位は「ポイント」です。

非RetinaディスプレイのiPad2とiPad miniで1ポイント＝1ピクセル。

現在主流のiPhone 5やiPhone 6で1ポイント＝2ピクセル。

そしてフルハイビジョンのiPhone 6 Plusで1ポイント＝3ピクセルとなります。

Androidの場合

単位は「DP」です。

MDPIディスプレイ（中程度の解像度の意味）で1DP＝1ピクセル。

HDPI、XHDPI、XXHDPIときて、最新のXXXHDPIディスプレイ（超超超高解像度の意味）で1DP＝4ピクセルとなります。

開発者と画面仕様を詰めるときは、ポイントやDPの単位で会話すると効率がよく、また誤解を避けられます。

単位換算早見表

iOS 非Retina	1ポイント＝1ピクセル
iOS Retina(@2x)	1ポイント＝2ピクセル
iOS Retina(@3x)	1ポイント＝3ピクセル
Android MDPI	1DP＝1ピクセル
Android HDPI	1DP＝1.5ピクセル
Android XHDPI	1DP＝2ピクセル
Android XXHDPI	1DP＝3ピクセル
Android XXXHDPI	1DP＝4ピクセル

7. iOSの44ポイントのリズムを意識する

iOS向けのデザインを考えるときは、44ポイントのリズム（44、66、88や、22、11等）を意識しましょう。

iOSは、画面上部に表示されるナビゲーションバーの高さや、テーブルビューの1行の高さが44ポイントでデザインされているという特徴があります（縦向き時）。

OS標準パーツと調和のとれたデザインを心がけると良いでしょう。

8. Androidの48DPのリズムを意識する

Android向けのデザインを考えるときは、48DPのリズム（48、72、96や、24、12等）を意識しましょう。

Androidは、iOSとは少し違い、様々な画面要素の高さが48の倍数で設計されているという特徴があります。

また、Androidではボタンやテキストなどの小さい要素のマージンは4の倍数で設計するのが標準的です。

9. 「伸び縮み」を意識したレイアウトとする

画面全体を固定サイズの画像でうめつくすようなデザインは避け、適度に「伸び縮み」する場所を設けたデザインを心がけましょう。

前述の通り、画面サイズは様々です。

カンプ作成の段階で、画面内のどの要素が固定サイズで、どの要素が「伸びる」「縮む」のかをイメージしておくことが大切です。

なお、ウェブのfloat指定とは違い、画面の右にはみ出した要素が自動的に折り返されて下段にくるような仕組みはアプリにはありませんので、その点注意します。

10. ボタンサイズをOS標準に合わせる

ナビゲーションバーやタブバーなどOS標準パーツの上に配置するボタンには、標準といえるサイズがありますので、それに合わせて作成します。

こういう標準に合わせるところをきっちりしてもらえると、開発者から見て好印象なんですよ〜。

あのデザイナーさん、わかってるな、やりやすいな、って思います。

11. ボタン画像にマージンを設定する

ボタン画像の書き出しサイズを開発者と一緒に決めて、それに合うようにマージンを設定してあげましょう。

ジャストサイズ（余白なし）でボタン画像を書き出すと、開発者側で余白を指定しなければならず、思い通りのデザインになるまでのコミュニケーションに手間がかかってしまいます。

また、画像サイズが小さいと、押しにくいボタンになる場合もあります。

今流行のユーザー経験（UX）を左右する部分ですから、妥協せず話し合って決めましょう。

12. ボタンの状態ごとに画像を作成する

各ボタンが取りうる状態を確認し、それぞれの状態に合った画像を作成しましょう。

ボタンには、指で触れている状態、処理中の状態、押せない状態など、様々な状態が存在します。

各ボタンにどのような状態を持たせるかは、開発者が開発時に決定します。

大体は、「通常状態」「押された状態」「押せない状態」の3つの状態に対応していれば大丈夫です。

13. 色やフォントを指定する

画面内で使用する色やフォントについては、具体的に指定しましょう。

色はRGB（＋アルファ）で指定します。

ウェブでよく使われる16進数のカラーコードで指定すれば問題ないでしょう（例：#abcdef）。

フォントは、フォント名とサイズを指定します。

端末・OSによって使えるフォントが違うことに注意します。

また、フォントサイズは、実際の画面サイズで見栄えを確認してから決定します。

14. アイコンはサイズ違いで数種類を用意する

アイコンは1024ピクセル以上のキャンバスで作成し、必要なサイズに縮小して納品しましょう。

(1) iOSの場合

iPhoneとiPadでアイコンサイズが異なりますので注意します。

メインのアイコン以外に、Spotlight用とSettings用のアイコンを指定できます（省略も可能で、省略した場合メインのアイコンが縮小表示されます）。

アプリストア用のアイコンはサイズが巨大です（1024ピクセル四方）。

(2) Androidの場合

端末用のアイコンは1種類しかありません。

アプリストア用のアイコンはサイズが巨大です（512ピクセル四方）。

15. Android用アイコンは形状にこだわる

Android用アイコンは、形状にもこだわりましょう。

Androidでは、アイコンの画像は透過PNGであり、形状は自由です。

納品時も、透過PNGをそのまま納品すればOKです。

iPhoneしか使ったことがないと気が付きにくい部分なので、注意してくださいね。

16. iOS用アイコンは正方形で作成する

iOS用アイコンは正方形で作成しましょう。

角丸処理はOSにより自動的に行われますので、デザイナーは正方形のアイコンを作成し、納品すればOKです。

なお、iOSでは、アイコン画像にアルファチャンネルや透過を含めることはできません。

17. スプラッシュ画像は拡縮や見切りに注意する

スプラッシュ画像とは、アプリ起動時、一瞬表示される画像のことです。

Androidでは、画面サイズとアスペクト比を固定できないケースがほとんどですので、拡大縮小や画面端の見切りに耐えられるデザインとしましょう。

18. スクリーンショットは広告と思って作成する

アプリにとって大切な広告要素ですので、消費者の興味関心を惹くものを作成しましょう。

アプリの画面キャプチャを使いつつ、背景や文字を工夫してデザインします。

国内・海外の有名ドコロのアプリを参考にしてみるといいですよ。

売れているアプリはスクリーンショットもしっかりしています。

19. 納品形式を取り決める

納品前に、開発者とデザイナーの間でディレクトリ構成・ファイル名を取り決めましょう。

(1) iOSの場合

画面単位でディレクトリを分けるなどの方法がよく使われます。

また、解像度の違いを表すため、ファイル名の末尾（拡張子の手前）に@2x、@3xという記号をつけます。

例：image.png, image@2x.png, image@3x.png

(2) Androidの場合

Androidの仕様上、mdpi/hdpi/xhdpi/xxhdpi/xxxhdpiの5つのディレクトリに分けて納品します。

ファイル名については、全ディレクトリで同一の名前を使用します。

例：mdpi/image.png, hdpi/image.png, xhdpi/image.png, xxhdpi/image.png, xxxhdpi/image.png

20. 使えない文字に注意する

Androidの場合、ファイル名に大文字や記号が使えませんので、小文字とアンダースコア「_」でファイル名をつけましょう（例：english_image_01.png）。

iOSの場合、ファイル名に大文字や記号が使えますので、わりと自由にファイル名を付けても大丈夫です（例：EnglishImage-01.png）。

ちなみに、ファイル名は英語でつけます（例：english.png）。

翻訳に自信がなく、変な単語を使って開発者に訂正されてしまうくらいなら、日本語をそのままアルファベットにした表記でも構わないでしょう（例：nihongo.png）。

また、全体を通して、異なる画像に同じ名前をつけてはいけません（Androidの解像度違いは除く）。

意図せずファイル名が重複することのないよう注意しましょう。

まとめ

いかがでしたか？

これからアプリの開発に関わる方に参考にしていただけると嬉しいです。

最後にまとめておきます。

成果物の確認から始める
アプリが対応する画面サイズを確認する
アプリが対応する画面の向きを確認する
アプリが対応する画面解像度を確認する
カンプのサイズを確認する
iOSとAndroidの単位を理解する
iOSの44ポイントのリズムを意識する
Androidの48DPのリズムを意識する
「伸び縮み」を意識したレイアウトとする
ボタンサイズをOS標準に合わせる
ボタン画像にマージンを設定する
ボタンの状態ごとに画像を作成する
色やフォントを指定する
アイコンはサイズ違いで数種類を用意する
Android用アイコンは形状にこだわる
iOS用アイコンは正方形で作成する
スプラッシュ画像は拡縮や見切りに注意する
スクリーンショットは広告と思って作成する
納品形式を取り決める
ファイル名に注意する

それではまた！

- コラム