2012年2月22日水曜日

アイコンのデザインについての考察 by Jon Hicks


前回のエントリでThe Noun Projectについて紹介しました。
The Noun Projectはアイコン探しに使ってるのですが、このサイトのブログにはアイコンのデザインについて参考になる記事が多く、ちょくちょく読んでいます。


©The Noun Project

The Noun Projectのブログにはたまに著名なデザイナーが寄稿しており、その中でJon Hicksによる寄稿を見つけました。

Jon Hicksはイギリスのデザイナーで、Skypeのアイコンの作者であったり、昨年"The Icon Handbook"を出版した事で有名ですね。
http://hicksdesign.co.uk/


©Hicksdesign


©Hicksdesign
The Icon Handbook


Jon Hicksの以下の寄稿がとても参考になったので、The Noun Projectに許可をもらって、日本語訳をさせてもらいました。(けっこう意訳です)




Insights on Symbol Design, by Jon Hicks




あなたが思いついたアイコンをスケッチブックに書き出し、ユーザーにとって判りやすいメタファを考えついた時、どのようにアートワークまで落とし込んでいますか?

デザイナーは皆、それぞれ自分なりのドローイングの手法を持っていますが、最良の結果を得る為の、幾つかの重要な要素があります。

アイコンが適用される領域はWebサイトやアプリなど多岐に渡りますが、ピクセルを扱うにせよセンチメートルを扱うにせよ、共通している原理があります。



Size and context


一般的にアイコンは16px、32px、48pxなどの正方形のピクセルに収められています。

アイコンのサイズは、それが何に使われるかによって決まります。例えばiPhone4のタブバーは60x60pxのアイコンを必要とします。The Icon Handbookでは、アイコンサイズの一覧表を記載しています。
(オンラインはこちら。 http://iconhandbook.co.uk/reference/chart/
アイコンの一覧表には、ファイルの命名規則やプラットフォーム毎の留意点も掲載しています。

アイコンには奇数サイズのキャンバスが最も適しています。下の16x16pxの矢印のアイコンのサンプルでは、矢印は偶数のコマに左右対称に描かれている為、矢印の先端は丁度グリッドのライン上に位置してしまっています。

これではアンチエイリアスで処理されたとしても、矢印の先端は2つのピクセルにまたがってしまい、先端が丸まった形に見えてしまうでしょう。


それでは15x15pxのサンプルを見てみましょう。
こちらは矢印の先端がグリッドのライン上ではなくピクセルに位置している為、先端が丸まって見える事が無くなりましたね。




Balance


アイコンのサイズが規定されていると、ついついサイズいっぱいにアイコンを描いてしまいがちです。しかし、こうするとアイコンを並べた時に、大きさがバラバラに見えてしまいます。下のサンプルでは●と★のアイコンは■のアイコンと比べて、だいぶ小さく見えます。


このケースでは左の■アイコンは、これらのアイコンの中でも最も小さく描く必要があります。もしキャンバスサイズが32x32pxの場合、ガイドラインはおよそ75〜80%、つまり24pxくらいに設定します。

すると、●はガイドラインからややはみ出るくらい、★はスペース全てを使うくらい十字はマージンの半分くらいはみ出る程度、で全体としてバランスが取れます。


視覚は曖昧なものなので、厳密に計算だけでは最適なサイズは導き出せません。頼るのは自分の目ですね。



Grids


レイアウトのデザインでグリッドを用いるように、アイコンのデザインでもグリッドを活用する事が出来ます。グリッドを使う事により、直線、ラウンド、太さ、ギャップなどをグリッドを使って描く事が出来、一貫性のあるバランスの取れたアートワークを作る事が出来ます。
とは言っても、かならずグリッドに沿って描く必要があるわけではありません。下の鉛筆のアイコンのサンプルを見てみましょう。



もしあなたがモバイルアプリに用いるアイコンをデザインしている場合、ピクセル数に合わせたグリッドを使う事が出来ます。もしPCのスクリーン向けだった場合は、Adobe Illustratorのピクセルプレビューモードを使って、小さいキャンバスサイズでグリッドに照らして作成するのも有効です。
例えば上の鉛筆のサンプルは40px四方のキャンバスですが、Illustratorでは自動的に600%の倍率でグリッドを表示し、ガイドにスナップされます。このサイズで正しく表示されていれば、サイズを大きくしても問題ないでしょう。




Style


The Noun Projectでも見られる様に、非常にシンプルな内容のアイコンだったとしてもそのスタイル、表現の仕方は多様です。The Noun Projectで”Bike”と検索すると、下の様な7種類もの自転車のアイコンがヒットします。



これら何れのアイコンも「どれが正しい」「どれが間違い」という事はなく、アイコンを使う状況に対してどれが一番マッチしているか、が重要です。

例えば、標識として代表的なシンボルはトイレのマークですが、これは極力シンプルであるべきでしょう。一方、マニュアルなどに載せるアイコンには、もっと多くの意味を含める必要があります。


http://www.iconwerk.de/)
アイコンをデザインする際、それがどの様なサイズで映しだされるかを想定する事も、とても重要です。例えばアンチエイリアスを使っているアイコンを、大画面のPCモニタやプロジェクターで表示するコンテンツで利用する場合、アイコンが小さければ小さいほどそのエッジはぼやけて見えてしまいます。
従い、この様な用途が想定できる場合はエッジはアンチエイリアスせずに1pxの線でデザインする事で、倍率が上がったとしても崩れずに表示する事が出来ます。





Detail


アイコンは可能な限り、シンプルを目指すべきでしょう。アイコンに情報を付け足せば、付け足すほど、それを見るユーザーはアイコンが何を表しているかを理解するのに、時間がかかる事になります。


例えば、時間を表すシンボルは一般的に「時計」の形をしている事が多いですが、上の2つの時計を見比べると、左側のアイコンの方が「時計」のシンボルとして適している事は明らかです。

一方、シンプルであればあるほど良い、という事ではなく必要最低限の情報は含める必要があります。

下のアイコンは2つとも「iPhone」を表していますが、左のアイコンはAmazonのKindleにも見えてしまいます。iPhoneである事を理解させるには、右のアイコンの様にスピーカーホールとホームボタンの要素が必要です。


アインシュタインの「すべてのものは、できるだけシンプルに作られるべきだ。しかし、よりシンプルであってはいけない。」という名言があります。

シンプルにする為に取り除く要素は、残す要素と同じように重要です。空白の空間が、そのシンボルの形を表す上で重要な要素となる事もあります。



上のサンプルはThe Noun Projectにある「3Dメガネ」のアイコンですが、2つのアイコンを見比べると左のサンプルの方が、フレームのエッジが際立っていて、3Dメガネの形がより理解しやすいはずです。


この様に、ほんの少しの違いであっても全体の印象がガラリと変わってしまう程の大きな要素になる事もあります。




The Icon Handbook


このウォークスルーが皆様にとって役立つ事を願っています。

アイコンについて更に詳しく知りたい方、アイコンの歴史などについて知りたい方は、私の作ったThe Icon Handbookを是非読んでみて下さい!



All contents on this article are the copyright of The Noun Project.