SVG Logo Designer

Name: SVG Logo Designer
Author: rknall

github.com/rknallデザイン・UI868.3k 回インストール53 週間前に更新

リポジトリ

SVG Logo Designer について

SVG Logo Designerは、デザイン要件に基づいてSVGロゴを作成するスキルです。ブランドマーク、アイコン、ワードマークを検討する人向けに、要件整理からコンセプトやレイアウトの展開、SVG作成、納品資料までを案内します。

主な機能

01ブランドと技術要件の整理
02複数のロゴコンセプトの作成
03レイアウトと配色のバリエーション
04拡大縮小可能なSVGコードの作成
05ファイル構成と使用ガイドの整理
06SVGの書き出し方法の説明

活用シーン

01新しいブランドのロゴをデザイン
02アイコン、ワードマーク、組み合わせ案を検討
03用途に応じたレイアウトを作成
04SVGファイルと使用ガイドをまとめる

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rknall/claude-skills --skill svg-logo-designer

インストール後、Claude Code で/svg-logo-designerを入力して読み込まれたか確認します。

同梱ファイルREADME.md

詳細

SVG ロゴデザイナー

このスキルは、デザイン仕様に基づいて、プロフェッショナルで拡大縮小可能なベクターグラフィック（SVG）ロゴを作成し、複数のバリエーションとレイアウトを提供します。

このスキルを使用するタイミング

ユーザーが以下を依頼したときに、このスキルを有効にします。

説明や仕様に基づいてロゴを作成する
ブランドアイデンティティやビジュアルマークをデザインする
ロゴのバリエーションやコンセプトを生成する
アイコンやシンボルを作成する
ワードマークやレターマークをデザインする
ブランディング用の拡大縮小可能なグラフィックを制作する
さまざまなレイアウトやスタイルでロゴを書き出す

基本的なワークフロー

フェーズ 1：要件の収集

ユーザーからロゴの依頼を受けたら、デザイン要件を詳しく確認します。

ブランド情報
- 会社名／製品名
- 業界と市場
- ターゲット層
- ブランドの個性（モダン、クラシック、遊び心のある、真面目なものなど）
- ブランドの価値観とメッセージ
- 競合他社（差別化のため）
デザインの好み
- ロゴの種類：
  - ワードマーク：テキストを主体としたロゴ（Google、Coca-Cola のようなスタイル）
  - レターマーク：頭文字／略称（IBM、HBO のようなスタイル）
  - ピクトリアルマーク：アイコン／シンボル（Apple、Twitter のようなスタイル）
  - アブストラクトマーク：抽象的な幾何学形状（Pepsi、Adidas のようなスタイル）
  - マスコット：キャラクターを主体としたロゴ（KFC のカーネル、ミシュランマンのようなスタイル）
  - コンビネーションマーク：アイコン＋テキスト（Burger King、Lacoste のようなスタイル）
  - エンブレム：シンボルの中にテキストを配置したロゴ（Starbucks、Harley-Davidson のようなスタイル）
スタイルガイドライン
- カラーパレット（具体的な色、または AI に選んでもらう）
- 色彩心理に関する考慮事項
- フォントの好み（テキストを主体とする場合）
- ビジュアルスタイル：
  - ミニマリスト
  - 幾何学的
  - オーガニック／流れるような表現
  - 大胆／力強い
  - エレガント／洗練された
  - 遊び心のある／親しみやすい
  - テック／モダン
  - ヴィンテージ／レトロ
技術要件
- サイズの制約（小さく使うか、大きく使うか）
- 使用する場面（ウェブサイト、印刷物、グッズなど）
- カラー版とモノクロ版の必要性
- 背景の使用方法（明るい、暗い、透明）
- 拡大縮小への要件
バリエーションの数
- 異なるコンセプトはいくつ必要か（3～5 個を推奨）
- コンセプトごとにいくつのレイアウトが必要か（横型、縦型、正方形、円形）
- 色のバリエーションは必要か

フェーズ 2：デザインコンセプトの作成

要件に基づいて、複数のロゴコンセプトを作成します。

コンセプト 1：主要な方向性

メインとなるデザインの方向性を考えます。

デザインの検討事項：

ブランドに関連する視覚的なメタファーを調べる
ネガティブスペースの活用方法を検討する
覚えやすさと独自性を確保する
シンプルさと際立った特徴のバランスを取る
文化的な適切さを考慮する

SVG 構造：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#4F46E5;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
    </linearGradient>
  </defs>

  
  <g id="logo-symbol">
    
  </g>

  <g id="logo-text">
    
  </g>
</svg>

コンセプト 2～5：代替案

異なるビジュアルアプローチを探るバリエーションを作成します。

異なる視覚的なメタファー
異なるスタイルの表現
異なるレイアウトと構成
異なる色の適用方法

フェーズ 3：レイアウトのバリエーション

各コンセプトについて、複数のレイアウト案を作成します。

レイアウト A：横型ロックアップ

左にアイコン、右にテキストを配置
ウェブサイトのヘッダーや名刺に最適
横長のアスペクト比

レイアウト B：縦型ロックアップ

上にアイコン、下にテキストを配置
ソーシャルメディアのプロフィールやアプリアイコンに最適
縦長のアスペクト比

レイアウト C：正方形／中央揃え

アイコンとテキストを中央に配置
ファビコン、アプリアイコン、プロフィール画像に最適
1:1 のアスペクト比

レイアウト D：アイコンのみ

テキストを含めず、シンボルのみを使用
小さいサイズや透かしに最適
コンパクトで認識しやすい

レイアウト E：テキストのみ

アイコンを含めず、ワードマークのみを使用
ミニマルな用途に最適
タイポグラフィを主体とする

フェーズ 4：SVG の生成

プロフェッショナルで最適化された SVG コードを作成します。

ベストプラクティス：

クリーンでセマンティックなコード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
  
  <g id="icon">
    
  </g>
  <g id="wordmark">
    
  </g>
</svg>

スケーラブルなデザイン
- 拡大縮小に対応するために viewBox を使用します
- ピクセル単位で固定されたサイズは避けます
- 相対単位を使用します
- 複数のサイズでデザインをテストします
色の管理


<defs>
  <style>
    .primary { fill: #4F46E5; }
    .secondary { fill: #10B981; }
    .text { fill: #1F2937; }
  </style>
</defs>

<rect class="primary" x="0" y="0" width="100" height="100" />

最適化
- 不要な属性を削除します
- 可能な場合はパスを結合します
- 繰り返し使う要素にはシンボルを使用します
- 小数点以下の桁数を最小限にします
- 表示されない要素を削除します
アクセシビリティ

<svg role="img" aria-labelledby="logo-title logo-desc">
  <title id="logo-title">Company Name Logo</title>
  <desc id="logo-desc">A blue circular icon with the company name</desc>
  
</svg>

フェーズ 5：プレゼンテーション

ロゴを整理されたプロフェッショナルな形式で提示します。

# Logo Design Concepts

## Concept 1: [Concept Name/Theme]

### Design Rationale
[Explain the thinking behind this design, visual metaphors used, and how it represents the brand]

### Primary Logo (Horizontal)
```xml
<svg></svg>

用途： ヘッダー、ウェブサイトのナビゲーション、名刺 寸法： 200×60px（拡大縮小可能）

縦型レイアウト

<svg></svg>

用途： ソーシャルメディアのプロフィール、モバイルアプリ 寸法： 100×120px（拡大縮小可能）

アイコンのみ

<svg></svg>

用途： ファビコン、アプリアイコン、小さなスペース 寸法： 64×64px（拡大縮小可能）

カラーバリエーション

フルカラー：

プライマリ：#4F46E5（インディゴ）
セカンダリ：#10B981（エメラルド）

モノクロ（ダーク）：

単色：#1F2937（Gray-900）

モノクロ（ライト）：

単色：#FFFFFF（ホワイト）

反転：

暗い背景向け

コンセプト 2：[コンセプト名／テーマ]

追加のコンセプトについて、同じ構成を繰り返します。


### Phase 6: File Generation

Save SVG files with proper naming:

```javascript
// File naming convention
company-name-logo-concept1-horizontal.svg
company-name-logo-concept1-vertical.svg
company-name-logo-concept1-icon.svg
company-name-logo-concept2-horizontal.svg
// etc.

Write ツールを使用して各バリエーションを保存します。

// Example
Write({
  file_path: "./logos/acme-logo-concept1-horizontal.svg",
  content: svgCode
});

フェーズ 7：使用ガイドライン

包括的な使用ドキュメントを提供します。

# Logo Usage Guidelines

## File Formats Provided

### SVG (Scalable Vector Graphics)
- **Use for:** Websites, digital applications, large prints
- **Benefits:** Infinitely scalable, small file size, editable
- **How to use:** Embed directly in HTML or open in design tools

### Exporting to PNG
If you need PNG format:

**Option 1: Using Inkscape (Free)**
```bash
inkscape logo.svg --export-png=logo.png --export-width=1000

オプション 2：ImageMagick を使用

convert -background none logo.svg logo.png

オプション 3：オンラインコンバーター

https://cloudconvert.com/svg-to-png にアクセスします
SVG をアップロードし、PNG をダウンロードします

クリアスペース

ロゴの周囲に最低限のクリアスペースを確保します。

距離＝ロゴシンボルの高さ
クリアスペース内にテキストやグラフィックを配置しないでください

最小サイズ

デジタル： 最小幅 100px
印刷： 最小幅 1 inch

色の使用

プライマリーカラーパレット

白または明るい背景ではフルカラーを使用します
暗い背景ではモノクロの白を使用します
明るい背景ではモノクロのダークを使用します

コンテキスト別のカラーバリエーション

ウェブサイトのヘッダー：

フルカラーバージョンを推奨します
背景とのコントラスト比が 4.5:1 になるようにします

ソーシャルメディア：

正方形または円形にトリミングして使用します
必要に応じて背景色を指定します

印刷物：

カラー印刷ではフルカラーを使用します
白黒印刷ではモノクロの黒を使用します
コスト効率の良い印刷には特色の使用を検討します

誤った使用方法

❌ 次のことはしないでください：

ロゴを引き伸ばしたり、変形したりする
承認済みのパレット以外の色に変更する
効果（影、グローなど）を追加する
ロゴを回転または傾斜させる
クリアスペースを確保せずに、複雑な背景に配置する
ロゴの要素を再作成または変更する

ファイル構成

logos/
  concept-1/
    horizontal/
      full-color.svg
      monochrome-dark.svg
      monochrome-light.svg
    vertical/
      [same variations]
    icon/
      [same variations]
  concept-2/
    [same structure]

技術仕様

ウェブでの使用


<svg></svg>


<img src="logo.svg" alt="Company Name Logo" />


.logo {
  background-image: url('logo.svg');
  background-size: contain;
}

レスポンシブ対応

.logo {
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* Mobile */
@media (max-width: 768px) {
  .logo {
    max-width: 150px;
  }
}


## Design Patterns & Examples

### Wordmark Logo

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80">
  <defs>
    <style>
      .wordmark {
        font-family: 'Helvetica', sans-serif;
        font-size: 48px;
        font-weight: 700;
        fill: #1F2937;
      }
    </style>
  </defs>
  <text x="10" y="60" class="wordmark">COMPANY</text>
</svg>

幾何学的なアイコン

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#4F46E5" />
      <stop offset="100%" style="stop-color:#7C3AED" />
    </linearGradient>
  </defs>

  
  <polygon
    points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5"
    fill="url(#grad)"
    stroke="#312E81"
    stroke-width="2"
  />

  
  <circle cx="50" cy="50" r="20" fill="#FFFFFF" />
</svg>

抽象的なマーク

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  
  <path
    d="M10,50 Q30,20 50,50 T90,50 Q70,80 50,50 T10,50 Z"
    fill="#10B981"
    opacity="0.8"
  />
  <path
    d="M15,55 Q35,25 55,55 T95,55"
    fill="none"
    stroke="#059669"
    stroke-width="3"
    stroke-linecap="round"
  />
</svg>

コンビネーションマーク

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80">
  
  <g id="icon">
    <circle cx="40" cy="40" r="30" fill="#4F46E5" />
    <path d="M30,35 L35,45 L50,25" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" />
  </g>

  
  <g id="text">
    <text x="85" y="45" font-family="Arial, sans-serif" font-size="28" font-weight="700" fill="#1F2937">
      COMPANY
    </text>
  </g>
</svg>

色彩心理ガイド

ユーザーが適切な色を選べるようにします。

青（#0066CC、#4F46E5）

信頼、プロ意識、安定
業界：金融、テクノロジー、ヘルスケア

緑（#10B981、#059669）

成長、健康、環境への配慮
業界：環境、ウェルネス、金融

赤（#DC2626、#EF4444）

活力、情熱、緊急性
業界：食品、エンターテインメント、小売

紫（#7C3AED、#8B5CF6）

創造性、高級感、精神性
業界：美容、テクノロジー、クリエイティブ

オレンジ（#F97316、#FB923C）

親しみやすさ、活力、手頃な価格
業界：小売、食品、エンターテインメント

黄色（#FBBF24、#FCD34D）

楽観、明快さ、温かさ
業界：食品、子ども向け、エネルギー

黒／グレー（#1F2937、#6B7280）

洗練、現代性、伝統
業界：高級品、ファッション、テクノロジー

反復プロセス

初期コンセプトを提示した後：

フィードバックを集める
- どのコンセプトが最も気に入りましたか？
- どの要素を残し、変更しますか？
- 懸念点や問題点はありますか？
選ばれたコンセプトを洗練する
- 必要に応じて色を調整する
- 比率を微調整する
- 細部を洗練する
- さまざまなサイズでテストする
最終バリエーションを作成する
- すべてのレイアウトオプション
- すべてのカラーバリエーション
- 特殊な用途向けのバリエーション
最終パッケージを納品する
- すべての SVG ファイル
- 使用ガイドライン
- 技術仕様
- エクスポート手順

コミュニケーションスタイル

ユーザーと作業する際は：

ブランドを理解する
- ブランドの個性について尋ねる
- ターゲット層を把握する
- 業界の背景を調査する
デザインの選択理由を説明する
- 視覚的なメタファーの意図を共有する
- 色彩心理について説明する
- 構図の決定理由を説明する
選択肢を提示する
- 複数のコンセプトを提案する
- レイアウトのバリエーションを示す
- カラーオプションを提示する
柔軟に対応する
- フィードバックを前向きに受け止める
- 意見を反映して反復する
- 必要に応じて制約を説明する
知識を共有する
- SVG の利点を説明する
- 適切な使い方を案内する
- ベストプラクティスを共有する

納品物

完全なロゴパッケージを提供します：

SVG ファイル
- すべてのコンセプト（3～5 種類）
- コンセプトごとのすべてのレイアウト（3～5 種類）
- すべてのカラーバリエーション（3～4 種類）
- 合計：通常 30～75 ファイル
ドキュメント
- 使用ガイドライン
- 色の仕様
- 推奨サイズ
- 使用上の注意事項
技術情報
- ファイル構成
- エクスポート手順（SVG から PNG へ）
- Web での実装例
- 印刷仕様
任意：モックアップ
- 名刺に配置したロゴ
- Web サイトのヘッダーに配置したロゴ
- 製品に配置したロゴ
- 看板に配置したロゴ

ワークフローの例

ユーザーの依頼：

「『CloudSync』という名前のテック系スタートアップのロゴを作成してください。クラウドストレージソリューションを提供しています。モダンで信頼感のあるデザインを希望します。」

あなたの回答：

確認する：
- 「CloudSync 向けに、モダンでテクノロジーを感じさせるロゴを作成します。いくつか質問があります。
  - 希望する色はありますか？（信頼感のある青を提案するか、こちらからパレットを提案できます）
  - ロゴの種類に希望はありますか？（アイコンとテキストを組み合わせたコンビネーションマークを考えています）
  - 含めたい、または避けたい視覚要素はありますか？（雲、同期記号など）
  - コンセプトはいくつご覧になりたいですか？（3～4 種類をおすすめします）」
コンセプトを考案する：
- コンセプト 1：同期矢印を組み合わせた抽象的な雲、モダンな幾何学スタイル
- コンセプト 2：雲を取り入れたスタイリッシュな「C」のミニマルなワードマーク
- コンセプト 3：雲と接続ノードをあしらった円形のバッジ
- コンセプト 4：雲を取り入れた大胆なレターマーク「CS」
バリエーションを作成する：
- 各コンセプトについて：横型、縦型、アイコンのみのレイアウト
- カラーバリエーション：フルカラー、モノクロ、反転
提示する：
- すべてのコンセプトを理由とともに提示する
- 各コンセプトの SVG コードを提供する
- 使用ガイドラインを含める
- フィードバックに基づく反復を提案する
洗練する：
- ユーザーが好みのコンセプトを選ぶ
- 希望された調整を行う
- すべてのバリエーションを仕上げる
- 完全なパッケージを納品する

覚えておいてください。優れたロゴは、シンプルで、記憶に残り、時代を超え、汎用性があり、目的に適したものです。あらゆる用途で機能し、長く使えるデザインの作成に注力しましょう！

Markdown 対応

ログインしてコメント

基本情報

作者: rknall
リポジトリ: rknall/claude-skills
カテゴリ: デザイン・UI
インストール数: 8,262
GitHub スター: 86

問題を報告