Unmendoを始めるとき、favicon（サイトアイコン）を最初に作りました。結論から言うと、これは順番を間違えていました。正しくは、ロゴを先に決めてから、そこにアイコンを合わせるべきでした。
この記事では、アイコンから作り始めて手戻りが発生した経緯と、途中で公式マスコットキャラクター「めんどくん」が登場したことでさらに方向転換した実際の流れを記録します。
結論：アイコンではなく、ロゴから決める
WordPress（SWELLテーマ）でサイトを公開するには、favicon・ロゴ・SNSアイコンなどのビジュアル資産が必要でした。このとき、先にアイコンのデザインを確定させてしまい、後からロゴにそのアイコンの文字を足す形になりました。
本来は逆で、まずロゴ（ワードマークやブランド全体の表現）を決め、そこからアイコン単体を抜き出すのが正しい設計順序です。アイコンを先に決めると、ロゴを作る段階で「アイコンに合わせて文字を足す」という不自然な制約が生まれます。
今回の環境
- 端末・OS：Mac（バージョン未記録）
- 使用したAI：Claude（Cowork内でのアイコン・ロゴのSVGデザイン生成）、Codex（別チャットでのロゴ改善案・マスコットキャラクター作成）
- 前提：ブランドガイド（
docs/brand-guide.md）、プロジェクト計画書（docs/project-plan-v1.0.md）
困っていたこと
WordPressでサイトを公開する準備の中で、favicon・ロゴ・SNSアイコンといったビジュアル資産が何も用意されていませんでした。何から手をつければよいか整理しないまま、目につきやすいアイコンから着手してしまったことが、後の手戻りの原因になりました。
Unmendo中の人とりあえずアイコンから作ってみたんだよね
めんどくんあるある、順番迷うやつだ〜
実際に行った手順
- インディゴ（
#4F46E5）×コーラル（#FF7A59）で「U＋スパーク」のアイコン案を作成し、ミニマルU、もつれ→解決、AIチャット、暖色パレットなど複数パターンを提示した。 - 最初の「U＋スパーク」案を採用し、SVG（ダーク／ライト背景、透明マーク白・インディゴ）とPNG（512/256/192/128/64/32px）、favicon.icoを生成した。
- 別チャットのCodexが改善した、より洗練された稲妻アイコン形状とクリーム色のUを見て、完成度が高いと判断した。
- ロゴ制作に着手したところ、アイコンに文字を後付けする形になっており、正しい設計順序（ロゴ→アイコン抽出）になっていないことに気づいた。
- 「Unmendo」のUをマーク化し、ワードマークと一体化させた統合ロゴタイプ案に作り直した。
- Codexとの別チャットで作成された公式マスコットキャラクター「めんどくん」（AIサポート妖精、頭に双葉、チャコール×ティール×ミント配色）が共有され、ロゴの方向性を再検討することになった。
- めんどくんが記事内で🌱＋名前＋セリフの吹き出し形式（軽量な文字ベースで、都度イラストは生成しない運用）で登場するサンプル記事を見て、実際の使われ方を確認した。
- めんどくんの配色・双葉モチーフに合わせ、ロゴのアクセントをコーラルのスパークから双葉モチーフに変更し、ティール（
#14B8A6）×ネイビー（#0F172A）×ミント（#A7F3D0）のロゴ案（ワードマーク／アイコンバッジ／ダーク背景版）を作成した。
うまくいかなかった点と対処法
- アイコンを先に確定させたことで、ロゴ設計の順序を誤った。対処として、後からワードマーク統合案に作り直した。
- 当初のロゴ配色（インディゴ×コーラル）が、後から登場しためんどくんの配色（チャコール×ティール×ミント）と一致しておらず、配色の作り直しが発生した。マスコットキャラクターを先に決めてからロゴの配色を検討していれば、この手戻りは避けられた可能性がある。
Unmendo中の人配色を全部作り直すことになるとは思わなかった
めんどくん僕の登場でまさかの手戻り〜
実際の結果
- アイコン（インディゴ×コーラル版）はSVG／PNG／favicon一式が完成し、
brand/icon/に保存済み。 - めんどくんの存在を前提とした、ティール×双葉モチーフの新ロゴ方向性（ワードマーク／アイコンバッジ／ダーク版）を提示したが、この時点では未確定。
試して分かったこと
サイトアイコンとロゴ、マスコットキャラクターは、決める順番によって手戻りの量が変わります。今回のように、キャラクターが後から追加で決まる場合は特に、配色やモチーフの一貫性を後から合わせ直す作業が発生しやすいと分かりました。
注意点
ロゴの配色・アクセントはこの時点では未確定のままでした。その後、docs/brand-guide.mdのビジュアル正式決定として、めんどくんとの一貫性を優先したティール×ライトブルーのグラデーションU（brand/logo/unmendo-logo-primary-v0.9.svg）が採用されています。当初のインディゴ×コーラル案は不採用となりました。
まとめ
ブランドのビジュアル資産を作るときは、アイコン→ロゴの順ではなく、ロゴ（またはキャラクターを含めた世界観）を先に固めてから、そこにアイコンを合わせる順番のほうが手戻りが少なくなります。マスコットキャラクターのようにブランドを表現する要素は、できるだけ早い段階で決めておくと、後からの配色調整を減らせます。
Unmendo中の人次はちゃんと順番決めてから頼むよ
めんどくん学びがあってよかったね〜
運営者のひとこと
思いつきで、順番を考えずにAIへ依頼すると、うまくいかないと実感しました。今回はアイコンを先に作ってしまい、後からロゴやキャラクターとの整合を取り直す手間が発生しました。次にビジュアル資産を作るときは、最初に全体の設計順序を決めてから着手しようと思います。
コメント