AI時代のロゴデザイン

はじめに

チームやプロダクトの哲学を整理し、どういうコンセプトのロゴにするかを決める
このとき、リファレンスの収集や関連概念の調査なども合わせて行う
Claude CodeやCodexなどのAIエージェントと壁打ちしながら深めていく
議論の内容はマークダウンファイルに逐次書き出してもらう
ChatGPTやGeminiなどのチャット型AIでも壁打ちは可能だが、AIエージェントを使う利点はリポジトリ内に直接マークダウンファイルとして成果物を残せること
筆者は主にClaude Code(Sonnet 4.6)を使用
この用途においてOpusを使うメリットは今のところ感じない

哲学やコンセプト、デザイン方針が固まったら、実際に画像生成を試みる
なお、この工程で扱うのは主にイラスト部分であり、テキスト(ロゴタイプ)については考えない
まずChatGPTやGeminiなどのマルチモーダルなAIモデルを試みることが多い
- ただし、作りたい画像の方向性とマッチしないことが多く、生成速度も遅め
そこで最近はMidjourneyを主に利用している
- アーティスティックな画像生成が得意
- 生成速度が速く、1回で複数パターンを生成してくれる
画像生成モデルへ渡すプロンプトは、前工程で作成したコンセプトやデザイン案をもとにAIエージェントに自動生成してもらう
- Midjourneyは英語プロンプトが前提のため、自分で適切なプロンプトを書くのが難しいという事情もある
生成のたびに理想とのギャップをフィードバックし、プロンプトを繰り返し洗練させていく
この過程では、自分が予想もしていなかった良い要素が偶然生まれることもあり、そのセレンディピティを大切にしている
ちなみに画像生成AIについてはかなり前に検証した記事がある: 画像生成AIの「画風」

フォントファイルの入手方法は2通り
- Fontsource に用意されているフォントはNPMでインストール
- そうでない場合はサイトから直接ダウンロード
- フォーマット(TTF、WOFF2など)は基本的にどれでも問題ない
読み込みには opentype.js を使用
- 特定フォントで文字を単に出力したいだけなら不要で、テキストに複雑な処理を適用したいときに便利

基本的な流れはフォント読み込み → SVGとして描画 → SVGを操作して形状やエフェクトを加える → 出力
SVGにはフィルター機能が備わっており、Photoshopのフィルターに近いことが一通りできる
- feGaussianBlur でぼかし、feColorMatrix で色変換、feDropShadow で影付け、feTurbulence でノイズ・テクスチャ表現など
- 簡単な加工の場合は ImageMagick 、写実的な場合には OpenCV を使うこともある

Node.jsにはSVGを直接PNGにレンダリングする機能がないため、PuppeteerでSVGを開いてスクリーンショットを撮る方法を取っている
Puppeteer以外にも、SharpやPlaywrightも選択肢になり得る
- Puppeteer はChromiumのレンダリングエンジンをフル活用するため、CSSフィルターやWebフォントなど複雑なSVGでも正確に出力できる
- Sharp は libvips のラッパーで、ブラウザを起動するわけではないため、高速・軽量だが複雑なSVGフィルターには非対応なものもあるため、シンプルな加工向き
- Playwright は複数ブラウザに対応している点以外はPuppeteerとほぼ同じ