フェンリル

Developer's Blog

アイコンデザイン時に気をつけたい 10項目

デザイナーの大西です。

アプリケーションアイコン作成時に気を付けていることを書き出してみました。 基本的な事、作った後で気づく落とし穴、確認しておきたいことなど、アイコン作成の参考にしていただければ幸いです。

また、OS のガイドラインでアプリケーションアイコンについて言及されている場合が多いです。アングルや光源、影の付け方まで細かく定められているものもあり参考になるはずです。

 

ボリュームのある形

アイコンサイズの正方形でアイコンを囲んだときにどれだけ隙間が少ないか、がボリュームです。

ボリュームないと目立たないですし、隙間部分はクリックできない印象を与えます。ボリュームがあるだけでクリックしやすそうな安定感があります。

icon01_volume

隙間の少ないアイコン(左)と隙間の多いアイコン(右)

キーになる色は少なめに

メインの色は 1色〜2色を目安に、不要な色を増やさない方が印象的に仕上がります。ただ、煩雑にならないように多くの色を使い、”カラフル”というひとつの色としてカウントさせるのはアリと思います。

分かりやすい題材

見た事もないような道具のアイコンや、色んなオブジェクトが4つも5つも重なりあっているアイコンなどは、煩雑さや覚えにくさを生む原因になります。また、何のアプリケーションなのかがアイコンから想像できる題材を選ぶと分かりやすくてユーザーにもやさしいです。

細部にこだわる

細かく描き込んだアイコンはもちろんですが、ごくごくシンプルなアイコンであったとしても、点や線の位置、大きさ、比率などへのこだわりは出来上がった時のクオリティに影響を与えます。

誰からも同じものに見える

見る人によってパソコンかテレビか電子レンジか判断が別れるデザインになっていてはアイコンの印象がバラバラになってしまいます。何人かにどう見えるか聞いたり、固有の特徴(テレビならアンテナなど)を強調したりして回避します。

境界線や背景、質感を付ける

デスクトップやホーム画面は通常様々な壁紙が設定できるので、壁紙によってはアイコンが見えない!という事態を防ぐ為です。OS によっては自動で防いでくれるものもあります。

icon02_bg

背景色と同化してしまうアイコン例

icon03_bg

境界線(+質感)をつけて回避。どんな背景でもそれなりに見えるはず

縮小してもそのアイコンだと分かる

縮小すると潰れて何が描いてあるのか分からなくなったり、印象が全く違ったりしないようにラフの段階でチェックしておきましょう。アイコンの高解像度化が進んでいますが、小さいアイコンもまだまだ現役です。

単純化してもそのアイコンだと分かる

色や質感を排除して大体の形でアイコンを認識できるか、下のような白黒の単純なシルエットにしてみます。

icon04_silhouette

Sleipnir Mobile for Android のアイコン(左)と大まかな要素の形だけを抜いたシルエット(右)

余談ですが、こういったシルエットのアイコンはそのソフトウェアの Web ページやインターフェース上で出番が多かったりもします。

そのアイコンを言葉で表現できる

分かりやすさや覚えやすさ、印象的かどうかで迷ったとき、判断基準のひとつとして簡潔な言葉で表現できるか試してみます。「細かい文字が書いてある白っぽい四角形」よりも「黄色い本」のような一言二言の簡潔な言葉で表現できる方が印象に残りやすい場合が多いです。

魅力的か

上で長々書きましたが結局これが一番大事だと思います。思わず触れたくなるアイコンか。当たり前ですが、見るだけで多くの人が嫌悪感を持つようなアイコンは避けましょう。

魅力的なものが作れれば、それだけで気に入ってもらえ覚えてもらえます。気に入ってもらえれば、デスクトップやホーム画面の特等席に置いてもらえる可能性も高まります。

 

フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

フェンリルの開発者アカウントでは、フェンリルプロダクトの最新開発情報などをつぶやいています。よろしければフォローしてください!

関連記事

Facebook コメント

コメント

Jiong2012年01月30日 12:33

ICONだけでなく、アプリ内ボタンなどにも応用効きますね。

大西2012年01月30日 20:50

Jiong 様
コメントありがとうございます。応用できる部分もありますね。
違いとしては以下などでしょうか。
・アプリケーション内に置くボタンとしてのアイコンは、言語としての役割をよりシビアに求められる
・同アプリケーション内で使用している他のアイコンとの整合性、統一感をとる必要あり
・マウスホバー・クリック・タップなどへの反応や、有効 / 無効などの状態が指定できる場合は、そこにも気を配る

また機会があれば、アプリケーション内のアイコンについても書いてみたいと思います:)

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。