本記事は『アイコンデザインのひみつ』の「chapter3 「アイコン」を作ってみよう」から一部を抜粋したものです。掲載にあたって編集しています。
アイコンデザインの進め方
ここでは、自分でアイコンを作る時の進め方のポイントから、実際の作り方、テクニックなどを見ていきます。
すべての記号に共通するのは、それを使う人にとっては他の記号との区別がついたということです。そんなことも頭の片隅に置きつつ、実際にアイコンデザインを進めていきましょう。
step1 どんなことでも目的を再確認!
デザインには目的があります。アイコンを、なぜ作りたいのか、なぜ使いたいのか。再確認しましょう。
step2 対象をリサーチしよう
例えばリンゴ一つとってもいろんな形、表現があります。シンプルな表現だからこそ、いろいろなデザインなどを調べましょう。
step3 カタチのスタイルを考えよう
シンプルな表現のアイコンだからこそスタイルは大切です。複数のモチーフのアイコンを作る時は特に共通するスタイルを先に考えましょう。
step4 ラフスケッチは大事
目的を確認、リサーチもスタイルも万全…すぐにモニターに向かいたいところですが、手描きのラフスケッチは自分でも思いがけないアイデアや広がりが出ることもあります。
step5 実際に作ってみよう
今までのstepを元に、いよいよ実際にカタチにしていきましょう。
step6 ブラッシュアップをしよう
なんとなく作っても、そこそこキレイにでき上がってしまうのが、パソコン時代のデザインですが、もう一段階クオリティを上げるためには、ブラッシュアップをしましょう。
step1 目的の確認
なぜ、アイコンを使うのか
まず最初に前提から確認しましょう。なぜアイコンを作るのか。本当に、その目的にはアイコンを使うのが一番なのか。例えば地図記号で、一度しか出てこない、一箇所にしか使われていないのであれば、アイコン表現より、言葉の方が適しているのかもしれません。もう一度、なぜアイコンを使うのかを考えてみましょう。

どこで使うのか
アイコンを使うと決まった時、次に確認するのは、どこで使うかです。パソコンやスマホの画面で使うのか、雑誌や書籍などの紙面の中で使うのか。広告やポスターで使うのか、屋内で使うのか屋外で使うのか。それによって、それらを見る人との距離や関係も決まってきます。

「誰」に見てもらうのか
前知識がなくても(そこそこ)意味がわかる!推測できる!のがアイコン表現のセールスポイントではありますが、実際には、丸に棒がちょっとでもついていれば虫眼鏡に見えるのは、そうした文法に慣れているからです。逆にいえば対象がある程度決まった状況では「…」や「」すらもメニューという意味が伝わるのですから、どんな人が利用するのかを意識するのは大切です。

「何」を伝えたいのか
伝えたいことは何なのか。カタチにばかり気を取られていると、つい忘れがちになることもあります。伝えたいことが明確な場合はまだよいですが、伝えたいことが広義な場合、アイコンとして代表とするべきモチーフの選び方が、本当に目的にかなっているのかは、繰り返し考えるべきポイントです。

step2 対象をリサーチしよう
何を描くか決まっている場合
リサーチの基本は、「足を動かす」です。例えばバナナのアイコンを作るのであれば、まずはバナナ農園に出かけましょう。…というのも一面の真理ではありますが、実際には検索サイトにアクセスして、画像を検索してしまうことが多いでしょう。その場合も、いきなり「〇〇 icon」と検索するだけでなく、背景にある歴史などを知ることにより、デザインのアイデアも広がることもあります。そして、ネットの画像はすべてがフリーではありません。著作権には気をつけて!

そもそも、何を描けばいいの?
「バナナのアイコン」と決まっていれば、まだ簡単ですが、実際には「果物店のアイコン」「果樹園のアイコン」など、もっと広い概念を表したいことも多いと思います。モノで代表させるのか、抽象的なカタチでイメージを喚起させるのか。また、同じアイコンでも、どこに置かれるか、どんな文脈で使われるかによっても、どう見えるかは変わってきます。

step3 カタチのスタイルを考えよう
スタイルで共有、認識される
アイコンデザインにおいてスタイルとは何でしょう。スタイルとは型であり、様式です。シンプルな要素で作られるアイコンでは、スタイルが一貫していることにより、小さな差異が認識され、伝えたい意味が伝わります。

繰り返すことでスタイルになる
どうすれば、個性的な「スタイル」は作れるのでしょうか。一番シンプルな方法は、同じ方法を繰り返すことです。ワンパターンはスタイルになります。同時に大事なのは、そのワンパターンに目的の考え方と重なる部分、それらしさが含まれていることです。

step4
ラフスケッチは大事
紙の上で、手を動かそう
目的を確認し、モチーフも決め、リサーチもして形のコンセプトも考えて…いよいよ実際のデザインに進みましょう。そこで画面に向かってマウスをにぎりたくなりますが、一度モニターを離れて、アナログな方法でラフスケッチを描くのが早い場合もあります。デザインの初期からアプリを使ってしまうと、思考やアイデアがアプリでやりやすいことに狭まってしまうこともあります。

デザインは行ったり来たり
ここまで、stepを順番に進むかのように説明してきましたが、実際のデザイン作業はここまでの流れを行きつ戻りつ行うことの方が多いと思います。ラフを描いてみたら、またリサーチの必要が生まれたり、考えているうちに最初の目的からブレてきて、目的の再確認に戻ることも多くあります。しかし戻ることは、そこまでの作業が無駄になることではありません。

step5 実際に作ってみよう
トレースで作ってみる
では、ここで実際にアイコンを作ってみましょう。まずは、モチーフとなるアイテムの写真からトレースして作る方法です。

グリッドから作ってみる
より記号らしいアイコンを効率よく作る方法の一つが、グリッドから作る方法です。前のページで作った金槌と砂時計のアイコンをグリッドから作ってみましょう。

step6 ブラッシュアップのポイント
白い部分、スキマをチェックしよう
アイデアを元にデザインを作り上げたあと…特にコンピューターで誰でも均一で美しい線を引けると、それだけである程度完成度の高いものができてしまいます。そこで、もう一歩、高い完成度を目指すためには細かな部分をチェックしていきましょう。まず最初にチェックすべきは要素と要素のスキマ、白い部分です。

角をチェックしよう
角の処理は、全体の完成度に大きく影響します。下の図では、鋭角の時の角の処理と、水平・垂直以外の線の端の処理について説明しています。どれが正しいということでなく、コンセプトに沿って、全体を統一することが一番大切です。

全体をもう一度見直しましょう
部分を気にし過ぎると、それはそれでバランスが悪くなってしまうこともあります。全体と部分は行ったり戻ったりしつつ調整、ブラッシュアップしましょう。ここまでブラッシュアップのポイントをまとめてみました。
