[モバイルUIデザイン]アイコン作成-サイズ

デザイナーの たなか ゆきこ です。

UIにはいろんな要素があるのですが、その中でアイコンについて書いていこうと思います。

アイコンについて

グラフィカル・ユーザ・インタフェースのアイコンといえば『スーザン・ケア』。
知らない人は検索するとすぐ出てくると思います。
ui_design_ico01
泣くmacとか爆弾とか、覚えている人もいるのでは。むかし慣れないうちははよく「爆弾」が出て慌て、慣れてくると「オオカミ少年症候群」で騒がくなってた。

モバイルUIデザインにおける「アイコン」は、個人的見解では「言葉がなくても伝わるもの」のようなピクトグラム(サイン)と似ているものですがやや違うイメージです。

検索を表す虫眼鏡やカメラなど、すでに浸透しているものを別の形にする意味はなく。余計な混乱を招くなどあるため、個人的見解ではユーザーは、ある程度のUIデザインに対する知識を持っている前提な気がします。

しかし、誰にでもわかる普遍的な画像を取り入れる。複雑化しない。核となる要素を抽象化するといった iOSデザインガイドは、Android、Windows に対しても基盤となる考え方ではないでしょうか。

強要はしませんが、デザイナーなら基本のアプリはもちろん、よく使われているアプリ、新しいアプリなど普段からダウンロードして使ってみよう。

作成サイズ

iOSアイコン

種類 サイズ ファイル名
iPhoneアプリアイコン@2x 120 x 120, 180 x 180 Icon-60@2x.png, Icon-60@3x.png
iPadアプリアイコン 76 x 76, 152 x 152 Icon-76.png, Icon-76@2x.png
iPad Proアプリアイコン@2x 167 x 167 Icon-83.5@2x.png
iPad設定アイコン 29 x 29, 58 x 58, 87 x 87 Icon-Small.png, Icon-Small@2x.png, Icon-Small@3x.png
iPadスポットライトアイコン 40 x 40, 80 x 80, 120 x 120 Icon-Small-40.png, Icon-Small-40@2x.png, Icon-Small-40@3x.png
iPadAppStoreアイコン 512 x 512, 1024 x 1024 iTunesArtwork, iTunesArtwork@2x

iOS Human Interface Guidelines の「アイコンや画像の大きさ」 にもまとめられてます。

Androidアイコン

種類 サイズ
mdpi 48
hdpi 72
xhdpi 96
xxhdpi 144
xxxhdpi 192
Play Store 512

Material icons Androidのアイコンについては上記を確認しましょう。ついでにAndroid独自のdpという単位も一緒に覚えましょう。

作成するときは、アイコンだけを見るのではなく、必ず配置してみてバランスを見ます。

ちなみに上記がどこで使われているアイコンなのか理解した上で作成するのも大切です。

dp

Androidは端末ごとに1ピクセルの大きさが違うため、高密度の端末だと1ピクセルが小さく見える。mdpiで100pxと指定したら、hdpiで150pxに見えます。

そのため、密度に依存しないdpという単位があります。100dpで指定した場合は、どの端末でも100dpという大きさで見ることができるというものです。

種類 サイズ dp px
ldpi(あまり使わなくなりました) 0.75倍 4dp 3px
mdpi 1倍(基準) 4dp 4px
hdpi 1.5倍 4dp 6px
xhdpi 2倍 4dp 8dp
xxhdpi 3倍 4dp 12px
xxxhdpi 4倍 4dp 16px

Android アイコンを作成するときは、dpで作成してからそれぞれ、適正なサイズに変更したほうが後々楽なような気がします。

サイズ違いの注意点

2倍3倍のアイコンの場合、アイコンをそのまま拡大・縮小してみたらどうなるかという問題点を考えましょう。小さいサイズにしてみて実際の実機で確認しましょう。

理想論は、それぞれのサイズで適正に作成し直すのがデザイナーの仕事です。

まとめ

諸事情あることもわかりますが、ぼやけたアイコンは良くないですし、小さくなった時、間の空白が潰れて見えないとか、大きくした時に広すぎるように見えるなど、できるだけ調整してあげると全体のレベルが上がるのでやった方がいい気がします。これ以下のレベルは許可しない的などこまで担保するのかというルール(クオリティコントロール)はある程度必要です。

ただ、『デザイナーの工程の後ろにそれを組み込んだり、リリースする人が控えている』ことも意識することを忘れずにしよう。自分で全ての工程を行うのであれば、好きに時間を使えばいいですと思いますが、大抵はそんなことはないはずです。