Community画像github.com

SeaXen/logo-design-guide

ロゴデザインの原則とAI画像生成のベストプラクティスを解説します。ロゴの種類、プロンプトテクニック、スケーラビリティのルール、反復ワークフローを網羅。ブランドアイデンティティ、スタートアップロゴ、アプリアイコン、ファビコン、ロゴコンセプト作成に最適です。

logo-design-guide とは？

このスキルは、AI画像生成ツール（特に inference.sh CLI）を活用して効果的なロゴをデザインするための包括的なガイドです。ロゴデザインの基本原則から、AI特有の注意点（テキストレンダリングの問題など）、プロンプトエンジニアリングのベストプラクティス、スケーラビリティのルール、カラーガイドライン、反復ワークフローまでを詳細にカバーします。対応プラットフォームは inference.sh CLI（belt）で、Fal AI、Seedream、Grok などのモデルを利用できます。ユーザーは、ロゴタイプ（ワードマーク、レターマーク、ピクトリアル、抽象、マスコット、組み合わせ）ごとに最適化されたプロンプト例を参考にしながら、AIが生成したラスター画像をベースに、後工程でベクター化や文字入れを行うワークフローを学べます。このスキルは、ブランドアイデンティティの構築、スタートアップロゴ、アプリアイコン、ファビコンなど、あらゆるロゴ作成シーンで役立ちます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SeaXen/agentskills/tree/HEAD/library/101-skills-superpowers/skills/logo-design-guide

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

belt CLI スキルのインストール: npx skills add belt-sh/cli

ロゴデザインガイド

inference.sh CLI を使用した AI 画像生成で効果的なロゴをデザインします。

クイックスタート

inference.sh CLI (belt) が必要です。インストール手順

belt login

# ロゴコンセプトを生成
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 bird
アブストラクト幾何学的/非具象的な形状テクノロジー企業、コンセプチュアルなブランドNike swoosh, Pepsi
マスコットキャラクターイラスト親しみやすいブランド、フード/スポーツKFC Colonel, Pringles
コンビネーションアイコン＋ワードマークの組み合わせ認識と名前の両方が必要な新しいブランドBurger King, Adidas

AI の重要な制限

AI 画像生成ツールはテキストを確実にレンダリングできません。 文字は歪んだり、誤字脱字が発生したり、判読不能になります。

戦略:

  1. AI ではアイコン/シンボルのみを生成する
  2. デザインツール（Figma, Canva, Illustrator）でテキスト/ワードマークを追加する
  3. または、組み合わせアプローチ: 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 (矛盾 — ロゴは写真ではない)
❌ 3D rendered logo (複雑すぎて縮小できない)
❌ gradient logo (結果が不安定、再現が難しい)
❌ logo with text "Company Name" (テキストレンダリングに失敗)

プロンプトの構造

flat vector logo of [被写体], [スタイル], [色の制約], [背景], [追加の詳細]

ロゴタイプ別の例

# 抽象幾何学
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"
}'

# ピクトリアル（自然）
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"
}'

# マスコットスタイル
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"
}'

# テクノロジー抽象
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詳細が完全に見える
ソーシャルアバター400x400 px一目でわかる
名刺約1インチきれいに印刷可能
ビルボード10フィート以上ピクセル化しない、十分シンプル

スケーラビリティチェックリスト

  • 16px ファビコンとして認識可能（目を細めてテスト）
  • 単色（白背景に黒）で機能する
  • 反転（黒背景に白）で機能する
  • 小さいサイズで消える細かいディテールがない
  • 縮小したときに消える細い線がない
  • 色なしでも明確なシルエット

カラーガイドライン

  • プライマリロゴには最大2〜3色
  • 単色（黒、白、またはブランドのプライマリカラー）で機能する必要がある
  • 色彩心理学を考慮する:
    • 青: 信頼、プロフェッショナル（金融、テクノロジー、ヘルスケア）
    • 赤: エネルギー、緊急性（食品、エンターテイメント、小売）
    • 緑: 成長、自然（健康、サステナビリティ、金融）
    • オレンジ: 親しみやすい、クリエイティブ（スタートアップ、若者向けブランド）
    • 紫: 高級、知恵（美容、教育）
    • 黒: プレミアム、エレガント（ファッション、高級、テクノロジー）
  • 明るい背景と暗い背景の両方でテストする

反復ワークフロー

# ステップ1: 5〜10の幅広いコンセプトを生成
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

# ステップ2: 最良のコンセプトをバリエーションで洗練
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"
}'

# ステップ3: 最終版を高解像度で生成
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"
}'

# ステップ4: プロダクション用にアップスケール
belt app run falai/topaz-image-upscaler --input '{
  "image": "path/to/best-logo.png",
  "scale": 4
}'

よくある間違い

間違い問題修正
詳細が多すぎる小さいサイズで明瞭性を失う必須の形状に簡略化する
色に依存している白黒のコンテキストで失敗するまず黒でデザインする
AI生成でのテキスト文字が歪む/誤字脱字アイコンのみ生成、テキストは手動で追加
流行りのエフェクト（光彩、シャドウ）すぐに古びる、再現性の問題フラットでタイムレスなデザインに徹する
色が多すぎる再現が難しい、印刷コストが高い最大2〜3色
目的のない非対称未完成に見える意図的な非対称性を使用するか、バランスを保つ

ファイル形式の納品

形式使用シーン
SVGスケーラブルベクター、ウェブ、編集
PNG（透明）デジタル用途、プレゼンテーション
PNG（白背景）ドキュメント、メール署名
ICO / ファビコンウェブサイトファビコン（16, 32, 48px）
高解像度PNG（4096px+）印刷、ビルボード

注意: AI はラスター画像（PNG）を生成します。真のベクターSVGが必要な場合は、AI出力を参照として使用し、ベクターツールでトレースするか、AI-to-SVG 変換ツールを使用してください。

関連スキル

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@prompt-engineering

すべてのアプリを参照: belt app list

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

SeaXen/og-image-design

Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dynamic generation. Use for: social sharing images, blog thumbnails, link previews, social cards. Triggers: og image, open graph, social sharing image, twitter card, social card, link preview image, og meta, sharing preview, social thumbnail, meta image, og:image, twitter:image, linkedin preview

関連スキル

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 画像 skills