アイコン・イラストの活用法

アイコン・イラストの活用法

デザインにおいて、アイコンとイラストは情報を「伝わりやすくする」ための重要な視覚要素です。テキストだけでは読み飛ばされてしまう情報も、適切なアイコンやイラストを添えることで、瞬時にユーザーの理解を助けることができます。

このレッスンでは、アイコンとイラストの基本的な知識から、実際のデザインでの活用方法、具体的なツールの使い方まで、実務に直結するスキルを身につけていきましょう。

---

アイコンとは何か？ その役割を理解する

アイコンは、小さなスペースで情報を視覚的に伝える記号的なグラフィックです。私たちが日常的に使うスマートフォンのアプリアイコン、Webサイトのナビゲーション、電車の案内表示など、あらゆる場所でアイコンは活躍しています。

アイコンの5つの役割

アイコンがデザインの中で果たす役割は、大きく5つに分けられます。

1. ◆視認性の向上 — テキストだけの場合と比べて、アイコン付きの情報は認識速度が約60%向上するという研究結果があります。ユーザーがページをスキャンする際、アイコンは視線を止める「フック」として機能します。
2. ◆スペースの節約 — 言葉で「電話番号」と書く代わりに電話アイコン一つで済みます。特にモバイルデザインでは、限られた画面スペースを有効に使うために不可欠です。
3. ◆ユニバーサルな伝達 — ホームアイコン（家の形）、検索アイコン（虫眼鏡）、設定アイコン（歯車）など、言語を超えて意味が通じるアイコンは、グローバルなサービスの設計に欠かせません。
4. ◆装飾とリズムの創出 — テキストの羅列は単調になりがちです。アイコンを適切に配置することで、視覚的なリズムが生まれ、読みやすさが向上します。
5. ◆アクションの明示 — 「削除」「編集」「共有」など、ユーザーが取れるアクションをアイコンで表現することで、操作性が格段に向上します。

💡 アイコンは「テキストの代替」ではなく「テキストの補助」として使うのが原則です。アイコンだけに頼ると、意味が伝わらないケースが生まれます。特に専門的な機能のアイコンには、必ずテキストラベルを添えましょう。

---

アイコンの種類と特徴

アイコンにはいくつかのスタイルがあり、それぞれに適した使用場面があります。スタイルの違いを理解し、デザインの目的に合ったものを選べるようになりましょう。

アイコンの4つのスタイル

アウトラインアイコン（Outline / Stroke）

線（ストローク）だけで描かれたアイコンです。線の太さ（通常1.5px〜2px）によって印象が変わります。

特徴:

• ◆軽やかでモダンな印象を与える
• ◆白背景との相性が良い
• ◆小さいサイズでも視認性が保たれる
• ◆非選択・非アクティブ状態の表現に最適

適した場面: ナビゲーションの非選択状態、フォームのラベル、リストのアイコン

ソリッドアイコン（Solid / Filled）

面（フィル）で塗りつぶされたアイコンです。アウトラインよりも視覚的な存在感が強く、注目を集めやすい特徴があります。

特徴:

• ◆存在感が強く、目に留まりやすい
• ◆背景色がある環境でも目立つ
• ◆アクティブ状態・選択中の表現に最適
• ◆小さいサイズでは詰まって見えることがある

適した場面: ナビゲーションの選択状態、タブバーのアクティブアイテム、CTAボタン内

デュオトーンアイコン（Duotone）

2色で構成されたアイコンです。主色（Primary）と副色（Secondary、通常は主色の淡い色）を使い分けることで、立体感と奥行きが生まれます。

特徴:

• ◆ブランドカラーを活かしたデザインが可能
• ◆アウトラインとソリッドの中間的な存在感
• ◆情報の階層を色で表現できる
• ◆作成に少し手間がかかる

適した場面: ダッシュボードのステータスアイコン、機能紹介セクション、マーケティング素材

カラーアイコン（Color / Multi-color）

3色以上を使った、イラストに近いアイコンです。親しみやすさや楽しさを演出できますが、デザインの統一感を保つのが難しくなります。

特徴:

• ◆親しみやすく、感情に訴える
• ◆SNSやカジュアルなサービスに向いている
• ◆デザインの統一感を保つのが難しい
• ◆ファイルサイズが大きくなりがち

適した場面: 子ども向けアプリ、カジュアルなSNS、絵文字の代替

⚠️ 一つのプロジェクト内で複数のアイコンスタイルを混在させないでください。「アウトラインのみ」「ソリッドのみ」のように統一するか、アウトラインとソリッドを「非選択/選択」で使い分けるルールを設けましょう。

---

アイコン選びの5つのルール

プロのデザイナーが必ず守っているアイコン選びのルールを解説します。これを守るだけで、デザインのクオリティが大きく向上します。

アイコン選びのルール: NG例とOK例

ルール1: スタイルを統一する

最も重要なルールです。アウトラインアイコンとソリッドアイコン、丸いスタイルと角張ったスタイルを混在させると、素人っぽい印象を与えます。

チェックポイント:

• ◆線の太さ（Stroke Width）は全て同じか？（推奨: 1.5px or 2px）
• ◆角の丸み（Border Radius）は統一されているか？
• ◆線の端の処理（Round Cap / Square Cap）は揃っているか？

ルール2: サイズを統一する

アイコンのサイズは、用途に応じた標準サイズを決め、プロジェクト全体で統一しましょう。

アイコンサイズの使い分け

ルール3: 意味が伝わるか確認する

アイコンは「見ただけで意味が分かる」ことが理想ですが、すべてのアイコンがそうとは限りません。

✅ 意味が通じるアイコン: ゴミ箱（削除）、虫眼鏡（検索）、歯車（設定）、家（ホーム）、封筒（メール）

❌ 意味が曖昧なアイコン: 星（お気に入り？評価？重要？）、ハンバーガー（初心者は意味が分からない）、紙飛行機（送信？共有？）

意味が曖昧なアイコンには、必ずテキストラベルを添えてください。特にナビゲーションでは「アイコン＋テキスト」のセットが鉄則です。

ルール4: 一般的なメタファーを使う

独自のアイコンデザインは避け、ユーザーが慣れ親しんだメタファー（比喩表現）を採用しましょう。

• ◆削除 → ゴミ箱（×印ではなく）
• ◆設定 → 歯車
• ◆ユーザー → 人型シルエット
• ◆お気に入り → ハート（星ではなく、一貫性を保つ）
• ◆共有 → 分岐する矢印、またはOS標準の共有アイコン

ルール5: 光学的な調整を行う

すべてのアイコンを同じピクセルサイズの枠内に収めても、形状によって「見た目の大きさ」は変わります。

丸いアイコンは四角いアイコンより小さく見えるため、わずかに（2〜4px程度）大きく作る必要があります。これを**光学的補正（Optical Correction）**と呼びます。

同様に、三角形や尖った形状のアイコンは、枠からわずかにはみ出すサイズにすることで、他のアイコンと視覚的に揃って見えるようになります。

---

おすすめのアイコンライブラリ

実務で使える高品質なアイコンライブラリを紹介します。いずれも無料で商用利用が可能です。

Lucide Icons

Feather Iconsの後継として開発されたオープンソースのアイコンセットです。

• ◆スタイル: アウトライン（Stroke Width 2px）
• ◆アイコン数: 1,400+
• ◆特徴: シンプルで一貫性が高い。React/Vue/Svelte用のパッケージあり
• ◆おすすめ度: SaaS、ダッシュボード、ビジネスツールに最適

Heroicons

Tailwind CSSの開発元が提供するアイコンセットです。

• ◆スタイル: Outline / Solid / Mini の3バリエーション
• ◆アイコン数: 300+（各スタイル）
• ◆特徴: Tailwind CSSとの相性が抜群。Next.jsプロジェクトに最適
• ◆おすすめ度: Tailwind CSS使用プロジェクトなら第一候補

Phosphor Icons

6つのスタイルを持つ大規模なアイコンセットです。

• ◆スタイル: Thin / Light / Regular / Bold / Fill / Duotone
• ◆アイコン数: 9,000+（全スタイル合計）
• ◆特徴: スタイルの切り替えが簡単。Figmaプラグインあり
• ◆おすすめ度: バリエーション重視のプロジェクトに

Material Symbols（Google）

Googleが提供する大規模アイコンセットです。Google製品でおなじみのデザイン。

• ◆スタイル: Outlined / Rounded / Sharp（各スタイルにWeight設定あり）
• ◆アイコン数: 2,500+
• ◆特徴: 変数フォント対応で、太さ・サイズ・塗りをCSS一つで制御可能
• ◆おすすめ度: Material Design準拠のプロジェクトに

選び方のポイント

---

Figmaでのアイコン配置テクニック

Iconifyプラグインの活用

Figmaの「Iconify」プラグインを使えば、10万以上のアイコンを直接Figma上で検索・配置できます。

使い方:

1. ◆Figmaのプラグインストアから「Iconify」をインストール
2. ◆Ctrl + / → Iconify で起動
3. ◆検索バーにキーワードを入力（例: "search", "home", "user"）
4. ◆好みのアイコンをクリックしてキャンバスに配置
5. ◆カラーやサイズをFigma上で調整

アイコンのコンポーネント化

同じアイコンをプロジェクト内で何度も使う場合は、コンポーネント化しておくと管理が楽になります。

手順:

1. ◆アイコンを配置し、24x24pxのフレームに入れる
2. ◆フレームを選択して右クリック → 「コンポーネントを作成」
3. ◆レイヤー名を「Icon / Search」のようにスラッシュ区切りで命名
4. ◆バリアント（Outline / Solid の切り替え）を設定するとさらに便利

💡 アイコンコンポーネントの命名規則は「Icon / カテゴリ / 名前」が推奨です。例: Icon / Navigation / Home、Icon / Action / Delete など。この命名規則により、Assetsパネルで階層的に整理されます。

---

イラストの活用法

アイコンが「機能」を伝えるのに対し、イラストは「雰囲気」や「概念」を伝えるのが得意です。写真では表現しにくい抽象的なメッセージも、イラストなら柔らかく伝えることができます。

イラストの4つの活用シーン

ヒーローイラスト

Webサイトやアプリのメインビジュアルとして使うイラストです。サービスの世界観やブランドイメージを一瞬で伝える重要な役割を果たします。

デザインのポイント:

• ◆ブランドカラーを使用し、サイト全体との統一感を保つ
• ◆複雑すぎないシンプルな構図にする
• ◆メッセージ（キャッチコピー）の読みやすさを妨げない
• ◆アニメーションを加えるとさらに印象的に（Lottie等）

空状態（Empty State）イラスト

ユーザーがまだコンテンツを持っていない画面（カートが空、検索結果なし等）に表示するイラストです。単なる「データがありません」というテキストよりも、はるかに良いユーザー体験を提供できます。

効果的な空状態デザインの3原則:

1. ◆感情に寄り添う — 空の状態をネガティブに感じさせない
2. ◆次のアクションを提示する — 「最初のアイテムを追加しましょう」等のCTA
3. ◆ブランドの世界観を反映する — 汎用的すぎるイラストは避ける

エラーイラスト

404ページや500エラーページに使うイラストです。エラーに遭遇したユーザーの不安やストレスを軽減する役割があります。

デザインのポイント:

• ◆ユーモアを交えて、ネガティブな体験を和らげる
• ◆ホームへ戻るリンクや検索フォームを併設する
• ◆エラーの内容が伝わる表現にする（「ページが見つかりません」等）

プロセス図解イラスト

サービスの利用手順や仕組みを視覚的に説明するイラストです。「1. 登録 → 2. 設定 → 3. 開始」のようなステップフローに使われます。

デザインのポイント:

• ◆ステップ番号を明確に表示する
• ◆矢印やラインでフローの方向を示す
• ◆各ステップのイラストはシンプルに統一する

---

アイコン vs イラスト: 使い分けの判断基準

「アイコンとイラスト、どちらを使えばいいの？」と迷ったときの判断基準をまとめました。

アイコン vs イラスト 使い分けフローチャート

スペースで判断する

• ◆小さいスペース（〜48px） → アイコン
• ◆大きいスペース（100px〜） → イラスト

目的で判断する

• ◆操作を示す（クリック、タップ等） → アイコン
• ◆概念を伝える（サービスの特徴、世界観） → イラスト
• ◆状態を示す（完了、エラー、空） → 小さい空間ならアイコン、大きい空間ならイラスト

コストで判断する

• ◆短期間・低コスト → 既製アイコンライブラリ
• ◆中期間・中コスト → カスタマイズ可能なイラスト素材
• ◆長期間・高コスト → オリジナルイラスト制作

---

フリーイラスト素材サイト

実務で使える高品質なイラスト素材サイトを、特徴と用途別に紹介します。

unDraw

テーマカラーをワンクリックでカスタマイズできるフラットイラスト素材です。

• ◆スタイル: フラットデザイン、ミニマル
• ◆カスタマイズ: テーマカラー変更可能
• ◆ファイル形式: SVG / PNG
• ◆商用利用: 無料・クレジット不要
• ◆おすすめ用途: SaaS、テック系サービス、LP

humaaans

人物パーツ（頭、体、脚）を組み合わせてカスタムキャラクターを作れるイラストキットです。

• ◆スタイル: フラット、多様性に配慮
• ◆カスタマイズ: パーツの組み合わせ自由、肌色変更可
• ◆ファイル形式: Figma / Sketch / SVG
• ◆商用利用: 無料
• ◆おすすめ用途: チーム紹介、About ページ、多様性を重視するサービス

Storyset by Freepik

高品質なイラストをカスタマイズ＋アニメーション化できるサービスです。

• ◆スタイル: 5つのスタイルから選択可能
• ◆カスタマイズ: 色、背景、キャラクター変更可。アニメーションGIF/CSS出力対応
• ◆ファイル形式: SVG / PNG / GIF
• ◆商用利用: クレジット表記で無料（有料プランならクレジット不要）
• ◆おすすめ用途: LP、プレゼン資料、アニメーション付きWebサイト

いらすとや

日本で最も知名度の高いフリーイラスト素材サイトです。

• ◆スタイル: 日本風、柔らかいタッチ
• ◆カスタマイズ: 不可（そのまま使用）
• ◆ファイル形式: PNG
• ◆商用利用: 1媒体につき20点まで無料
• ◆おすすめ用途: 社内資料、ブログ、日本向けのカジュアルなコンテンツ

⚠️ いらすとやは便利ですが、Webサービスやアプリのデザインに使うと「安っぽい」印象を与えるリスクがあります。プロフェッショナルなサービスには、unDrawやStorysetなどのモダンなイラストを使いましょう。

---

SVGアイコンの基礎知識

Webデザインでアイコンを扱う際、SVG（Scalable Vector Graphics）形式の理解は必須です。

なぜSVGを使うのか

• ◆拡大縮小で劣化しない — ベクターデータなので、どんなサイズでもシャープに表示
• ◆CSSで色を変更できる — fill や stroke プロパティで動的に色を変更可能
• ◆ファイルサイズが小さい — PNGやJPGと比べて軽量
• ◆アニメーションが可能 — CSSやJavaScriptでアニメーションを付けられる

SVGアイコンの実装方法

Webサイトにアイコンを実装する代表的な方法を3つ紹介します。

方法1: インラインSVG

HTMLに直接SVGコードを埋め込む方法です。CSSでの色変更やアニメーションが自由自在。

方法2: SVGスプライト

複数のアイコンを1つのSVGファイルにまとめ、<use>タグで呼び出す方法です。HTTPリクエストを削減できます。

方法3: アイコンフォント

Font Awesome等のアイコンフォントを使う方法です。手軽ですが、カスタマイズ性はSVGに劣ります。

推奨: 2026年現在、インラインSVGまたはSVGスプライトが主流です。アイコンフォントは徐々に使われなくなってきています。

---

アクセシビリティへの配慮

アイコンやイラストを使う際は、すべてのユーザーが情報にアクセスできるよう配慮が必要です。

装飾的なアイコン

テキストラベルの横に添える補助的なアイコンは、スクリーンリーダーに読み上げさせる必要がありません。aria-hidden="true" を設定しましょう。

意味を持つアイコン

テキストラベルなしで使うアイコン（例: 閉じるボタンの×アイコン）には、aria-label で代替テキストを設定してください。

カラーコントラスト

アイコンの色と背景色のコントラスト比は、WCAG 2.1の基準で3:1以上が必要です。薄いグレーのアイコンを白背景で使う場合は、コントラスト比をツールで確認しましょう。

サイズの最低基準

タッチデバイスでタップ可能なアイコンは、タップ領域（タップターゲット）を最低44×44px確保してください。アイコン自体が小さくても、タップ領域は大きく設計します。

---

🏋️実践ワーク

このレッスンで学んだことを実践してみましょう。以下の3つの課題に取り組んでください。

1. ◆アイコンライブラリの比較 — Lucide、Heroicons、Phosphorの3つのライブラリから、「検索」「設定」「ユーザー」「通知」「削除」の5つのアイコンを選び、スタイルの違いを比較してください。どのライブラリが自分のプロジェクトに最適かを判断しましょう。
2. ◆空状態のデザイン — ECサイトの「カートが空の状態」ページをデザインしてください。イラスト、メッセージ、CTAボタンを含め、ユーザーが次のアクションを取りやすい設計にしましょう。
3. ◆アイコンのアクセシビリティ監査 — 普段使っているWebサービス（Gmail、Twitter等）のアイコンを5つ選び、ラベルの有無、タップ領域、コントラスト比を確認してください。改善点があれば書き出しましょう。

---

📝まとめ

• ◆アイコンは「テキストの補助」として使い、意味が曖昧な場合は必ずラベルを添える
• ◆アイコンのスタイル（アウトライン/ソリッド）、サイズ、線の太さはプロジェクト内で統一する
• ◆イラストは「概念」「雰囲気」「ストーリー」を伝えるのに適している
• ◆小さいスペースにはアイコン、大きいスペースにはイラストを使う
• ◆SVG形式のアイコンを使い、アクセシビリティ（aria属性、コントラスト比、タップ領域）に配慮する
• ◆Lucide、Heroicons、Phosphor等の高品質な無料ライブラリを活用する
• ◆unDraw、Storyset等のカスタマイズ可能なイラスト素材を活用する