ウェブサイトから OpenAI および Gemini を使用してカスタムロゴを生成
中級
これは自動化ワークフローで、13個のノードを含みます。主にWebhook, HttpRequest, Agent, RespondToWebhook, GoogleGeminiなどのノードを使用。 OpenAI と Gemini を使ってウェブサイトからカスタムロゴの生成
前提条件
- •HTTP Webhookエンドポイント（n8nが自動生成）
- •ターゲットAPIの認証情報が必要な場合あり
- •OpenAI API Key
カテゴリー
-
ワークフロープレビュー
ノード接続関係を可視化、ズームとパンをサポート
ワークフローをエクスポート
以下のJSON設定をn8nにインポートして、このワークフローを使用できます
{
"meta": {
"instanceId": "3d7eb9567ae690bf8c9bba1cb43396e6e40c18e15eb5889cf9673ed1713da6db",
"templateCredsSetupCompleted": true
},
"nodes": [
{
"id": "4c829734-83d0-43ef-8111-2b8222bff6ee",
"name": "ウェブサイトURL受信時",
"type": "n8n-nodes-base.webhook",
"position": [
-1136,
2224
],
"webhookId": "15a007b2-0c35-47f6-8387-5b3548c2e295",
"parameters": {
"path": "175b3350-1d0c-48c5-99d1-06e3b209a68097t657yi97",
"options": {},
"httpMethod": "POST",
"responseMode": "responseNode"
},
"typeVersion": 2.1
},
{
"id": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
"name": "ウェブサイトスクリーンショット取得",
"type": "n8n-nodes-base.httpRequest",
"position": [
-976,
2224
],
"parameters": {
"url": "=https://api.screenshotone.com/take",
"options": {},
"sendQuery": true,
"queryParameters": {
"parameters": [
{
"name": "access_key",
"value": "[Your ScreenshotOne Access Key]"
},
{
"name": "url",
"value": "={{ $json.body.websiteUrl }}"
},
{
"name": "format",
"value": "jpg"
},
{
"name": "block_ads",
"value": "true"
},
{
"name": "block_cookie_banners",
"value": "true"
},
{
"name": "block_banners_by_heuristics",
"value": "false"
},
{
"name": "block_trackers",
"value": "true"
},
{
"name": "delay",
"value": "0"
},
{
"name": "timeout",
"value": "60"
},
{
"name": "response_type",
"value": "=json"
},
{
"name": "image_quality",
"value": "80"
}
]
}
},
"typeVersion": 4.2
},
{
"id": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
"name": "ウェブサイトコンテンツ取得",
"type": "n8n-nodes-base.httpRequest",
"position": [
-816,
2224
],
"parameters": {
"url": "={{ $('When Website URL Received').item.json.body.websiteUrl }}",
"options": {}
},
"typeVersion": 4.2
},
{
"id": "5995ca13-7f6b-4899-88fb-d85e18921143",
"name": "ロゴプロンプト生成",
"type": "@n8n/n8n-nodes-langchain.agent",
"position": [
-640,
2224
],
"parameters": {
"text": "=Write a prompt to create a logo for this website based of the content of the site and a screenshot of the front page\n\nScreenshot: {{ $('Capture Website Screenshot').item.json.screenshot_url }}\nWebsite data:{{ $json.data }}\n\nOutput the prompt in \"Prompt\"",
"options": {
"passthroughBinaryImages": true
},
"promptType": "define"
},
"typeVersion": 2.2
},
{
"id": "5b7b8344-4acc-46df-8412-30cdaeb49273",
"name": "ロゴ画像生成",
"type": "@n8n/n8n-nodes-langchain.googleGemini",
"position": [
-352,
2224
],
"parameters": {
"prompt": "={{ $json.output }}",
"modelId": {
"__rl": true,
"mode": "list",
"value": "models/gemini-2.5-flash-image",
"cachedResultName": "models/gemini-2.5-flash-image (Nano Banana)"
},
"options": {},
"resource": "image"
},
"credentials": {
"googlePalmApi": {
"id": "7v8o9EaQkl33woxm",
"name": "v9"
}
},
"typeVersion": 1
},
{
"id": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
"name": "ロゴで応答",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
-176,
2224
],
"parameters": {
"options": {},
"respondWith": "binary"
},
"typeVersion": 1.4
},
{
"id": "f1bc68c6-ccf3-4fdf-97c5-5a86928838f7",
"name": "注: Webhookトリガー",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1248,
2000
],
"parameters": {
"color": 6,
"width": 344,
"height": 212,
"content": "## 📥 When Website URL Received\n\n**Purpose:** Triggers workflow on POST request with website URL.\n\n**Note:** Body format: {\"websiteUrl\": \"https://example.com\"}"
},
"typeVersion": 1
},
{
"id": "a1cef014-ddd9-4db2-8333-a7579608008e",
"name": "注: スクリーンショット取得",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1168,
2464
],
"parameters": {
"color": 3,
"width": 312,
"height": 212,
"content": "## 🖼️ Capture Website Screenshot\n\n**Purpose:** Fetches site screenshot via ScreenshotOne API for visual analysis.\n\n**Note:** Replace placeholder with your API key; outputs JSON with screenshot_url."
},
"typeVersion": 1
},
{
"id": "62e394c1-363f-4164-81f5-39cde9ca7b22",
"name": "注: コンテンツ取得",
"type": "n8n-nodes-base.stickyNote",
"position": [
-816,
2000
],
"parameters": {
"color": 5,
"width": 216,
"height": 196,
"content": "## 🌐 Fetch Website Content\n\n**Purpose:** Scrapes HTML from the URL for text-based site analysis.\n"
},
"typeVersion": 1
},
{
"id": "21b9ad9a-cbb4-4ad2-94d7-6424bf906478",
"name": "注: プロンプト生成",
"type": "n8n-nodes-base.stickyNote",
"position": [
-528,
2464
],
"parameters": {
"color": 5,
"width": 312,
"height": 212,
"content": "## ✍️ Generate Logo Prompt\n\n**Purpose:** AI agent crafts logo prompt using OpenAI from content and screenshot.\n\n**Note:** Multimodal input; outputs refined prompt for image gen."
},
"typeVersion": 1
},
{
"id": "cb688126-2285-4ff0-9beb-259c9d0f7c43",
"name": "注: ロゴ生成",
"type": "n8n-nodes-base.stickyNote",
"position": [
-368,
2000
],
"parameters": {
"color": 2,
"width": 280,
"height": 180,
"content": "## 🎨 Generate Logo Image\n\n**Purpose:** Creates logo via Google Gemini using the AI-crafted prompt.\n\n**Note:** Image resource; returns binary data for response."
},
"typeVersion": 1
},
{
"id": "d470c3e0-e75b-455c-b514-7e242fe664dc",
"name": "概要注記5",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1888,
1808
],
"parameters": {
"color": 4,
"width": 600,
"height": 1100,
"content": "# 🤖 AI Logo Generator from Website URL\n\n## 📋 What This Template Does\nThis workflow receives a website URL via webhook, captures a screenshot and fetches page content, uses OpenAI to craft a logo prompt from visuals and text, then generates the image with Google Gemini for binary response.\n\n## 🔧 Prerequisites\n- n8n instance with webhook support\n- ScreenshotOne account\n- OpenAI account\n- Google AI Studio account\n\n## 🔑 Required Credentials\n\n### ScreenshotOne API Setup\n1. Sign up at screenshotone.com → Dashboard → API Keys\n2. Generate access key\n3. Replace placeholder in \"Capture Website Screenshot\" node\n\n### OpenAI API Setup\n1. platform.openai.com → API Keys\n2. Create secret key\n3. Add as \"OpenAI API\" credential\n\n### Google Gemini API Setup\n1. aistudio.google.com/app/apikey\n2. Create API key\n3. Add as \"Google PaLM API\" credential\n\n## ⚙️ Configuration Steps\n1. Import JSON workflow\n2. Assign credentials to nodes\n3. Replace API key placeholder\n4. Activate webhook\n5. Test with POST {\"websiteUrl\": \"https://example.com\"}\n\n## 🎯 Use Cases\n- Marketing: Generate client logo prototypes\n- Developers: Auto-match logos for sites\n- Designers: Inspire from competitors\n- Education: Demo AI design\n\n## ⚠️ Troubleshooting\n- Screenshot timeout: Increase to 120s, check URL\n- Empty prompt: Verify OpenAI quota\n- Blank logo: Add style to prompt, check limits\n- No trigger: Confirm POST JSON body"
},
"typeVersion": 1
},
{
"id": "ae9beb67-4ce8-43be-a73c-37fb446517fd",
"name": "GPT-5 mini",
"type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
"position": [
-640,
2400
],
"parameters": {
"model": {
"__rl": true,
"mode": "list",
"value": "gpt-5-mini",
"cachedResultName": "gpt-5-mini"
},
"options": {}
},
"credentials": {
"openAiApi": {
"id": "ymMvgDroJHalwvRf",
"name": "OpenAI"
}
},
"typeVersion": 1.2
}
],
"pinData": {},
"connections": {
"ae9beb67-4ce8-43be-a73c-37fb446517fd": {
"ai_languageModel": [
[
{
"node": "5995ca13-7f6b-4899-88fb-d85e18921143",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"5b7b8344-4acc-46df-8412-30cdaeb49273": {
"main": [
[
{
"node": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
"type": "main",
"index": 0
}
]
]
},
"5995ca13-7f6b-4899-88fb-d85e18921143": {
"main": [
[
{
"node": "5b7b8344-4acc-46df-8412-30cdaeb49273",
"type": "main",
"index": 0
}
]
]
},
"2156cf0b-97f0-425e-a28d-d7ea9e2d7d17": {
"main": [
[
{
"node": "5995ca13-7f6b-4899-88fb-d85e18921143",
"type": "main",
"index": 0
}
]
]
},
"4c829734-83d0-43ef-8111-2b8222bff6ee": {
"main": [
[
{
"node": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
"type": "main",
"index": 0
}
]
]
},
"0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb": {
"main": [
[
{
"node": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
"type": "main",
"index": 0
}
]
]
}
}
}よくある質問
このワークフローの使い方は？
上記のJSON設定コードをコピーし、n8nインスタンスで新しいワークフローを作成して「JSONからインポート」を選択、設定を貼り付けて認証情報を必要に応じて変更してください。
このワークフローはどんな場面に適していますか？
中級
有料ですか？
このワークフローは完全無料です。ただし、ワークフローで使用するサードパーティサービス（OpenAI APIなど）は別途料金が発生する場合があります。
関連ワークフロー
テキストプロンプトを使ってOpenAIとFal.ai Minimaxで歌詞と音楽を生成
テキストプロンプトから歌詞と音楽を生成するためにOpenAIとFal.aiのMinimaxを使用する
Set
Wait
Switch
+
Set
Wait
Switch
17 ノードDaniel Nkencho
コンテンツ作成
高级販売AIエージェント
AI販売エージェント：WhatsApp、FB、IG、OpenAI、Airtable、Supabase自動预约
If
Set
Switch
+
If
Set
Switch
58 ノードSam Yassine
営業
ElevenLabsとOpenAIを活用した音声RAGチャットボット
ElevenLabsとOpenAIを基盤としたAI音声チャットボット - カスタマーサービスや飲食業界向け
Webhook
Google Drive
Http Request
+
Webhook
Google Drive
Http Request
23 ノードDavide
人工知能
高度なチャットボット+RAGエージェント
OpenAI、Google Sheets、Glide、Supabaseを基盤としたAI駆動型RAG質問応答チャットボット
Set
Webhook
Google Drive
+
Set
Webhook
Google Drive
34 ノードSam Yassine
サポート
AI による Google Sheets ウェブリサーチ（GPT と Bright Data）
AI ベースの Google スプレッドシート Web ページ調査 (GPT および Bright Data)
Set
Webhook
Data Table
+
Set
Webhook
Data Table
22 ノードElay Guez
市場調査
UIをベースにGPT-4とDALL-Eを用いてLinkedInコンテンツ生成を自動化
AIベースのLinkedInコンテンツジェネレーター（OpenAI GPT-4およびDALL-E）
Webhook
Http Request
Agent
+
Webhook
Http Request
Agent
23 ノードWeWeb
コンテンツ作成
ワークフロー情報
難易度
中級
ノード数13
カテゴリー-
ノードタイプ7
作成者
Daniel Nkencho
@daniel-automatesAI Automation Consultant | Helping Business Owners Implement AI Systems for Growth and Lead Gen
外部リンク
n8n.ioで表示 →
このワークフローを共有