logoloom

LogoLoom

コマンドひとつで、完全なブランドキットを。無料です。 ロゴのために5つものツールを使い分けるのは、もうやめましょう。

問題点

サイドプロジェクトのロゴを手に入れるのに、96ドル（Looka）もかかったり、Canva＋ファビコンジェネレーター＋OG画像作成ツール＋手動でのPNG書き出しを使い分けたりする必要はありません。ロゴはインディー開発者にとって、公開を妨げる最大の要因です。難しいからではなく、ツールの使い勝手が悪いからです。

解決策

AIがクリーンなSVGコード（雑な自動トレースパスではありません）でロゴをデザインし、後処理によって完全なブランドキット（31ファイル）をコマンドひとつで作成します。

• SVG — ロゴ全体、アイコンのみ、ワードマークのみ（ライト／ダーク／モノクロの各バリエーション）
• PNG — 標準サイズ10種類（16pxのファビコンから1024pxのApp Store用まで）
• ICO — ブラウザーのファビコン
• WebP — ウェブ向けに最適化
• ソーシャルメディア — OG画像（1200×630）、GitHubプレビュー（1280×640）、Twitterヘッダー（1500×500）
• BRAND.md — カラーコード、タイポグラフィ、使用ガイドライン

APIコストはゼロです。すべてローカルで実行され、永久に無料です。

既存のツールを使わない理由

ツール	価格	SVG？	完全なブランドキット？	MCP？	ローカル？
LogoLoom	無料	✅ クリーンなコード	✅ 31ファイル	✅	✅
Looka	$65-96	✅	✅（テンプレート）	❌	❌
Brandmark	$35-95	✅	✅（$95）	❌	❌
Canva	SVGは月額$15	ラスター形式のみ無料	✅（Pro）	❌	❌
Recraft V3	無料版は商用利用不可	✅	❌	❌	❌
SVGMaker MCP	クレジット制（$）	✅ クラウド	❌	✅	❌

できること

1. AIがロゴをデザイン — Claudeがコードベースを読み取り、ブランドを理解してSVGを作成します
2. テキストからパスへ — <text>を<path>に変換し、どこでもフォントが正しく表示されるようにします（opentype.js）
3. 最適化 — SVGを整理し、不要なデータを削除して、パスを圧縮します（SVGO）
4. ブランドキットを書き出し — 3つのカテゴリ（ロゴ全体＋アイコンのみ＋ワードマークのみ）×（ライト／ダーク／モノクロ）に加え、すべてのPNGサイズ、ソーシャルメディア用サイズ、BRAND.mdを含む31ファイルを書き出します

クイックスタート

npx @mcpware/logoloom

Claude Code / Cursor .mcp.json

{
  "mcpServers": {
    "logoloom": {
      "command": "npx",
      "args": ["-y", "@mcpware/logoloom"]
    }
  }
}

次にClaudeに**「プロジェクトのロゴをデザインして」**と頼みます。

ツール

ツール	説明
text_to_path	フォントのアウトラインを使って、SVGの<text>要素を<path>に変換します。フォントに依存せず描画できます。
optimize_svg	SVGを整理して圧縮します（30～60％小さくなります）。メタデータを削除し、パスを結合します。
export_brand_kit	完全なブランドキットを書き出します。PNGサイズ、ICO、WebP、OG画像、モノクロ版、BRAND.mdが含まれます。
image_to_svg	PNG/JPGをSVGベクターに変換します（vtracer）。ロゴやフラットなグラフィックに最適です。

出力例

brand/
├── logo-full-light.svg      # Primary logo
├── logo-full-dark.svg       # Dark mode variant
├── icon-light.svg           # Icon only
├── icon-mono-black.svg      # Single-color (print)
├── icon-mono-white.svg      # White on dark
├── icon-256.png             # Small
├── icon-512.png             # Medium
├── icon-1024.png            # Large (app stores)
├── icon-512.webp            # Web optimized
├── favicon.ico              # Browser favicon
├── favicon-16.png           # 16px favicon
├── favicon-48.png           # 48px favicon
├── og-image.png             # Social share (1200×630)
└── BRAND.md                 # Colors, typography, usage rules

仕組み

You: "Design a logo for mcpware"

Claude:
  1. Reads your README + package.json
  2. Asks brand questions (audience, feel, color)
  3. Generates 6-8 SVG concepts in HTML preview
  4. You pick → Claude iterates → you approve

LogoLoom MCP:
  5. text_to_path → font-independent SVG
  6. optimize_svg → clean, compressed
  7. export_brand_kit → all sizes, all formats, brand guidelines

Output: brand/ folder, ready to use everywhere

RecraftやSVGMakerを使わない理由

	LogoLoom	Recraft V3	SVGMaker
価格	無料	無料（商用利用不可）／月額$10	$8以上
商用利用	可能	有料プランのみ	可能
ローカルで実行	可能	不可（クラウド）	不可（クラウド）
MCPネイティブ	対応	非対応	対応
完全なブランドキット	対応	非対応（SVGのみ）	非対応
コードベースを考慮	対応	非対応	非対応

技術スタック

すべてオープンソースで、すべてローカルで実行されます。

• opentype.js — フォントの解析、テキストからSVGパスへの変換
• SVGO — SVGの最適化と圧縮
• sharp — SVGからPNG／WebP／ICOへのラスター化
• vtracer — ビットマップからSVGへのベクター化（任意。システムへのインストールが必要）

必要条件

• Node.js 18+
• image_to_svgを使う場合：vtracer（cargo install vtracer）またはpotrace（apt install potrace）をインストールしてください

@mcpware のその他のプロジェクト

プロジェクト	概要	インストール
Instagram MCP	23 個の Instagram Graph API ツール — 投稿、コメント、DM、ストーリー、分析	npx @mcpware/instagram-mcp
Claude Code Organizer	Claude Code のメモリ、スキル、MCP サーバー、フックのビジュアルダッシュボード	npx @mcpware/claude-code-organizer
UI Annotator	あらゆるウェブページにホバーラベルを表示 — AI が要素を名前で参照できます	npx @mcpware/ui-annotator
Pagecast	MCP を介してブラウザーセッションを GIF または動画として記録	npx @mcpware/pagecast

ライセンス

MIT