アイコン配色ってむずかしそうに見えるけど、やることはシンプルです。「小さな顔に、似合う服を選ぶ」みたいなもの。色が合うと一発で覚えてもらえるし、合わないと顔までぼやけて見えます。
このページでは、Square Face Icon Generator を使って ライブプレビュー しながら、3分で"いい感じ"の配色を作る方法をまとめます。
いちばん簡単なルール：主役1＋相棒1＋アクセント1
- 主役色：第一印象を決める色
- 相棒色：全体を落ち着かせる色
- アクセント色：少しだけ光らせる色（目・ほっぺ・小物）
ポイント：色は3つ以内。少ないほどスッキリ見えます。
色のイメージ（子どもでもわかる言い方）
- 赤：元気、目立つ、熱い
- 青：落ち着く、信頼感
- 緑：やさしい、自然、安心
- 黄：明るい、楽しい、注目
- 紫：ふしぎ、クリエイティブ、ちょっとクール
シーン別のおすすめ配色
1）仕事・フォーマル
- 主役：青／深緑／グレー
- アクセント：白を少し（または薄い黄色）
- 小さく表示されても顔が見えるように、コントラストを強めに。
2）ゲーム・コミュニティ
- 主役：ネオン青／明るい紫／ビビッド緑
- 相棒：暗い背景（黒・濃い紺）
- アクセント：目やアクセで"キラッ"と。
3）クリエイティブ系
- 主役：紫 or オレンジ
- 相棒：青緑 or あたたかいグレー
- ド派手は1回だけ。やりすぎないのがコツ。
4）個人ブログ・SNS
- 好きな色を主役にする
- 色相環で「となりの色」を相棒にすると、だいたい失敗しません。
Square Face Icon Generatorで試す：3分手順
公式：squarefaceicongenerator.app
編集ページ（配色調整に便利）：Square Face Icon Maker
手順はこれだけ：
- まず顔パーツ（髪・目・口）を決める（色は後でOK）
- 背景は最初 Solid（単色） にする（見やすい）
- 「主役／相棒／アクセント」で色を割り当てる
- ライブプレビュー で小さく見えるかチェック（32〜64pxの気持ちで）
- 迷ったら Random でアイデアを出して、そこから微調整
- PNGを書き出し（256 or 512）して保存
そのまま使える"鉄板レシピ"6つ
- 信頼ブルー：ネイビー（主役）＋薄グレー（相棒）＋白（アクセント）
- 森の安心：深緑（主役）＋ベージュ（相棒）＋金色少し（アクセント）
- ミルキー：クリーム黄（主役）＋薄ピンク（相棒）＋茶（アクセント）
- サイバー：ネオン青（主役）＋濃い紫（相棒）＋ショッキングピンク（アクセント）
- 夕焼け：オレンジ（主役）＋濃い青（相棒）＋薄い黄色（アクセント）
- モノトーン：黒（主役）＋白（相棒）＋赤を少し（アクセント）
よくある失敗4つ（これ避ければOK）
- 色が多すぎ → 3色に減らす
- コントラスト弱い → 背景を暗くする or 主体を明るくする
- 背景がうるさい → 単色かシンプル柄にする
- 赤と緑だけで区別 → 明るさ差や柄も使う（色覚多様性にやさしい）
コントラストをチェックしたい人はこちら：WebAIM Contrast Checker
まとめ
アイコン配色は難しく考えなくてOK。「主役1＋相棒1＋アクセント1」を守って、Square Face Icon Generatorで何パターンか試せば、すぐに"いい感じ"が見つかります。色は少なく、コントラスト強め、それだけで小さくても目立つアイコンになります。
関連リンク
- Square Face Icon Generator：公式サイト
- Square Face Icon Editor：編集ページ
- Coolors（配色のヒント）：coolors.co
- Adobe Color（色相環）：color.adobe.com