svg-logo-maker

SVG ロゴメーカー

svg.js を使用したプログラムによる構築、ブラウザ上での視覚的な検証、自動 SVG エクスポートにより、世界水準のミニマルな SVG ロゴを生成します。

svg.js を使う理由：生の SVG パスデータを書くのは、AI にとって非常にエラーが起きやすい作業です。svg.js は、高水準の図形メソッド（rect()、circle()、polygon()、group()、gradient()、mask()、transform()）を提供します。これらは関数呼び出しに自然に対応しており、AI が得意とする形式です。ブラウザで結果をレンダリングできるため、視覚的な反復作業も行えます。

効果的なロゴデザインの5原則

これらの原則は、ワークフロー全体を通じてあらゆる判断の指針となります。すべてのデザインをこれらの観点から評価してください。

原則	意味	テスト
シンプルさ	すっきりとした必要不可欠な要素でメッセージを表現します。すべての線に存在する理由が必要です。	ロゴを一文で説明できますか？
普遍性	トレンドではなく、長く続くブランド価値に根差したデザインにします。	10年後に見ても古びていませんか？
独自性	独創的な選択によって際立たせます。アイデアを電球、「グローバル」を地球儀で表すような陳腐なシンボルは避けます。	競合他社が同じコンセプトを使えますか？
関連性	対象ユーザー、業界、ブランドの個性に合致させます。子ども向けアプリと法律事務所では、求められる雰囲気が異なります。	対象ユーザーにふさわしい印象ですか？
視認性	テキストはどのサイズでも鮮明に表示される必要があります。図形は32×32pxで認識できる必要があります。	ファビコンのサイズまで縮小しても、見分けられますか？

リファレンスライブラリ

このスキルには、世界を代表するブランドのロゴを収録した assets/ が、2つの形式で含まれています。

形式	ファイル	目的
PNG（*.png）	視覚的な参考画像	まずはこちらを読んでください — AI は PNG 画像を視覚的に解析し、形状、比率、色、ネガティブスペース、デザイン全体の品質を把握できます。PNG ファイルを主なデザインのインスピレーション源として使用してください。
SVG（*.svg）	ソースのベクターコード	実際の SVG 構造、パスの構築方法、最適化手法、プロフェッショナルなロゴがコードでどのように作られているかを学ぶために読んでください。

収録ブランド：Apple、OpenAI、Anthropic、Claude、Claude Code、Cursor、Google、Figma、Meta、Midjourney、Grok、DeepSeek、Doubao、Moonshot、Ollama、Cloudflare、Microsoft、AWS、IBM、Gemini、Antigravity。

参考ロゴの保存場所：{SKILL_DIR}/assets/

リファレンスライブラリの使い方

1. 視覚的な調査（PNG）：デザインを始める前に、Read ツールを使って対象の業界やスタイルに関連する PNG ファイルを3～5点読みます。AI はレンダリングされたロゴを見て視覚構造を分析し、SVG コードだけでは学ぶことが難しいデザインパターンを把握できます。
2. 技術的な調査（SVG）：視覚的な調査の後、対応する SVG ファイルを読み、パスの構築、グループ、変換、グラデーション、マスクの使い方など、視覚的な結果がコードでどのように実現されているかを理解します。
3. 照合：同じロゴについて、必ず両方の形式を調査してください。PNG は実現すべき「見た目」を示し、SVG はその「作り方」を示します。

---

ワークフロー

フェーズ1 — ブランドアイデンティティと要件の把握

ロゴは、ブランドアイデンティティ全体をひとつのマークに凝縮したものです。このフェーズに十分な時間をかけてください — 理解が浅いまま作られたロゴは、ありきたりな印象になります。

1a. ブランドアイデンティティの詳細分析

ユーザーのリクエストから、以下の内容を抽出または推測します。入力が最小限の場合は、妥当なデフォルトを推測し、前提を明示してください。

項目	把握する内容	重要な理由
ブランド名	正確なテキスト（ワードマーク／レターマーク／モノグラム用）	必要な文字形を決定します
ターゲットオーディエンス	属性、共通の関心事、洗練度	ビジュアルのトーン（遊び心のある表現か、権威ある表現か）を決定します
ブランドの中核となる使命	ブランドの目的を説明する一文	ビジュアルのメタファーの軸になります
ブランドを表す形容詞	ブランドの個性を表す3〜5語（例：「大胆、信頼できる、革新的」）	形状表現と色を決定します
コアバリュー	ブランドが体現する2〜3個のキーワード（例：「信頼」「スピード」「革新」）	シンボルや形状の選択に役立ちます
業界／分野	テクノロジー、金融、医療、食品、教育、クリエイティブなど	スタイルの出発点になります

1b. ロゴの要件

項目	把握する内容
ロゴの種類	ロゴマーク、レターフォーム、モノグラム、ワードマーク、抽象、コンビネーション、またはエンブレム（下記の「ロゴの種類ガイド」を参照）
色の好み	具体的な16進数値、またはムードに基づく指定（「暖色系」「コーポレートブルー」「モノクロ」など）
スタイルの指針	幾何学的／有機的／角張った／丸みのある／抽象的／具象的
使用場面	アプリアイコン、ウェブサイトのヘッダー、ファビコン、印刷物、汎用
ネガティブスペース	ネガティブスペースの巧みな活用についての要望

ロゴの種類ガイド

ブランドのニーズに最も適した種類を選択します。

種類	説明	最適な用途	例
ワードマーク	会社名全体を使い、タイポグラフィを中心に構成	短く、独自性のある名前	Coca-Cola、Google、FedEx
レターフォーム	1文字	強力でコンパクトなブランドアイデンティティを求める有名企業	Facebook（F）、Pinterest（P）
モノグラム	ブランド名のイニシャル	長い名前を持つ老舗ブランド	CNN、H&M、IBM
抽象	テキストを使わず、抽象的な形状やシンボルで構成	モダンで普遍的なマークを求めるブランド	Pepsi、Audi、Nikeのスウッシュ
ロゴマーク	ブランドを表す具象的なシンボル	明確なビジュアルメタファーを持つブランド	Apple、Twitterの鳥
コンビネーション	テキストとシンボルを組み合わせたもの	両方の強みを活用したいブランド	Airbnb、Dropbox、Doritos
エンブレム	形状（バッジ、紋章、シール）の中にテキスト／シンボルを配置	伝統的で権威あるブランド	Starbucks、BMW、Harley-Davidson

フェーズ2 — 参考ロゴのビジュアル調査

デザインの前に必ず実施してください。 PNG形式の参考ロゴを読み込み、ビジュアルへの理解を深めます。

1. {SKILL_DIR}/assets/から、対象ブランドの業界、スタイル、ロゴの種類に最も関連する参考ロゴを3〜5点選びます。Readツールを使ってPNGファイルを確認します。AIはこれらの画像を視覚的に解析できます。
2. 選択したロゴに対応するSVGファイルを読み込み、構成技法を把握します。
3. 観察内容を記録します。調査した参考ロゴごとに、以下を記載してください。
   • デザインを効果的にしている要素（形状表現、ネガティブスペース、バランス）
   • 使用された構成技法（幾何学的な基本図形、パス、マスク）
   • 現在のプロジェクトに応用または適応できる要素

このビジュアル調査は、デザイン計画に直接反映されます。デザインの判断を正当化する際は、具体的な参考ロゴに言及してください。

フェーズ3 — デザイン計画

コードを書く前に、構成されたデザイン計画を作成します。作業を続ける前に、ユーザーに提示して確認を得てください。

デザイン計画テンプレート

## Logo Design Plan: [Brand Name]

### 1. Design Concept
- **Core metaphor**: [What real-world object/shape/idea the logo abstracts]
- **Visual narrative**: [One sentence describing what the viewer should "read" from the logo]
- **Inspiration sources**: [Which reference logos (from Phase 2 visual study) inform this direction and why — cite specific PNG files studied]
- **Uniqueness check**: [How this design avoids clichéd symbols and stands apart from competitors]

### 2. Form Language
- **Geometry**: [Geometric primitives used — circles, rectangles, triangles, curves]
- **Shape semantics**: [Why these shapes were chosen — see Shape Psychology reference]
- **Proportions**: [Grid system, golden ratio, modular scale, or freeform]
- **Negative space**: [How white space participates in the design — any hidden forms or clever reveals]
- **Optical balance**: [Weight distribution and visual center of gravity]
- **Visual hierarchy**: [Which element draws the eye first, second, third]

### 3. Typography (if applicable)
- **Font personality**: [Display / Serif / Sans-serif / Monospace / Slab serif / Script — see Typography Guide]
- **Letterform treatment**: [Custom geometric construction, modified typeface, or hand-drawn feel]
- **Weight and spacing**: [Stroke width rationale, letter-spacing logic]
- **Readability at scale**: [How it reads at favicon size vs. billboard]

### 4. Color Strategy
- **Design approach**: Monochrome first, color second
- **Monochrome version**: [How the logo works in pure black on white]
- **Primary palette**: [Hex values with rationale — see Color Psychology reference]
- **Color scheme type**: [Complementary / Analogous / Triadic / Monochromatic — see Color Theory reference]
- **Color meaning**: [Psychological and cultural associations of chosen colors]
- **Contrast check**: [Sufficient contrast between elements for readability]

### 5. Construction Plan
- **svg.js strategy**: [Which shapes, groups, transforms, masks to use]
- **viewBox**: [Dimensions, typically 0 0 512 512]
- **Scalability target**: [Favicon to billboard]
- **Variants planned**: [Primary logo, compact/icon variant, monochrome variant]

フェーズ4 — svg.jsによるSVGの構築

生のSVGマークアップを書いてはいけません。svg.jsを使って、プログラムでロゴを構築してください。

重要なルール：まずモノクロで作成

必ず最初にモノクロ（白地に黒）でロゴを作成してください。 これにより、色に頼らず形状だけでデザインが成立することを確認できます。モノクロ版のビジュアルレビューに合格してから、色を追加してください。

ステップ 1：HTML ワークスペースを作成する

出力ディレクトリに _logo-workspace.html という名前のファイルを作成し、次のひな形を記述します。

<!DOCTYPE html>
<html>
<head>
  <title>Logo Workspace</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
  <style>
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      padding: 48px 24px;
      min-height: 100vh;
      background: #e8e8e8;
      font-family: system-ui, sans-serif;
    }
    .preview {
      background: white;
      box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    }
    .label {
      font-size: 13px;
      color: #666;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .size-row {
      display: flex;
      gap: 24px;
      align-items: end;
    }
    .size-item { text-align: center; }
    textarea#svg-output {
      position: fixed;
      bottom: 0; left: 0;
      width: 1px; height: 1px;
      opacity: 0;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div>
    <div class="label">Primary — 512×512</div>
    <div id="canvas" class="preview"></div>
  </div>
  <div>
    <div class="label">Scale test</div>
    <div class="size-row">
      <div class="size-item">
        <div class="label">128px</div>
        <div id="preview-128" class="preview"></div>
      </div>
      <div class="size-item">
        <div class="label">64px</div>
        <div id="preview-64" class="preview"></div>
      </div>
      <div class="size-item">
        <div class="label">32px</div>
        <div id="preview-32" class="preview"></div>
      </div>
    </div>
  </div>
  <textarea id="svg-output"></textarea>
  <script>
    var draw = SVG().addTo('#canvas').size(512, 512).viewbox(0, 0, 512, 512);

    // ========== LOGO DRAWING CODE (MONOCHROME FIRST) ==========

    // [AI writes svg.js code here — BLACK ON WHITE ONLY in first pass]

    // ========== END LOGO CODE ==========

    // --- Scale previews ---
    var svgMarkup = draw.node.outerHTML;
    [128, 64, 32].forEach(function(s) {
      var el = document.getElementById('preview-' + s);
      el.innerHTML = svgMarkup;
      var svg = el.querySelector('svg');
      svg.setAttribute('width', s);
      svg.setAttribute('height', s);
    });

    // --- Export ---
    var svgEl = draw.node;
    svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    var output = svgEl.outerHTML;
    output = output.replace(/\s*svgjs:data="[^"]*"/g, '');
    output = output.replace(/\s*class="[^"]*"/g, '');
    document.getElementById('svg-output').value = output;
  </script>
</body>
</html>

単一のキャンバスからの重要な改善点：ワークスペースには、メインの 512px キャンバスに加えて、128px、64px、32px のスケールプレビューが表示されます。これにより、可読性の原則を直接テストできます。ロゴが 32px で判読できない場合は、色を追加する前にシンプルにしてください。

重要：<textarea id="svg-output"> には、抽出する SVG が保存されます。削除しないでください。

ステップ 2：描画コードを記述する（モノクロ）

LOGO DRAWING CODE マーカーの間に svg.js のコードを配置します。最初の段階では、黒（#000 または #1a1a1a）の塗りつぶしのみを使用してください。 生のパスデータよりも高レベルの図形メソッドを優先してください。

svg.js API リファレンス（ロゴに関連するサブセット）

図形：

draw.rect(width, height)              // Rectangle
draw.rect(w, h).radius(r)             // Rounded rectangle
draw.circle(diameter)                  // Circle
draw.ellipse(width, height)           // Ellipse
draw.line(x1, y1, x2, y2)            // Line
draw.polygon('x1,y1 x2,y2 x3,y3')   // Polygon (auto-closed)
draw.polyline('x1,y1 x2,y2 x3,y3')  // Polyline (open)
draw.path('M0 0 L100 50 ...')         // SVG path (complex curves only)

位置とサイズ：

.move(x, y)          // Absolute position (top-left corner)
.center(x, y)        // Center element at position
.size(w, h)          // Resize element
.dx(offset)          // Relative horizontal shift
.dy(offset)          // Relative vertical shift

スタイル：

.fill(color)                                    // '#f06', 'none', 'currentColor'
.fill({ color: '#f06', opacity: 0.8 })          // With opacity
.stroke({ width: 2, color: '#333' })            // Stroke
.stroke({ width: 2, color: '#333', linecap: 'round', linejoin: 'round' })
.opacity(0.5)                                    // Element-level opacity

変形：

.transform({ rotate: 45 })                          // Rotate degrees
.transform({ rotate: 45, origin: [256, 256] })      // Rotate around point
.transform({ scale: 2 })                            // Uniform scale
.transform({ translateX: 10, translateY: 20 })       // Translate
.transform({ rotate: 30 }, true)                     // Additive transform

グループ（複雑なロゴには不可欠）：

var g = draw.group()
g.rect(100, 100).fill('#f06')
g.circle(80).fill('#0f9').center(50, 50)
g.move(100, 100)              // Move entire group
g.transform({ rotate: 45 })   // Transform entire group

グラデーション：

var grad = draw.gradient('linear', function(add) {
  add.stop(0, '#f06')
  add.stop(0.5, '#ff0')
  add.stop(1, '#0f9')
})
grad.from(0, 0).to(1, 1)  // Diagonal direction
draw.rect(100, 100).fill(grad)

var radial = draw.gradient('radial', function(add) {
  add.stop(0, '#fff')
  add.stop(1, '#000')
})
draw.circle(100).fill(radial)

テキスト（ワードマーク／レターマーク）：

draw.text('BRAND').font({
  family: 'Helvetica, Arial, sans-serif',
  size: 72,
  anchor: 'middle',
  weight: 'bold'
}).center(256, 256).fill('#333')

マスク（ネガティブスペースの効果）：

var mask = draw.mask()
mask.rect(512, 512).fill('#fff')                    // White = fully visible
mask.circle(100).center(256, 256).fill('#000')      // Black = hidden

draw.rect(512, 512).fill('#f06').maskWith(mask)     // Circle punched out

クリッピング：

var clip = draw.clip()
clip.circle(200).center(256, 256)

draw.rect(512, 512).fill('#f06').clipWith(clip)     // Only circle area visible

作成方法

幾何学的なロゴ：rect()、circle()、polygon() で作成します。対称性には変形を伴うグループを使用します。1 つのセグメントを描画し、複製して回転させます。

for (var i = 0; i < 6; i++) {
  draw.rect(20, 80).center(256, 200).fill('#333')
    .transform({ rotate: i * 60, origin: [256, 256] })
}

レターマーク／モノグラムロゴ：直線のストロークには rect()、曲線には path() を使って作成します。または、プロトタイプ作成時にウェブセーフな幾何学系フォントで text() を使用し、ブラウザーで確認します。

抽象的なマーク：異なる塗りつぶし色の図形を重ねます。ブーリアン演算のような操作（減算、交差）には mask() を使用します。関連する図形をグループ化して、まとめて変形できるようにします。

ネガティブスペースを用いたロゴ：mask() を使用します。白い領域は表示され、黒い領域は隠れます。最初にポジティブな形状を描き、次にネガティブな形を切り抜きます。

エンブレムロゴ：外側の境界となる形状（円、盾、バッジ）を作成し、その内側にテキストやシンボルを配置します。境界内に要素を収めるには clip() を使用します。

対称パターン：1 つの単位をグループ内に描画し、回転変形を使ったループを作成します。

var unit = draw.group()
unit.ellipse(40, 120).center(256, 190).fill('#f06')

for (var i = 1; i < 8; i++) {
  unit.clone().transform({ rotate: i * 45, origin: [256, 256] }).addTo(draw)
}

フェーズ 5 — ブラウザープレビューと反復

ここが重要な利点です。構造化された批評を伴うビジュアルフィードバックループを実現できます。

ステップ 1：プレビュー

1. ブラウザーでワークスペースを開きます。

   browser_navigate → file:///absolute/path/to/_logo-workspace.html
   

2. 操作できるようにブラウザーをロックします。

   browser_lock
   

3. レンダリングされたロゴを記録するために、スクリーンショットを撮影します。

   browser_take_screenshot
   

ステップ 2：構造化された批評（モノクロ段階）

次の評価基準に照らして、モノクロ版を評価します。

基準	質問	不合格の場合の対応
シンプルさ	これを一文で説明できますか？意味を損なわずに削除できる要素はありますか？	不要な図形を取り除きます。
可読性	32px のプレビューでもはっきり読み取れますか？	簡略化するか、要素を太くします。
独自性	競合他社が同じ基本コンセプトを使う可能性はありますか？ありふれたシンボルではありませんか？	メタファーを見直します。
関連性	形状の表現方法はブランドの個性や対象ユーザーに合っていますか？	ブランドを表す形容詞を見直します。
視覚的なバランス	中央に配置されているように感じますか？視覚的な重さは均等に分散されていますか？	座標だけを頼りにせず、配置を調整します。
ネガティブスペース	余白は意図的に使われていますか？意図せず閉じ込められたスペースはありませんか？	図形間の隙間を整えます。
プロポーション	ストロークの太さは一貫していますか？要素同士のバランスは取れていますか？	幅と間隔を統一します。

ステップ 3：反復する（モノクロ）

モノクロのデザインが評価基準を満たさない場合：

• ブラウザーのロックを解除します：browser_unlock
• _logo-workspace.html 内の JavaScript を編集します
• 再度ロックして、同じ URL に移動し、ページを再読み込みします
• スクリーンショットをもう一度撮影します
• モノクロのデザインがしっかりするまで繰り返します

ステップ 4：色を追加する

モノクロ版の承認後：

• 描画コードを更新して、黒の塗りつぶしを予定しているカラーパレットに置き換えます
• 新しいスクリーンショットを撮影します
• 色がデザインの有効性を高めている（置き換えているのではない）ことを確認します
• 色を付けたバージョンも、すべての評価基準を満たしていることを確認します

Step 5: 最終チェック（カラーの確認）

基準	確認事項
色の調和	色同士は調和していますか？ 配色（補色・類似色・三色配色）に一貫性はありますか？
色の意味	選んだ色はブランドの個性や価値観を引き立てていますか？
コントラスト	隣り合う要素のコントラストは十分ですか？
モノクロでの視認性	彩度を下げてもロゴは機能しますか？（モノクロを先にデザインしているため、機能するはずです。）
時代を超えたデザイン	カラーパレットは定番ですか、それとも流行に左右されていますか？ すぐに古びるネオンカラーのグラデーションは避けてください。

反復サイクルは合計2～4回を目標にしてください（モノクロ＋カラー）。それ以上必要な場合は、デザインのアプローチを見直してください。

Phase 6 — SVG のエクスポートとバリエーション

ブラウザー上でロゴが正しく表示されたら：

1. スナップショットを取得してテキストエリアを見つけます：

   browser_snapshot → find ref for textarea#svg-output
   

2. SVG 文字列を抽出します：

   browser_get_input_value → ref of textarea#svg-output
   

3. SVG を後処理します：

   • ルートの <svg> に xmlns="http://www.w3.org/2000/svg" があることを確認します
   • 存在しない場合は、最初の子要素として <title>[Brand Name]</title> を追加します
   • 残っている svg.js の生成物（svgjs:data、生成された id 属性、class 属性）を削除します
   • viewBox="0 0 512 512" と width="512" height="512" が設定されていることを確認します
   • モノクロロゴの場合は、色の塗りを currentColor に置き換えることを検討します

4. ブラウザーのロックを解除します：

   browser_unlock
   

5. ロゴのバリエーションを保存します：

   • プライマリ：{brand-name}-logo.svg — フルカラー版
   • モノクロ：{brand-name}-logo-mono.svg — 黒一色版（すべての塗りを #000 または currentColor に置き換えます）
   • コンパクト／アイコン（該当する場合）：{brand-name}-icon.svg — テキストなしのシンボルのみ。小さいサイズに最適化します

6. ワークスペースを削除します — Delete ツールを使用して _logo-workspace.html を削除します。

7. 確認します — 「ロゴを {path} に保存しました。プレビューするには、ブラウザーまたは SVG エディターで開いてください。」

---

デザインリファレンスガイド

形状の心理効果

形状には感情に訴える力があります。ブランドの個性を引き立てる形状を選びます。

形状	感情的な連想	最適な用途
円	一体感、コミュニティ、完全性、調和、保護	ソーシャルプラットフォーム、グローバルブランド、インクルーシブなブランド
正方形／長方形	安定性、信頼性、秩序、プロ意識、安全性	金融、エンタープライズ、建設、物流
三角形	方向性、エネルギー、力、革新、向上心	テクノロジー、フィットネス、リーダーシップを重視するブランド
有機的な形状／曲線	動き、流動性、親しみやすさ、自然な成長	健康、ウェルネス、食品、クリエイティブエージェンシー
角張った形状／鋭い形状	精密さ、最先端、大胆さ、破壊的な革新	テクノロジー系スタートアップ、ゲーム、エンジニアリング
六角形	バランス、効率、相互接続（蜂の巣の比喩）	テクノロジー、科学、ネットワーク

色彩理論

調和の取れたパレットには、定評のある色の組み合わせを使用します。

配色	仕組み	効果
モノクロマティック	1つの色相の濃淡	すっきりして洗練された、統一感のある印象
補色	色相環で反対に位置する色相	高いコントラスト、活気のある印象
類似色	色相環で隣り合う色相	調和の取れた、自然で落ち着いた印象
三色配色	均等な間隔で配置された3つの色相	鮮やかでバランスの取れた、ダイナミックな印象
分裂補色	1つの色相と、その補色の両隣にある2つの色相	緊張感を抑えながらコントラストを生み出す

色彩心理学

色	連想されるもの	使用する業界
青	信頼、信頼性、落ち着き、プロフェッショナルさ	金融、テクノロジー、ヘルスケア、企業
赤	エネルギー、緊急性、情熱、興奮	食品、エンターテインメント、小売、スポーツ
緑	成長、健康、自然、新鮮さ、豊かさ	ウェルネス、サステナビリティ、金融
黄／金	楽観、温かみ、明瞭さ、威信	食品、高級品、子ども向けブランド
オレンジ	創造性、熱意、親しみやすさ	Eコマース、エンターテインメント、若者向けブランド
紫	高級感、創造性、知恵、精神性	美容、プレミアムブランド、教育
黒	洗練、力強さ、優雅さ、権威	高級品、ファッション、テクノロジー
白	純粋さ、シンプルさ、ミニマリズム、余白	テクノロジー、ヘルスケア、モダンブランド
茶	信頼性、土の温もり、温かみ、安全性	物流（UPS）、オーガニック、アウトドアブランド
ティール／シアン	革新、明瞭さ、バランス	AI／テクノロジー、ウェルネス、モダンなエンタープライズ

タイポグラフィガイド（ワードマーク、レターマーク、モノグラム向け）

フォントの種類	特徴	使用する場面
ディスプレイ	装飾的、独自性がある、目を引く	大胆で際立つブランド
セリフ	時代を超越した、プロフェッショナル、権威がある	伝統的、高級、エディトリアルなブランド
サンセリフ	モダン、ミニマル、読みやすい	テクノロジー、スタートアップ、クリーンなブランドアイデンティティ
等幅	技術的、レトロ、開発者向け	開発ツール、テクノロジーブランド、ゲーム
スラブセリフ	力強い、権威がある、インパクトがある	注目を集めたいブランド
スクリプト	優雅、創造的、パーソナル	美容、ウェディング、職人ブランド

svg.js でプログラムから字形を構成する場合、最終的なロゴには text() ではなく、幾何学的な構成（rect()、circle()、path() から文字を組み立てる方法）を優先してください。エクスポートした SVG でフォント依存の問題が起きるのを防げます。

---

デザイン原則 — 優れた例から学ぶ

生成する前に、assets/ 内の参考ロゴを調べてください。PNG ファイルを読んで各ロゴを目で確認し、SVG ファイルを読んで構成を理解してください。 主なパターンは次のとおりです。

Apple — ひと目でわかるシルエットひとつ。ひとつのパス、ひとつの形で、世界中に認識されています。かじられた部分が非対称性と記憶に残る印象を生み出します。

OpenAI — 幾何学的な対称性による数学的な精密さ。パスが絡み合う六角形の結び目です。

Anthropic — 純粋な幾何学にまで単純化したレターマーク。大胆で構造的、どのサイズでも一目瞭然です。

Cursor — 平面的に表現された 3D プリズム。ひとつの形を光と影に分けることで、奥行きの錯覚を生み出します。

Figma — モジュール式の積み木。グリッド上に並んだ角丸長方形は、それぞれ異なる色です。シンプルなパーツが複雑な全体を形作ります。

Google — 4 つのシンプルな弧から作られた文字「G」。色の区分によって、純粋な幾何学だけで認識されます。

FedEx — 「E」と「x」の間のネガティブスペースに隠された矢印。発見したときの驚きが、ブランドの約束を強く印象付けます。

Nike — 抽象的なスウッシュが動きとエネルギーを表現します。テキストは不要です。究極のシンプルさです。

Starbucks — 円形の枠内に精緻なイラストを収めたエンブレム。すっきりとした枠の内側なら、エンブレムに複雑さを持たせられることを示しています。

品質チェックリスト

最終決定の前に、以下の5つの原則に照らして確認してください。

シンプルさ：

• ロゴを1文で説明できる
• 不要な要素がなく、すべての形に意味がある
• 最終デザインの図形グループが5つ以下である
• ファイルサイズが5KB未満（理想は2KB未満）である

時代を超えること：

• 流行のグラデーション、テクスチャ、エフェクトを避けている
• 10年後も違和感なく見える
• その時々の美的傾向ではなく、ブランド価値に根ざしたデザインである

独自性：

• 決まりきったシンボル（電球、地球、ありふれたスウッシュ）を使っていない
• 同じ業界の競合他社とはっきり異なる
• 印象に残るディテールや隠された意味がある

関連性：

• 形状の表現がブランドの個性（フェーズ1で挙げた形容詞）に合っている
• 色の選択が業界やオーディエンスの期待に沿っている
• 適切なトーン（遊び心がある、プロフェッショナル、高級感があるなど）である

読みやすさ：

• ブラウザーのスクリーンショットで、すっきりとプロフェッショナルなロゴに見える
• 32pxのプレビューでも判読でき、見分けられる
• テキスト要素（ある場合）がすべてのサイズで鮮明である
• 要素間に十分なコントラストがある
• viewBox内に8～12%の余白を取り、視覚的に中央に配置されている

技術的品質：

• モノクロ版だけでも適切に機能する
• 図形が重なって意図しないアーティファクトが生じていない
• 最終的な.svgファイルがクリーンで、svg.jsのアーティファクトや不要なID／クラスがない
• あらゆるブラウザーで解析可能な有効なSVGである
• ロゴのバリエーション（プライマリ、モノクロ、必要に応じてコンパクト／アイコン）を納品している

よくある落とし穴

• ブランドアイデンティティの深掘りを省く：「かっこいいものを作る」というだけで作ったロゴはありきたりになります。フェーズ1に時間をかけてください。
• 色から始める：まずモノクロでデザインしてください。色はデザインを引き立てるものであり、弱い形を補うものであってはなりません。
• 複雑にしすぎる：ミニマルなロゴの図形グループが5つ以上あると複雑すぎます。シンプルにしてください。
• 小さすぎて見えなくなるディテール：32×32で見えないものは削除してください。ワークスペースでの縮小テストで確認できます。
• ありふれた形：すべての形にブランド固有の意味を持たせてください。「抽象的な blob」のようなデザインは避けてください。
• 決まりきったシンボル：アイデアには電球、グローバルには地球、エンジニアリングには歯車ではなく、もっと新鮮な比喩を探してください。
• 視覚的な中央揃えが不適切：スクリーンショットで目視確認してください。座標だけを信頼しないでください。
• 線幅に一貫性がない：要素全体で視覚的な線の太さを統一してください。
• 生のパスデータ：プリミティブでは作成できない曲線に限り、draw.path()を使用してください。rect()、circle()、polygon()、group()と変換を優先してください。
• 反復を省く：必ずブラウザーでプレビューしてください。視覚的に確認せずにロゴを納品してはいけません。
• バリエーションを1つしか納品しない：カラー版とモノクロ版を最低1つずつ、必ず納品してください。

業界別のスタイルの方向性

業界	よく使われる形状表現	色の方向性	形状の傾向
テクノロジー／AI	幾何学的、角張った形、相互接続されたノード	青、グラデーション、モノクロ	六角形、三角形、鋭い角
金融	安定感、左右対称、強い水平線	ネイビー、ゴールド、濃い緑	正方形、長方形、盾形
ヘルスケア	有機的な曲線、丸み、流れるような形	緑、ティール、温かみのある白	円、曲線、有機的な形
飲食	温かみのある手作り感、円形	アースカラー、赤、オレンジ	円、有機的な形
教育	開放感、上昇、本や光のメタファー	青、緑、温かみのある黄色	上向きの三角形、開いた本
クリエイティブ／デザイン	非対称、大胆、型破り	鮮やかな色、多色、黒	多様な形、ルールにとらわれない
Eコマース	動きがあり、前進する印象、矢印のモチーフ	オレンジ、青、明るい白	矢印、動きのある角度
ゲーム	鋭く、角張った、エネルギッシュ	ネオンカラー、暗い背景、高コントラスト	鋭い角、大胆な幾何学形状
高級品	洗練、ミニマル、高コントラスト	黒、ゴールド、深みのある宝石色	細い線、セリフ体
子ども／教育	丸みがあり、遊び心があり、親しみやすい	明るい原色、パステルカラー	円、柔らかく丸みのある形

これらは出発点であり、ルールではありません。ブランドに必要であれば、慣例を打ち破ってください。