アイコンデザインの基本｜ピクトグラムとの違いと素材の選び方

アイコンを並べたのに、なぜか手作り感が出てしまう。そんなときの原因は、たいていセンスではありません。線の太さや大きさが揃っていない箇所が1つか2つ残っているだけです。

このレッスンでは、まずアイコンとピクトグラムの違いを整理します。そのあと、伝わるアイコンの条件と、バラついて見える原因の直し方を見ていきます。
最後は、同じ意味のアイコンを3つのサイトから集めて見比べる練習です。素材を選ぶときの目が、その日のうちに変わりますよ◎

アイコンとピクトグラムの違い

どちらも「絵で意味を伝える記号」です。違うのは、使う場所と、形をどこまで変えていいかです。

アイコンは、画面の中で機能や場所を指す小さな絵です。虫めがねなら検索、ゴミ箱なら削除、カートなら購入。サービスの雰囲気に合わせて、丸くしたり細い線にしたり、見た目を自由に決められます。

ピクトグラムは、言葉が分からない人にも伝えるための絵記号です。非常口、トイレ、階段。駅や空港で見かけるあれですね。こちらは形がほぼ決まっていて、一部はJIS規格が形を定めています。

ピクトグラムは「見慣れた形そのもの」が意味を運びます。おしゃれにしようと形を崩すと、意味が届かなくなります。手を加えていいのは色と大きさまでと考えてください。

アイコンはその逆で、形を自分で決めます。だからこそ、次の3つの条件を外すと途端に伝わらなくなります。

伝わるアイコンの3条件

きれいかどうかより先に、この3つを確認します。

1. 意味が一目で分かる：説明を読まないと分からない絵は、アイコンとして働きません
2. 隣と見分けがつく：似た形が並ぶと、どれを押せばいいか迷います
3. 小さくしても形が残る：24pxまで縮めて、まだ何の絵か分かるか

1つ目でつまずくケースが多いです。絵だけで通じるアイコンは、実はそれほど多くありません。虫めがね（検索）、ゴミ箱（削除）、カート（買い物）、家（トップ）くらいと考えておくと安全です。

共有、設定、フィルター、お気に入り。このあたりは受け取り方が人それぞれです。迷ったら文字を添えてください。アイコンの下に4文字のラベルを置くだけで、迷いはほぼ消えます。

3つ目の「小さくしても残るか」は、作りながら確認します。24pxは、スマホのアプリの下に並んでいるアイコンくらいの大きさです。そこまで縮めて画面から3歩離れる。それで分からなければ、線を減らすか、細部を削ります。

手元で見比べるなら、LINEとInstagramを開いて下のアイコンの列を見てください。どちらも線の太さと角の丸みが1つに揃っていて、ラベルの文字数も短く切りそろえてあります。3条件を満たした状態が、そのまま見本になります。

バラついて見える原因は4つ

いろいろなサイトから集めたアイコンを並べると、そろえたつもりでも散らかって見えます。原因はこの4つに絞れます。

4つ目は見落としやすいところです。24px四方の枠に入れても、円形のアイコンは四角いアイコンより一回り小さく感じます。
直し方は簡単で、円や三角は5〜10%だけ大きくする。数値ではなく目で揃えます。

いちばん確実なのは、同じ作者の同じセットからまとめて選ぶことです。線の太さも角の処理も最初から揃っているので、直す作業がまるごと消えます。

素材を使うか、自分で作るか

結論から言うと、練習でも実務でも、まずは素材サイトのセットを使います。自作は「そのサービス固有の形が要るとき」だけで足ります。

	素材サイトのセット	自作
かかる時間	数分	1個あたり15〜60分
統一感	最初から揃っている	自分で揃える
向いている場面	検索・削除など一般的な機能	自社サービス独自の機能
注意すること	利用条件の確認	24pxで潰れないか

ダウンロードするときはSVG形式を選んでください。拡大しても線がぼやけず、色もあとから変えられます。PNGしか置いていないサイトなら、表示サイズの2倍の大きさで落とします。
形式の話は画像形式の選び方とラスターとベクターで詳しく扱っています。

無料の素材でも、使う前に条件を見ます。ここは毎回同じ4点だけ確認すれば大丈夫です。

権利まわりの基本は著作権と肖像権の基礎にまとめています。判断に迷う場面が出たら読んでみてください。

ミニ実践：同じ意味のアイコンを3サイトで集める

所要10分、道具は無料です。アイコンの良し悪しを言葉にできるようになります。

1. 「検索」「削除」「お気に入り」から1つ選びます
2. ふだん使うWebサービスを3つ開いて、その機能のアイコンをスクリーンショットで撮ります
3. 3枚を1枚のキャンバスに横に並べます（Canva・パワーポイント・スプレッドシートのどれでも可）
4. それぞれについて、線の太さ・角の処理・塗りか線か・文字ラベルの有無をメモします
5. 3つのうち「いちばん迷わない」ものを選び、なぜそう感じたかを1行で書きます

だいたいの人が、いちばん線が少ないものを選びます。アイコンは情報を足すほど伝わらなくなるので、その感覚は正しいです。自分で作るときにも同じ判断を使えます。

余力があれば、集めた3つを24pxまで縮めてみてください。ここで生き残る形が、実際に使えるアイコンです。

よくある質問

無料でアイコンを探せる・作れるサイトはありますか？

あります。日本語で使えるものだと、線画中心のセットを配っているサイトや、テンプレートから組み立てるツールを使う人が多いです。
選ぶ基準は3つだけです。SVGで落とせること、同じ作者のセットが何十個も揃っていること、商用利用の条件がページに明記されていること。この3つが揃っていれば、サイト名で選ぶ理由はほとんどありません。

アイコンは自分で作れますか？

作れます。24px四方のグリッドを敷いて、丸・四角・線だけで組み立てます。線の太さは2pxに固定して、角丸も1種類に決めておく。この2つを決めるだけで、素人っぽさはかなり消えます。
ただし、最初から全部を自作すると時間が足りません。一般的な機能は素材のセットを使い、独自の機能だけ自分で描く進め方をおすすめします。

配布されているアイコンの色や形は変えていいですか？

色の変更は、ほとんどの素材が認めています。SVGで落として、塗りの色を指定し直すだけです。
形の変更（改変）は素材ごとに条件が違うので、利用規約を見てください。改変を認めていない素材もあります。
ピクトグラムは規約と別の理由でも形を変えません。見慣れた形から離れると、意味が伝わらなくなるからです。

SNSのプロフィール画像も同じ考え方で選べますか？

プロフィール画像は、ここで扱っているアイコンとは別物です。機能を指す記号ではなく、その人を覚えてもらうための絵だからです。
ただし「小さくても分かるか」だけは同じ条件になります。タイムラインでは直径40px前後まで縮みます。顔を大きく、背景は1色、文字は入れない。この3つで見分けやすくなります。

次に学ぶこと

今回のまとめです。

• アイコンは形を自由に決められる。ピクトグラムは形を変えない
• 伝わる条件は、一目で分かる・隣と見分けがつく・小さくても残る
• バラつきの原因は、線の太さ・角の処理・塗りと線・見た目の大きさ
• まずは同じセットからまとめて選ぶ。自作は独自機能だけ

次のレッスンはロゴの基礎知識です。アイコンと同じ「小さくても伝わる形」の話ですが、ロゴには意味を1つに絞る作業が加わります。
アイコンを含めた細かい装飾の引き出しを増やしたい方はあしらいの引き出しもどうぞ。

コース全体の流れはデザイン基礎知識コースの目次から確認できます。