logo-generator

ロゴジェネレーター

製品やブランド向けに、プロフェッショナルな SVG ロゴと高品質なショーケースプレゼンテーションを生成します。

ワークフロー

フェーズ 1：情報収集

ユーザーから重要な情報を収集します。

1. 製品／ブランド名（必須）
2. 業界／カテゴリー（例：AI、フィンテック、デザインツール）
3. コアコンセプト（例：つながり、流れ、セキュリティ、シンプルさ）
4. デザインの希望：
   • スタイル：ミニマル／複雑、幾何学的／有機的
   • 色の希望：モノクロ／特定の色
   • 雰囲気：クール／温かみのある、プロフェッショナル／親しみやすい

簡潔な質問をして、これらの情報を集めます。一度に多くの質問をして、ユーザーを圧倒しないようにします。

フェーズ 2：パターンの照合と SVG の生成

収集した情報に基づいて、以下を行います。

1. references/design_patterns.md に基づいて、少なくとも 6 種類のデザイン案を生成します

   • パターンを製品の特性に合わせます
   • 多様性を持たせるため、異なる種類のパターンや組み合わせを使用します
   • 単一パターンの構成と複合パターンの構成をどちらも含めます
   • シンプルな幾何学模様から重層的な構成まで、複雑さに幅を持たせます
   • 各案は、単なるパラメーター調整ではなく、はっきりと異なる印象にします
   • 各案のデザイン意図を説明します

2. 各案の SVG コードを生成します

   • 拡大縮小しやすいよう、viewBox="0 0 100 100" を使用します
   • コードを簡潔で、構造がわかりやすいものにします
   • 色を柔軟に制御できるよう、currentColor を使用します
   • ウェブ表示用の控えめなアニメーションを追加します（任意）

3. インタラクティブなショーケース Web ページを作成します

   • 6 種類以上のロゴ案をすべてグリッドレイアウトで表示します
   • assets/showcase_template.html のテンプレートを使用します
   • ホバー効果とスムーズなトランジションを加えます
   • 各案のデザイン意図を記載します
   • 案を簡単に比較できるようにします

フェーズ 3：反復とブラッシュアップ

ユーザーがフィードバックを提供できるようにします。

• お気に入りの案を選択する（6 種類以上から 2～3 種類に絞り込みます）
• 特定のパラメーターを調整する（サイズ、間隔、回転）
• 異なる案の要素を組み合わせる
• 色を変更したり、グラデーションを追加したりする
• アニメーションや効果を変更する
• 特定の方向性を探る追加の案を生成する

フィードバックに基づいて、対象を絞った調整を行います。依頼がない限り、すべてを再生成しないでください。

フェーズ 4：高品質なショーケースの生成

ユーザーが希望するロゴの方向性を選択したら、以下を行います。

1. SVG を PNG にエクスポート

   • scripts/svg_to_png.py を使用して SVG を PNG に変換します
   • デフォルトサイズ：1024x1024px
   • 背景が透明であることを確認します

2. ショーケースのスタイルを選択

   • references/background_styles.md を確認します
   • 製品の種類と雰囲気に基づいて、4 種類のスタイルをおすすめします
   • それぞれのスタイルが適している理由を説明します

3. ショーケース画像を生成

   • 環境を設定します（.env.example を .env にコピーし、API キーを追加します）
   • --all-styles フラグを指定して scripts/generate_showcase.py を使用します
   • または、スタイルを個別に指定して生成します
   • 各画像は Nano Banana API を使用し、PNG を参照画像として生成します

4. 最終プレゼンテーション Web ページを作成

   • SVG の案とショーケース画像を組み合わせます
   • マイクロタイポグラフィを取り入れた、プロフェッショナルなレイアウトにします
   • すべてのアセットへのダウンロードリンクを含めます

フェーズ 5：納品

ユーザーに以下を提供します。

• インタラクティブな HTML ショーケースページ
• SVG ファイル（編集可能なベクター形式）
• PNG エクスポート（希望があれば、さまざまなサイズ）
• ショーケース画像（プロフェッショナルな背景 4 種類）

主なデザイン原則

1. 多様性を持たせる：ユーザーが実際に選べるよう、はっきりと異なる案を少なくとも 6 種類生成します
2. シンプルに始める：基本的なパターンから始め、必要な場合にのみ複雑さを加えます
3. 意味のあるデザイン：視覚的な要素を製品のコンセプトと結び付けます
4. 拡張性：あらゆるサイズでロゴが適切に表示されるようにします
5. プロフェッショナルな品質：高品質なブランドアイデンティティの基準に合わせます
6. 柔軟性：用途に応じて使い分けられるよう、複数の案を提供します

技術上の注意

SVG のベストプラクティス

• 一貫性を保つため、viewBox は 0 0 100 100 にします
• <g> タグを使って、意味のあるグループ化を行います
• 再利用可能な要素には <defs> を活用します
• マスキング効果には <clipPath> を使用します
• 可能な場合は、複雑なパスより幾何学的な基本図形を優先します

ショーケース画像の生成

generate_showcase.py スクリプトには、以下が必要です：

• Python 3.8+
• 依存関係：pip install -r requirements.txt
• .env ファイル内の環境変数
• 参照 PNG 画像（SVG からエクスポートしたもの）

公式の Google Gemini API と、GEMINI_API_BASE_URL 経由のサードパーティ製エンドポイントの両方に対応しています。

利用可能な背景スタイル

references/background_styles.md より：

12 種類のプロフェッショナルなスタイルを利用できます：

ダークスタイル（6 種類）：

• void（绝对虚空） - 絶対的なミニマリズム、ハードコアなテクノロジー
• frosted（磨砂穹顶） - 現代的な余白、高級感のある製品
• fluid（流体深渊） - AI ネイティブな流動性、ダイナミックなシステム
• spotlight（物理影棚） - スタジオ照明、エディトリアル品質
• analog_liquid（物理流体） - ソリッドカラーをベースにしたメタリックな輝き、クリエイティブなブランド
• led_matrix（数字硬件） - デジタルレトロ、サイバーパンクの美学

ライトスタイル（6 種類）：

• editorial（纸本编辑） - 特殊紙、人間味のあるブランド
• iridescent（幻彩透砂） - 光学素材、テックハードウェア
• morning（晨雾光域） - AI の柔らかさ、親しみやすい製品
• clinical（无菌影棚） - 空間の秩序、アルゴリズム主導のブランド
• ui_container（容器化界面） - デジタル製品にネイティブ、SaaS プラットフォーム
• swiss_flat（瑞士扁平） - 完全なフラットデザイン、時代を超えた信頼感

各スタイルには、特有の視覚的特徴と適した用途があります。詳細はリファレンスドキュメントをご覧ください。

よく使われるパターン

パターン：同心円状のドット

<svg viewBox="0 0 100 100">
  <g>
    
    <circle cx="50" cy="38" r="3" fill="currentColor"/>
    
  </g>
</svg>

パターン：ラインアクセント付きの幾何学形状

<svg viewBox="0 0 100 100">
  <polygon points="50,30 70,60 30,60" fill="none" stroke="currentColor" stroke-width="2"/>
  <circle cx="50" cy="30" r="4" fill="currentColor"/>
</svg>

パターン：ノードネットワーク

<svg viewBox="0 0 100 100">
  <path d="M 30 70 Q 50 70, 50 50 T 70 30" stroke="currentColor" stroke-width="2" fill="none"/>
  <circle cx="30" cy="70" r="4" fill="currentColor"/>
  <circle cx="50" cy="50" r="5" fill="currentColor"/>
  <circle cx="70" cy="30" r="4" fill="currentColor"/>
</svg>

その他のパターンや組み合わせについては、references/design_patterns.md をご覧ください。

トラブルシューティング

SVG が正しく表示されない：viewBox を確認し、すべてのパスが閉じていることを確認してください

PNG のエクスポートに失敗する：cairosvg がインストールされていることを確認してください（pip install cairosvg）

ショーケースの生成に失敗する：

• .env ファイルに有効な GEMINI_API_KEY が設定されていることを確認してください
• 参照 PNG が存在し、読み取り可能であることを確認してください
• API のクォータやレート制限を確認してください

サードパーティ API が動作しない：GEMINI_API_BASE_URL が正しい形式であることを確認してください（例：https://api.example.com/v1）