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

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

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

アイコンについて

グラフィカル・ユーザ・インタフェースのアイコンといえば『スーザン・ケア』。
知らない人は検索するとすぐ出てくると思います。

泣くmacとか爆弾とか、覚えている人もいるのでは。むかし慣れないうちははよく「爆弾」が出て慌て、慣れてくると「オオカミ少年症候群」で騒がくなってた。

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

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

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

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

作成サイズ

iOSアイコン

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

Androidアイコン

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

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

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

dp

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

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

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

サイズ違いの注意点

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

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

まとめ

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

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