AIが描けないもの
ロゴを6つ捨てて初めて分かった、AIの境界線
サービスにロゴが必要だった。
コードをAIに頼んだのだから、ロゴもAIに頼めばいいのではないか。Geminiにプロンプトを入れた。「StackTubeというSaaS製品のロゴを作って。YouTubeの再生ボタンとナレッジレイヤーを組み合わせた形で。」
結果が出た。悪くなさそうだった。すっきりしていて、色合いもまずまずで、「SaaSのロゴです」と言えば頷けるような形。
しかし何かが引っかかった。正確に何が引っかかるのか説明するのが難しかった。
プロンプトを変えてさらに3つ作った。方向を変えながら。抽象モノグラム、パイプラインの隠喩、レターマーク置換。合計6つが揃った。管制塔に送りながら聞いた。「シニアロゴデザイナーの立場で意見をちょうだい。」
管制塔の答えは期待していたものと違った。
「核心的な問題は方向性ではなく、ツールの限界です。」
AI画像生成器は「ロゴのように見える画像」を作るだけで、実際のロゴに必要なもの——字間、ウェイトの差異、ピクセル単位の整列、ベクター出力——このうちどれも制御できないと。だから6つすべてが「どこかおかしいのに何がおかしいか分からない」中途半端な印象になるのだと。
これは想定外だった。
コードを作るときのAIは驚くほど正確だった。ファイルを作り、実行し、エラーを直す。しかしロゴを作るときにはその正確さが機能しなかった。コードには「合っている/間違っている」がある。ロゴにはない。代わりに「良い/違和感がある」があり、その判断はピクセル単位の緻密な制御から生まれる。
管制塔が代案を示した。SVGコードで直接作ろうと。AI画像生成と異なり、SVGはコードなので文字一つ、図形一つを正確に制御できると。コードが分からなくても問題ない——管制塔がSVGを書き、私が結果を見ながら調整すればいい。
ここからは馴染みのあるパターンが戻ってきた。管制塔＋ビルダーのワークフロー。「この字間をもう少し広げて。」「三角形がTの縦画を置き換える感じでないと。今は載っているだけに見える。」「BETAバッジを右上に付けて。」
そして色で、もう一度転換があった。
最初にAIが提案した色はteal（青緑）だった。SaaSのロゴでよく使われる色だ。すっきりとした技術的な印象。しかし私が実際のサイトのスクリーンショットを送ると、管制塔が言った。「サイトが温かみのあるクリーム/ベージュトーンなのに、tealは合いません。サイトのCTAボタンの色であるamber（琥珀色）に合わせるのが正解です。」
スクリーンショットを送る前まで、AIは「SaaSは普通こういう色を使います」という一般論で判断していた。実際のサイトを見て初めて「このサイトにはこの色が合います」に変わった。
EP.08で学んだのと同じパターンだった。AIは与えられたコンテキストの中でしか判断しない。サイトのスクリーンショットというコンテキストが加わると、診断が変わった。決済エラーのときはclaude.mdを見せて前提を修正し、ロゴのときはスクリーンショットを見せて前提を修正した。形は違うが原理は同じだ。
最終ロゴはワードマーク形になった。「Stack」はボールド、「ube」はミディアムウェイト。大文字Tの縦画が再生三角形に置き換わった、小さいが意図のあるデザイン。色はamber。サイトの温かなトーンと自然に馴染んだ。
最初に作った6つは全部捨てた。しかしその6つを作りながら「これじゃない」という感覚が積み重なり、その感覚が最終方向を定めるのに必要だった。捨てたものがなければ、正しいものを見分けることはできなかっただろう。
AIにコードを頼むことと、AIにデザインを頼むこと。同じプロンプト→結果→修正のサイクルだが、機能の仕方が違う。コードはAIが一人でも「合っているか間違っているか」を確認できる。テストを回せばいい。しかしデザインは「良いか違和感があるか」をAI自身は判断できない。その判断は人間の目からしか生まれない。
だからバイブコーディングでサービスを作る人にとって、デザインはコードよりもむしろ多くの関与が必要な領域だ。コードはAIに「任せる」余地が広い。デザインは自分が見て、感じて、「これじゃない」と言わなければならない余地が広い。
作れなくても、見ることはできる。そして見ることができるのが、この場合には作れることより重要だった。
🔧 このエピソードの技術用語解説
SVG（Scalable Vector Graphics） 画像をコードで表現する形式。通常の画像（JPG、PNG）はピクセルの点の集合なので拡大するとぼやけるが、SVGは数学的な図形で構成されているためどれだけ拡大しても鮮明。ロゴに適した形式。
ワードマーク（Wordmark） テキストそのものがロゴである形態。別途のシンボルやアイコンなしに、ブランド名のフォント・色・配置だけでロゴを構成する。Google、FedEx、Coca-Colaが代表的。
ベクター（Vector） 画像を点と線の数学的関係で表現する方式。対義語はラスター（Raster、ピクセル基盤）。ベクターはサイズを自由に変えても品質が維持されるため、ロゴやアイコン、印刷物に使用する。
カーニング（Kerning） 文字と文字の間隔を調整すること。同じフォントでも特定の文字の組み合わせ（例：AV、To）では視覚的に間隔が不均一に見えるため、手動で調整する作業。AI画像生成器にはこの調整ができない。
ファビコン（Favicon） ブラウザのタブに表示される小さなアイコン。通常16×16または32×32ピクセル。ロゴをこのサイズに縮小しても識別できる必要があるため、ロゴデザイン時にファビコン用の簡略版も併せて作る。