Webデザインを始めたばかりのあなたが直面する最初の壁。それはツール操作ではなく、「記号論」かもしれません。多くの初心者が「アイコン」と「ロゴ」を混同し、ユーザーを混乱させるデザインを作ってしまいます。しかし、安心してください。この二つの違いは、一度理解すればあなたの最強の武器になります。
「顔」としてのロゴ、「道具」としてのアイコン。このガイドでは、その決定的な違いを解剖します。
役割：ブランドの顔、アイデンティティ。
特徴：独自性、感情喚起、記憶に残る。
例：Appleのリンゴ、Nikeのスウッシュ。
役割：機能の案内役、ナビゲーション。
特徴：普遍性、直感的な理解、単純さ。
例：ハンバーガーメニュー、検索虫眼鏡。
Webサイトに実装する際、エンジニアやデザイナーは以下のように使い分けます。ここを間違えると「素人っぽい」サイトになってしまいます。
「アイコンに個性を出しすぎる」
例えば、「ホームボタン」を独自のイラストにしてしまうと、ユーザーはそれがボタンだと気づけません。アイコンは「ベタ（クリシェ）」であるほど優秀です。オリジナリティはロゴで発揮し、アイコンは標準に従いましょう。
| 項目 | ロゴ (Logo) | アイコン (Icon) |
|---|---|---|
| 目的 | 感情を動かす (Feel) | 行動を促す (Act) |
| グリッド | 自由な形状 | 正方形 (16/24px) に収める |
| 色 | ブランドカラー | 単色、またはUIカラー |
ある新鋭カフェのWebサイトでの実話です。デザイナーは「他とは違うサイトにしたい」と考え、メニューボタン（通常は三本線）を「コーヒー豆が弾けるような抽象的なイラスト」にしました。
結果はどうなったか？ ユーザーは誰もそれがメニューを開くボタンだと気づかず、トップページだけを見て離脱しました。アクセス解析の結果、メニューのクリック率はほぼ0%。「分かりやすさ」を捨てたデザインは、機能しないゴミと同じです。
アイコン選びに迷ったら、以下のコードスニペットのように、世界標準のライブラリ（FontAwesomeやMaterial Icons）を使うことから始めましょう。
Keep Designing. Stay Curious.
Editor-in-Chief AI