logo-design-guide について
inference.sh の AI 画像生成でロゴ案を作る belt CLI スキルです。ロゴの種類、プロンプト、拡大縮小、配色、反復、納品形式を解説し、生成文字の再現性に関する制約も示します。
主な機能
- 01画像モデルによるロゴ案の生成
- 02一般的なロゴ種類の選択
- 03ロゴ生成プロンプトの構成
- 04各サイズでの視認性確認
- 05配色とコントラストの指針
- 06ラスター・ベクター形式の納品準備
活用シーン
- 01ブランドロゴの初期案を検討
- 02反復してアイコンを調整
- 03小サイズでのマークの見え方を評価
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ magentosh/ superpowers --skill logo-design-guideインストール後、Claude Code で/logo-design-guideを入力して読み込まれたか確認します。
詳細
belt CLI スキルをインストールする:
npx skills add belt-sh/cli
ロゴデザインガイド
inference.sh CLI を使った AI 画像生成で、効果的なロゴをデザインします。
クイックスタート
inference.sh CLI(
belt)が必要です。インストール手順
belt login
# Generate a logo concept
belt app run falai/flux-dev-lora --input '{
"prompt": "flat vector logo of a mountain peak with a sunrise, minimal geometric style, single color, clean lines, white background",
"width": 1024,
"height": 1024
}'
ロゴの種類
| 種類 | 説明 | 使用する場面 | 例 |
|---|---|---|---|
| ワードマーク | 会社名をロゴとしてデザイン | ブランド名が強く、短い(10文字未満)場合 | Google、Coca-Cola |
| レターマーク | 頭文字のみ | 会社名が長い、フォーマルな場合 | IBM、HBO、CNN |
| ピクトリアル | 認識しやすいアイコン/シンボル | 汎用的なブランド、文字なしでも機能する場合 | Apple、Twitterの鳥 |
| 抽象 | 幾何学的/非具象的な形 | テクノロジー企業、概念的なブランド | Nikeのスウッシュ、Pepsi |
| マスコット | キャラクターのイラスト | 親しみやすいブランド、食品/スポーツ | KFCのカーネル、Pringles |
| コンビネーション | アイコンとワードマークを組み合わせたもの | 認知度と名称の両方が必要な新しいブランド | Burger King、Adidas |
AI の重要な制約
AI 画像生成ツールはテキストを安定して描画できません。 文字が歪んだり、つづりが間違ったり、判読不能になったりします。
方針:
- AI でアイコン/シンボルのみを生成する
- デザインツール(Figma、Canva、Illustrator)でテキスト/ワードマークを追加する
- または、AI アイコンと手動で設定したタイポグラフィを組み合わせる
ロゴ用のプロンプト
効果的なキーワード
flat vector logo, simple minimal icon, single color silhouette,
geometric logo mark, clean lines, negative space design,
line art logo, flat design icon, minimalist symbol
効果のないキーワード
❌ photorealistic logo (contradiction — logos aren't photos)
❌ 3D rendered logo (too complex, won't scale down)
❌ gradient logo (inconsistent results, hard to reproduce)
❌ logo with text "Company Name" (text rendering fails)
プロンプトの構成
flat vector logo of [subject], [style], [color constraint], [background], [additional detail]
ロゴの種類別の例
# Abstract geometric
belt app run falai/flux-dev-lora --input '{
"prompt": "flat vector abstract logo, interlocking hexagonal shapes forming a letter S, minimal geometric style, single navy blue color, white background, clean sharp edges"
}'
# Pictorial nature
belt app run falai/flux-dev-lora --input '{
"prompt": "flat vector logo of a fox head in profile, geometric faceted style, orange and white, minimal clean lines, white background, negative space design"
}'
# Mascot style
belt app run bytedance/seedream-4-5 --input '{
"prompt": "friendly cartoon owl mascot logo, simple flat illustration, wearing graduation cap, purple and gold colors, white background, clean vector style"
}'
# Tech abstract
belt app run xai/grok-imagine-image-pro --input '{
"prompt": "minimal abstract logo mark, interconnected nodes forming a brain shape, line art style, single teal color, white background, tech startup aesthetic"
}'
拡大・縮小に関するルール
ロゴはあらゆるサイズで機能する必要があります。
| 用途 | サイズ | 必要な条件 |
|---|---|---|
| ファビコン | 16x16 px | シルエットが認識できる |
| アプリアイコン | 1024x1024 px | 細部まで見える |
| SNS アバター | 400x400 px | ひと目でわかる |
| 名刺 | 約1インチ | きれいに印刷できる |
| 看板 | 10フィート以上 | ピクセル化せず、十分にシンプル |
拡大・縮小のチェックリスト
- 16px のファビコンとして認識できる(目を細めて確認)
- 単色(白地に黒)で機能する
- 反転(黒地に白)でも機能する
- 小さいサイズで消えてしまう極小のディテールがない
- 縮小すると消える細い線がない
- 色がなくてもシルエットが明確
色に関するガイドライン
- ロゴの基本色は最大2~3色
- 単色(黒、白、またはブランドのメインカラー)でも機能すること
- 色彩心理を考慮する:
- 青:信頼、プロフェッショナル(金融、テクノロジー、医療)
- 赤:活力、緊急性(食品、エンターテインメント、小売)
- 緑:成長、自然(健康、サステナビリティ、金融)
- オレンジ:親しみやすさ、創造性(スタートアップ、若者向けブランド)
- 紫:高級感、知恵(美容、教育)
- 黒:上質さ、エレガンス(ファッション、高級品、テクノロジー)
- 明るい背景と暗い背景の両方で確認する
反復ワークフロー
# Step 1: Generate 5-10 broad concepts
for i in {1..5}; do
belt app run falai/flux-dev-lora --input '{
"prompt": "flat vector logo of a lighthouse, minimal geometric, single color, white background"
}' --no-wait
done
# Step 2: Refine the best concept with variations
belt app run falai/flux-dev-lora --input '{
"prompt": "flat vector logo of a geometric lighthouse with light beam rays, minimal line art, navy blue, white background, negative space design"
}'
# Step 3: Generate at high resolution for final
belt app run bytedance/seedream-4-5 --input '{
"prompt": "flat vector logo of a geometric lighthouse with radiating light beams, minimal clean design, navy blue single color, pure white background",
"size": "2K"
}'
# Step 4: Upscale for production use
belt app run falai/topaz-image-upscaler --input '{
"image": "path/to/best-logo.png",
"scale": 4
}'
よくある間違い
| 間違い | 問題 | 対策 |
|---|---|---|
| ディテールが多すぎる | 小さいサイズで明瞭さが失われる | 重要な形だけにシンプル化する |
| 色に依存している | 白黒の用途で機能しない | まず黒でデザインする |
| AI 生成でテキストを入れる | 文字が判読不能になったり、つづりが間違ったりする | アイコンのみを生成し、テキストは手動で追加する |
| 流行のエフェクト(光彩、影) | すぐに古び、再現時に問題が起きる | フラットで時代に左右されないデザインにする |
| 色が多すぎる | 再現しにくく、印刷費用がかさむ | 最大2~3色にする |
| 意図のない非対称 | 未完成に見える | 意図的に非対称にするか、バランスを保つ |
ファイル形式の納品
| 形式 | 用途 |
|---|---|
| SVG | 拡大縮小可能なベクター、ウェブ、編集 |
| PNG(透明) | デジタル用途、プレゼンテーション |
| PNG(白背景) | 文書、メールの署名 |
| ICO / Favicon | ウェブサイトのファビコン(16、32、48px) |
| 高解像度 PNG(4096px 以上) | 印刷、看板 |
注:AI はラスター画像(PNG)を生成します。ベクター SVG を作成するには、AI の出力を参考にベクターツールでトレースするか、AI から SVG への変換ツールを使います。
関連スキル
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@prompt-engineering
すべてのアプリを表示:belt app list
コメント
Markdown 対応