AIでロゴを作るとき、小さく表示して初めて気づいたこと

AIでロゴ案を作ると、画面上ではすぐに「それらしく」見えるものが出てきます。ただ、Webサイトで使うロゴは、大きなプレビューだけで決めると後から手直しが出やすいと感じました。

Unmendoのロゴを整えたときも、初期案v0.8ではUの線の細さや文字との間隔が気になりました。小さい表示で見え方を確認した結果、Uの形とU・nの間隔を調整したv0.9を正式版にしています。

この記事では、AIを使ってロゴを作るときに、最後は人がどこを確認するとよいかを、Unmendoでの作業記録をもとにまとめます。

結論

ロゴは、作業中の大きな画面だけで決めず、実際に使う小さいサイズでも確認したほうがよいです。

特に確認したいのは、次の3点です。

• マークの線が細すぎないか
• マークと文字が離れすぎたり、詰まりすぎたりしていないか
• 小さくしてもブランド名を読み取れるか

AIは案出しや調整のたたき台として役立ちます。一方で、最終的にどの案を採用するかは、実際の使用場面で人が確認する工程を残しておく必要があります。

今回の環境

• 端末・OS：Mac（OSバージョンは確認できていません）
• 使用したAI：Codex、ImageGen
• 使用ツール：SVG、Sharp、Markdown
• 前提：前回作成したロゴ案v0.8、ブランドガイド、キャラクター「めんどくん」の設定

困っていたこと

初期ロゴv0.8では、Uの線が細く、文字間が広く見える点が課題でした。小さく表示したときには、Uとnが詰まって見える可能性もありました。

ロゴはヘッダー、サイトアイコン、SNSなど表示サイズが異なります。大きなプレビューで問題がなくても、小さい表示で同じように見えるとは限りません。

実際に行った手順

1. Uの形を太く、コンパクトにした

最初に、Unmendoの頭文字であるUを太く、丸みのある形に調整しました。Uを独立したアイコンのように見せるのではなく、Unmendoという一つのロゴの文字として読める状態を目指しました。

2. 配色をロゴとキャラクターでそろえた

Uにはティール（#14B8A6）からブルー（#6BA4FF）へのグラデーションを使い、nmendoはネイビー（#0F172A）にしました。

公式キャラクター「めんどくん」のパーカーとマグカップに入れるUマークも、このロゴと同じグラデーションに統一しました。

3. 小さい表示でUとnの関係を確認した

小さいサイズで見ると、Uとnが詰まって見える可能性がありました。そこでUの形と文字間を調整し、v0.9を作成しました。

4. 採用する素材をまとめた

正式ロゴの通常版・ダーク背景版・タグライン付き版・モノクロ版を用意し、ロゴ仕様書とキャラクターガイドも更新しました。

うまくいかなかった点と対処法

v0.8では、小さい表示でUとnが詰まって見える可能性がありました。制作中の大きな表示だけでは気づきにくい問題です。

対処として、Uを太く・コンパクトにし、Uとnの間隔も調整しました。v0.9では、小さいサイズでも視認性を意識した形に変更しています。

実際の結果

小さいサイズでも視認性を意識したv0.9を、Unmendoの正式ロゴとして確定しました。ロゴ仕様書、キャラクターガイド、ブランドガイドもあわせて更新しています。

• 通常背景用の正式ロゴ
• ダーク背景用ロゴ
• タグライン付きロゴ
• モノクロロゴ
• めんどくんと共通のグラデーションUマーク

試して分かったこと

今回の作業では、ロゴそのものだけでなく、キャラクターに使うマークも一緒に確認する必要がありました。ロゴとキャラクターで色や形がばらばらだと、サイトやSNSで見たときに同じブランドだと伝わりにくくなります。

AIで作る場合も、最初から一案に決めず、表示サイズ・背景色・ほかのブランド素材との組み合わせまで見てから決めるほうが、後の修正を減らしやすいと分かりました。

注意点

• 今回確認したのは、Unmendoのロゴとキャラクター素材です。ほかのフォントやロゴでも同じ見え方になるとは限りません。
• 今回の確認は、画像を縮小した見え方の比較までです。実際のファビコンやサイトヘッダーなど、公開環境での表示サイズは確認できていません。
• AIが出した案をそのまま公開せず、既存ロゴとの類似や利用条件も確認します。

運営者のひとこと

AIがv0.9への調整を提案してきたときは、正直「AIがそう判断するなら、そうなんだろう」という程度の受け止めでした。ただ、実際にv0.8とv0.9を並べて比較してみると、確かに調整後のほうがバランスがよく、見え方も良いと感じました。AIの判断を鵜呑みにせず、自分の目で比較して初めて納得できた場面です。

まとめ

AIでロゴを作ると、案を出すところは速くなります。その一方で、仕上げに必要なのは「実際に使う大きさで見る」という人の確認でした。

ロゴを作るときは、次の順で確認すると進めやすくなります。

1. 大きな表示で、形・色・文字の方向性を決める
2. 小さい表示で、線の太さと文字間を確認する
3. アイコン、キャラクター、SNS画像などと並べて一貫性を確認する
4. 正式版を決めて、用途別のファイルを整理する

AIに案出しを任せつつ、最後の判断は実際の見え方で行う。今回の作業では、この分担でロゴを正式版まで整えました。