アイコンを作るときの進め方をやさしく解説 目的の再確認からラフスケッチ、ブラッシュアップまで

アイコンを作るときの進め方をやさしく解説 目的の再確認からラフスケッチ、ブラッシュアップまで
  • このエントリーをはてなブックマークに追加
2023/06/27 07:00

 シンプルだけれど、必要な情報を一瞬で伝えなければいけないアイコン。紙媒体のエディトリアルデザインを中心に手掛ける米倉英弘さんの著書『アイコンデザインのひみつ』(翔泳社)では、そんなアイコンがどのように成り立ってきたのか、歴史や背景が解説されています。また、それらを踏まえたアイコンデザインの進め方も紹介されており、なんとなく我流でアイコンを作ってきた方には基本を学び直す・おさらいするのにぴったりです。今回は本書から、実際にアイコンを作る方法とその進め方を説明します。

 本記事は『アイコンデザインのひみつ』の「chapter3 「アイコン」を作ってみよう」から一部を抜粋したものです。掲載にあたって編集しています。

アイコンデザインの進め方

 ここでは、自分でアイコンを作る時の進め方のポイントから、実際の作り方、テクニックなどを見ていきます。

 すべての記号に共通するのは、それを使う人にとっては他の記号との区別がついたということです。そんなことも頭の片隅に置きつつ、実際にアイコンデザインを進めていきましょう。

step1 どんなことでも目的を再確認!
 デザインには目的があります。アイコンを、なぜ作りたいのか、なぜ使いたいのか。再確認しましょう。

step2 対象をリサーチしよう
 例えばリンゴ一つとってもいろんな形、表現があります。シンプルな表現だからこそ、いろいろなデザインなどを調べましょう。

step3 カタチのスタイルを考えよう
 シンプルな表現のアイコンだからこそスタイルは大切です。複数のモチーフのアイコンを作る時は特に共通するスタイルを先に考えましょう。

step4 ラフスケッチは大事
 目的を確認、リサーチもスタイルも万全…すぐにモニターに向かいたいところですが、手描きのラフスケッチは自分でも思いがけないアイデアや広がりが出ることもあります。

step5 実際に作ってみよう
 今までのstepを元に、いよいよ実際にカタチにしていきましょう。

step6 ブラッシュアップをしよう
 なんとなく作っても、そこそこキレイにでき上がってしまうのが、パソコン時代のデザインですが、もう一段階クオリティを上げるためには、ブラッシュアップをしましょう。

step1 目的の確認

なぜ、アイコンを使うのか

 まず最初に前提から確認しましょう。なぜアイコンを作るのか。本当に、その目的にはアイコンを使うのが一番なのか。例えば地図記号で、一度しか出てこない、一箇所にしか使われていないのであれば、アイコン表現より、言葉の方が適しているのかもしれません。もう一度、なぜアイコンを使うのかを考えてみましょう。

なぜ、アイコンを使うのか

どこで使うのか

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

どこで使うのか

「誰」に見てもらうのか

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

「誰」に見てもらうのか

「何」を伝えたいのか

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

「何」を伝えたいのか

step2 対象をリサーチしよう

何を描くか決まっている場合

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

何を描くか決まっている場合

そもそも、何を描けばいいの?

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

そもそも、何を描けばいいの?

step3 カタチのスタイルを考えよう

スタイルで共有、認識される

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

スタイルで共有、認識される

繰り返すことでスタイルになる

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

繰り返すことでスタイルになる

step4 

ラフスケッチは大事

紙の上で、手を動かそう

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

紙の上で、手を動かそう

デザインは行ったり来たり

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

デザインは行ったり来たり

step5 実際に作ってみよう

トレースで作ってみる

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

トレースで作ってみる

グリッドから作ってみる

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

グリッドから作ってみる

step6 ブラッシュアップのポイント

白い部分、スキマをチェックしよう

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

白い部分、スキマをチェックしよう

角をチェックしよう

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

角をチェックしよう

全体をもう一度見直しましょう

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

全体をもう一度見直しましょう
アイコンデザインのひみつ

Amazon SEshop その他

アイコンデザインのひみつ

著者:米倉英弘
発売日:2023年6月21日(水)
定価:2,200円(本体2,000円+税10%)

あなたのスマホ画面にもずらりと並ぶアイコン。今、アイコンのデザインは私たちの生活にとても身近な存在です。本書では、「ピクトグラム」「サイン」「マーク」なども含む幅広い絵文字やビジュアルシンボルをアイコンとして様々な角度から見ていきます。