デザイナーが教える。多くの人に伝わるアイコンの作り方

クリエイティブは必要なし。アイコンデザインはとにかく「分かりやすさ」

ボクがアイコンをデザインするとき、一番大事にしていることが「分かりやすさ」です。前回の考え方でも書きましたが、より多くの人に伝えられるようにするためには何をアイコンにするかだけでなく、デザインも視覚的にスッと入っていくようにシンプルにつくります。

アイコンはロゴではないので「伝わる」より「伝える」ものであり、

などを考慮しながらつくります。
そうすると必然的にわかりやすいシンプルなアイコンになっていきます。いわば道路標識みたいなものですね。

キャリアの浅いデザイナーほど複雑な描写にしがちです。出来上がったアイコンを一度俯瞰で見て、誰もがそのアイコンの意味を理解できるか、線が多くないか、縮小しても認識できるか、余計な装飾はしていないかなどを注意して見ながら調整して完成させましょう。

ひとつつくるなら全てのアイコンを制作する

アイコンはもはや全体のデザインの一部を構成する立派なパーツです。

街に貼っているポスターなどを見てみると、使っているアイコンのデザインテイストがバラバラになっているポスターをよく見かけます。そういうものを見る度に「いろんなサイトからフリーで使えるアイコンをダウンロードして寄せ集めて使ってるんだろうなー」と勝手に想像しています（笑）。

webサイトも同じで、アイコンのデザインテイストが揃えられていないということに意外と気づかないデザイナーもいるようです。アイコンはデザインした人が一番意図を理解しているはずなので、統一感を持たせるためにもひとつつくるなら必要なアイコンは全部自作するほうがいいです。

逆に中途半端につくるくらいなら使わないという「all or nothing」くらいの気持ちでいいと思います。

アイコン制作のルールは文字で残しておく

webサイトの場合はサイトを運営していく中で、後から新しいアイコンを追加で制作することもよくあるので、アイコン制作時のルールは箇条書きでいいのでメモ帳などに残しておきましょう。そうすると後日つくるときも比較的スムーズに同じテイストで制作できるので便利です。

すべてのアイコンのデザインテイストを合わせる

アイコンは文字よりも視認性が高いことは書きましたが、認識しやすいのでデザインの統一感という部分でも大きな役割を担います。

同じデザインテイストで揃えられたアイコン一式を目にすると、とてもしっかり設計されているwebサイト、ブランドという印象を受けますし、はじめての方からの信用度も上がります。

アイコンデザインの統一感で意識したい部分を挙げると、

などです。
アイコンに使うカラーはロゴやサイトデザインに使用しているカラーから選択します。線の太さや角度はターゲット層を考慮しながら調整し、ロゴのテイストや全体のトンマナに合わせてアイコンのデザインもつくっていく必要があります。

あと大事なのはアイコンのサイズです。
特に線を使うアイコンの場合、制作する段階からサイズを合わせておかないと使用するときに線の太さがまちまちになってしまったりするので、グラフィックソフトのillustratorなどを使い、30mm角の領域内で制作するなど自分なりのルールを決めてから制作したほうがスムーズです。

整頓された領域の中でつくることで全体のテイストもすぐに確認できますし、新しくつくるアイコンが統一感からズレがないか把握しやすくなるのでオススメの方法です。

アイコンデザイン事例

文章で書くだけではあまり説得力もないので、最後にボクが制作したアイコンデザインの事例を紹介しようと思います。

CloudCREW

まずはGMOクラウドさまの新サービス「CloudCREW」のwebサイトに使用するために制作したアイコン一式。

webサイト制作時に指定されたカラーを使いつつ、線の太さをすべて合わせ、少しポップなテイストですべてのアイコンを制作することで難しそうなイメージのクラウドサービスに親しみやすさを持ってもらおうという意味を込めてつくりました。

ナノナノファクトリー

次は昨年つくらせてもらったナノナノファクトリーさんのアイコン一式。

木工集団のwebサイトということで、木の上にステンシルするようなイメージでところどころにステンシル風に加工し、あまり類を見ないテイストで各アイコンを制作。電話のアイコンとして受話器を使っていますが、これはナノナノファクトリーさんのお客さまの層を考慮してのことです。

anna

最後にytvメディアさんが運営する関西女性のためのwebメディア「anna」の媒体資料用に制作したアイコン一式。

annaのカラーを使いつつ、女性向けのメディアであることを伝えるために少し柔らかいテイストでアイコンデザインを統一しました。ベタ塗りなしで線の太さをすべて合わせ、線と点のみで全アイコンを制作。