ロゴ制作（小さく縮めても形が読めるロゴを AI でつくる）
AI で 4〜6 案を一気に出して 1 案に絞ります。選ぶ基準は、ブラウザのタブに並ぶ 16 ピクセル四方のアイコン（favicon）まで縮めても形が読めるかどうか。ここまで詰めれば、関係者のレビューも通ります。
Recipes は、目的ごとに「今のところこの組み合わせがいちばん速い」と思っている作り方を置いておくチャンネルです。試して駄目だった組み合わせも、同じページの下のほうに残してあります。
ロゴを AI に頼むと、絵を出すところまでは驚くほど速く進みます。つまずくのはその次です。画面で良さそうに見えた案をそのままサイトや名刺に持っていくと、線がにじみます。小さくすれば黒い塊にしか見えません。ロゴを大きく飾る場面はそれほど多くなくて、実際はブラウザのタブや資料の隅で 16 ピクセル四方まで縮みます。
AI に SVG（拡大しても粗くならない図形の書き方）を直接書かせる手も試しました。今のところうまくいきません。見た目は整っていても中の座標がずれていて、縮めた瞬間に崩れます。
だからこの手順では、絵を出す係と、図形データに変換する係を分けています。案出しは画像生成 AI にやらせて、変換は Illustrator に任せ、最後の仕上げだけ自分の手でやります。手を動かすのは 2 つだけ。細切れの線をまとめることと、小さくしたら消える飾りを削ることです。ここを飛ばさなければ、レビューに出せる状態まで 2〜3 時間で終わります。
今のところ、この目的にはこの組み合わせがいちばん速いと思っています。使っているツール、手順、それにかかる時間と費用をそのまま書きました。
- GPT Image 2
- Adobe MCP (Illustrator)
- manual SVG cleanup
- ブランドの方向性を 3〜5 文で書き出します。見た目をどの路線に寄せるか、どんな雰囲気を出したいか、人にたとえるとどんな性格か。先に言葉にしておくと、あとの指示文がぶれません
- 画像生成 AI への指示文には「絵の部分（アイコン）と文字の部分（ワードマーク）を分けて出す」とはっきり書きます。ひとかたまりで出てくると、あとから分解できません
- GPT Image 2 で候補を 4〜6 案つくります
- 良さそうな 2 案を Adobe MCP（MCP は AI から外部ツールを呼び出すための共通の口。ここでは Illustrator を動かします）に渡して、拡大しても粗くならない図形データ（SVG 形式）に変換します。これがベクター化です
- 出てきた SVG は手で直します。細切れになった線（path）をまとめる。色の指定を fill="currentColor" に変えて、置いた場所の文字色をそのまま拾うようにする。絵の表示範囲を決める viewBox は、実際の図形の大きさに合わせて詰めます
- 少なくとも 5 か所に実際に置いて、見え方を確かめます。ブラウザのタブに出る 16 ピクセル四方の favicon は必ず入れます
AI が出したままのロゴを採用したことはありません。SVG は必ず手で直します。 小さく縮めると潰れて黒い団子になる飾りは、思い切って削ります。 ここを面倒がると、名刺では綺麗なのにタブでは何の図か分からない、という状態になります。
実際に手を動かして試した組み合わせを並べています。採用しなかったものも消していません。同じ回り道を二度しないように、自分のために残しているようなものです。
ADOPTED = 採用 / REJECTED = 不採用 / PARTIAL = 条件つきで使える / IN-PROGRESS = 検証中 / UNVERIFIED = まだ試していない
SVG の中身が壊れていました。線（path）の座標がずれていて、拡大や縮小をかけると形が崩れます。小さくすると何の図か読めません。これは使えませんでした
→ see ProbeClaude Design は Anthropic の研究用の先行版ツールで、指示を渡すとデザインと一式のコードを起こしてくれます。まだ試している最中で、NODE6174 のロゴをつくるときに他のやり方と同じ条件で並べて比べます
Codex は OpenAI 側のコーディング AI で、Claude Code と同じ役割の別ブランドです。こちらも SVG が壊れました。Claude Code とまったく同じ壊れ方です。直すより作り直したほうが早いと判断して、そこでやめました
線そのものの品質はきれいです。ただ、形を思い切って省いて覚えやすい記号にする力が弱く、絵と文字がロゴとしてまとまりません。下地には使えますが、これ 1 本では決められません
この手順で実際に作ったもの（Time Capsule の記録）と、途中の判断を確かめた単発の検証（Probes）です。手順のどこでつまずいたかを追いたいときに開いてください。
手順を今の形にするまでに分かったことを、気づいた日付とあわせて残しています。上の Flow がなぜこの順番なのかは、たいていここに書いてあります。
- Adobe MCP の image_vectorize（画像を図形データに変換する機能）は、絵と文字を別パーツにきちんと分けてくれます。DNA FACTOR のバッジ制作で試して分かりました
- Claude Code にロゴの SVG を直接書かせるやり方は品質が足りません。ここで別の AI ツールに切り替えました
ここに書いた手順は、下の制作記録から抜き出しました。どうしてその判断になったのかまで知りたいときは、そちらを読んでみてください。
// NODE6174//NODE6174// ができるまで。humbulls Lab を独立したメディアに作り替えた記録
humbulls の中の一区画だった Lab を、NODE6174// という独立したメディアに作り替えました。名前を決め、ブランドの決まりごとを書き、ドメインをつなぎ、Astro（書いた内容をあらかじめ HTML に書き出しておくサイト構築の道具）で組んで Cloudflare Pages（そのまま公開できる置き場）に公開し、区画を 5 本から 6 本へ増やすまでを順に書いています。判断を間違えたところや途中で止まったところも、そのまま残しました。進行中なので今も書き足しています。