デザイン

【Adobe CC Illustrator】アイコンをパパッと作る基本法則

北野敦子
北野敦子
2018/09/25 16:14

はじめに

アプリケーションを表すためのアイコン、HPなどに使用されているピクトグラム。
今では見ない日はないかと思います。
今回はそんな必要不可欠の記号たちの基本製作方法をご紹介していきます。

1.○△□で構成する

オーソドックスで最も時短につながる方法です。
○△□で記号を構成、その後少しの調整でシンプルなアイコンを作成します。
線の太さを調整し、少し影をつけるだけで十分「らしい」ものが制作できます。
シンプルかつバランスのとれた形になるので、フラットデザインなどでよく見るアイコンに仕上げることが可能です。

A.○△□でレイアウトする。

B.微調整する。

C.線幅を調整する。

2.左右対象の物を作成する

基本を左右対称とし、片面を反転させて利用するのでかなりの時短につながります。
オブジェクトによっては完全な対称にならない場合もありますが、その場合も最後に少しだけ調整をかけるだけなので、時間を要することも少ないです。

A.全体をイメージし、片面だけ作り込む。

B.反転させた複製を作成しつなぎ合わせる。

C.不足分を調整する。

3.線で構成

ピクトグラムなど人の形の場合、棒人間を描くだけで構成することが可能です。
先に棒人間を作り、線の太さを調整すれば、肉付けされた人の形が完成します。

A.棒人間を作る。

B.線に肉付けする。

4.素材を使用する

自分で作るとやはり時間はかかってしまいます。
そこで、素材を使用して時短を図るのも一つの手です。
無料で商用フリーのサイトなどをある程度知っていると非常に助かります。

アイコンにオススメなのは
1.FLAT ICON DESIGN
2.ICOOON MONO
3.ヒューマンピクトグラム2.0
です。
(使用する場合は各サイトのライセンスの条件を確認してからご使用ください。)

5.まとまったイメージにする

単独で存在するものも中にはありますが複数個の場合は、ドミナントカラーや同じ角度のラインをつけるなど、どこかに共通な部分を持たせる必要があります。
共通箇所がなければ、それはただの単独のオブジェクトでセットのイメージを植えることができないので外してはいけないポイントです。

まとめ

今回はアイコン、ピクトグラム作成の基本をご紹介しました。
複数個の場合のまとまったイメージはとくに重要。バラバラのイメージでなければそれだけでバランスのとれたオブジェクトとなります。

著者:MainYard Design(メーンヤードデザイン) 北野敦子

kitano

1987年大阪出身。
生活する上で必ず目にするデザインされたものたち。 街を歩くだけでも無限の魅力があふれています。 ある日ふとそれらに魅了され別業界からデザイナーへ転身。 関西を中心にグラフィックデザインからブランド戦略提案などを展開中。
2012年タイポグラフィ作品展「OKU-2」出展。第31回読売広告大賞協賛社賞受賞。

※KOBITブログでは、定期的に北野敦子さんに記事を寄稿していただいております。
デザインに関するものを中心に、役立つ記事を数多く提供していただいておりますので、ぜひ他の記事もご覧ください。
北野敦子さんによる寄稿記事を読む

わかるページ解析を

Google Analytics・Search Consoleから
わかりやすいPowerPoint・Excelレポートを生成

report
HOMEKOBITブログWEBマーケティングデザイン【Adobe CC Illustrator】アイコンをパパッと作る基本法則