ECサイトバーチャルフィッティングフォーム
上級
これはAI分野の自動化ワークフローで、16個のノードを含みます。主にIf, Ftp, Form, Wait, FormTriggerなどのノードを使用、AI技術を活用したスマート自動化を実現。 WooCommerce、Shopify、Prestashop対応のAI駆動ワンクリックバーチャルフィッティングルーム
前提条件
- •ターゲットAPIの認証情報が必要な場合あり
カテゴリー
ワークフロープレビュー
ノード接続関係を可視化、ズームとパンをサポート
ワークフローをエクスポート
以下のJSON設定をn8nにインポートして、このワークフローを使用できます
{
"id": "bnkWL5ReJLmi9DKA",
"meta": {
"instanceId": "a4bfc93e975ca233ac45ed7c9227d84cf5a2329310525917adaf3312e10d5462",
"templateCredsSetupCompleted": true
},
"name": "Form Visual Try-on for Ecommerce webiste",
"tags": [],
"nodes": [
{
"id": "ec6c9aa4-aa67-4f76-bda5-2d8368995993",
"name": "フォーム送信時",
"type": "n8n-nodes-base.formTrigger",
"position": [
-680,
200
],
"webhookId": "ca1c314d-46c6-4eeb-b6a5-359de7601906",
"parameters": {
"options": {
"appendAttribution": false
},
"formTitle": "Virtual Try On",
"formFields": {
"values": [
{
"fieldLabel": "Nome",
"placeholder": "Nome",
"requiredField": true
},
{
"fieldName": "Product",
"fieldType": "hiddenField"
},
{
"fieldType": "file",
"fieldLabel": "Me",
"requiredField": true,
"acceptFileTypes": ".jpg,.png"
}
]
},
"formDescription": "Upload your image and virtually try on the dress"
},
"typeVersion": 2.2
},
{
"id": "12941dfe-2c91-4270-87a4-510f83c7aa65",
"name": "FTP",
"type": "n8n-nodes-base.ftp",
"position": [
-420,
200
],
"parameters": {
"path": "=/eolianpenthouse.dev.eureweb.it/test/{{$now.format('yyyyyyLLddHHii')}}-{{ $json.Me[0].filename }}",
"operation": "upload",
"binaryPropertyName": "Me"
},
"credentials": {
"ftp": {
"id": "VRMB0CWVo86cIM26",
"name": "FTP account (Eolian DEV)"
}
},
"typeVersion": 1
},
{
"id": "d5524925-4d2d-4c95-9efc-c877004e65b0",
"name": "URL画像取得",
"type": "n8n-nodes-base.httpRequest",
"position": [
-680,
460
],
"parameters": {
"url": "=https://queue.fal.run/fal-ai/kling/requests/{{ $json.request_id }}",
"options": {},
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth"
},
"credentials": {
"httpHeaderAuth": {
"id": "daOZafXpRXLtoLUV",
"name": "Fal.run API"
}
},
"typeVersion": 4.2
},
{
"id": "87300ee2-366e-469b-85bf-9dbd1d5de850",
"name": "ステータス取得",
"type": "n8n-nodes-base.httpRequest",
"position": [
240,
200
],
"parameters": {
"url": "=https://queue.fal.run/fal-ai/kling/requests/{{ $('Create Image').item.json.request_id }}/status ",
"options": {},
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth"
},
"credentials": {
"httpHeaderAuth": {
"id": "daOZafXpRXLtoLUV",
"name": "Fal.run API"
}
},
"typeVersion": 4.2
},
{
"id": "8db4508e-b82a-4134-85c7-44b2162d5da6",
"name": "付箋",
"type": "n8n-nodes-base.stickyNote",
"position": [
-300,
-980
],
"parameters": {
"color": 6,
"width": 340,
"height": 540,
"content": "## Me\n"
},
"typeVersion": 1
},
{
"id": "f4765a45-0ad4-49d6-8227-9cc3e050b429",
"name": "付箋1",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-980
],
"parameters": {
"color": 6,
"width": 360,
"height": 540,
"content": "## Product\n"
},
"typeVersion": 1
},
{
"id": "79a6158d-fb3c-4293-82cc-e344aa21db37",
"name": "付箋2",
"type": "n8n-nodes-base.stickyNote",
"position": [
80,
-980
],
"parameters": {
"color": 4,
"width": 340,
"height": 540,
"content": "## Result\n"
},
"typeVersion": 1
},
{
"id": "032557a3-1ced-47d3-8e72-b1e3057d9e46",
"name": "付箋3",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-1260
],
"parameters": {
"color": 3,
"width": 740,
"height": 240,
"content": "# Functionality\n\nThis low-code automation enables all eCommerce store visitors to upload a **photo of themselves and virtually “try on”** a garment in just a few clicks. \n\nWith this workflow, **WooCommerce, Prestashop, Shopify** and more merchants can offer a cutting-edge “virtual try-on” feature with minimal development effort, enhancing customer engagement and reducing product returns.\n\n"
},
"typeVersion": 1
},
{
"id": "6a740b21-b95f-4c8e-bb92-c205e52e3925",
"name": "完了確認",
"type": "n8n-nodes-base.if",
"position": [
420,
200
],
"parameters": {
"options": {},
"conditions": {
"options": {
"version": 2,
"leftValue": "",
"caseSensitive": true,
"typeValidation": "strict"
},
"combinator": "and",
"conditions": [
{
"id": "383d112e-2cc6-4dd4-8985-f09ce0bd1781",
"operator": {
"name": "filter.operator.equals",
"type": "string",
"operation": "equals"
},
"leftValue": "={{ $json.status }}",
"rightValue": "COMPLETED"
}
]
}
},
"typeVersion": 2.2
},
{
"id": "f33040d8-cbac-4c21-845b-10397c5210cc",
"name": "付箋5",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-80
],
"parameters": {
"width": 740,
"height": 180,
"content": "## STEP 3 - ECOMMERCE\nIn production environment, the \"Product\" field must be dynamically filled with the url of the product dress image (e.g. https://n3wstorage.b-cdn.net/n3witalia/camicia-seta.png).\n\nOn the ecommerce, create a \"Try On\" button and the following url to open in pop-up format https://URL_N8N/form/ca1c314d-46c6-4eeb-b6a5-359XXXXXX?Product=IMAGE_URL"
},
"typeVersion": 1
},
{
"id": "0799d997-c38e-4c84-8096-0f2ef04b0223",
"name": "画像作成",
"type": "n8n-nodes-base.httpRequest",
"position": [
-180,
200
],
"parameters": {
"url": "https://queue.fal.run/fal-ai/kling/v1-5/kolors-virtual-try-on",
"method": "POST",
"options": {},
"jsonBody": "={\n \"human_image_url\": \"https://eolianpenthouse.dev.eureweb.it/test/{{$now.format('yyyyyyLLddHHii')}}-{{ $json.Me[0].filename }}\",\n \"garment_image_url\": \"{{ $('On form submission').item.json.Product }}\"\n} ",
"sendBody": true,
"sendHeaders": true,
"specifyBody": "json",
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth",
"headerParameters": {
"parameters": [
{
"name": "Content-Type",
"value": "application/json"
}
]
}
},
"credentials": {
"httpHeaderAuth": {
"id": "daOZafXpRXLtoLUV",
"name": "Fal.run API"
}
},
"typeVersion": 4.2
},
{
"id": "63e29ad5-5965-4a2c-98f5-bc89124a6b21",
"name": "付箋6",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-400
],
"parameters": {
"width": 740,
"height": 140,
"content": "## STEP 1 - GET API KEY (YOURAPIKEY)\nCreate an account [here](https://fal.ai/) and obtain API KEY.\nIn the node \"Create Image\" set \"Header Auth\" and set:\n- Name: \"Authorization\"\n- Value: \"Key YOURAPIKEY\""
},
"typeVersion": 1
},
{
"id": "67188445-73c4-4070-b1f8-6e21beb3e1fa",
"name": "フォーム",
"type": "n8n-nodes-base.form",
"position": [
-240,
460
],
"webhookId": "69559b3a-3175-4864-8e41-2892eaa80d8e",
"parameters": {
"operation": "completion",
"redirectUrl": "={{ $json.image.url }}",
"respondWith": "redirect"
},
"typeVersion": 1
},
{
"id": "1a65532e-abb9-4c3f-99c3-ddf35e7ed5e4",
"name": "付箋7",
"type": "n8n-nodes-base.stickyNote",
"position": [
-700,
-220
],
"parameters": {
"width": 740,
"height": 100,
"content": "## STEP 2 - FTP\nFTP space or S3 bucket to temporarily upload your image to"
},
"typeVersion": 1
},
{
"id": "cf2e4f76-e658-4aa3-a6c0-9a85bb1749e6",
"name": "画像取得",
"type": "n8n-nodes-base.httpRequest",
"position": [
-460,
460
],
"parameters": {
"url": "={{ $json.image.url }}",
"options": {}
},
"typeVersion": 4.2
},
{
"id": "04573589-8467-4768-9451-177aa2d19f57",
"name": "10秒待機",
"type": "n8n-nodes-base.wait",
"position": [
60,
200
],
"webhookId": "351bd496-a9cc-445c-86f6-a56189df0028",
"parameters": {
"amount": 10
},
"typeVersion": 1.1
}
],
"active": false,
"pinData": {},
"settings": {
"executionOrder": "v1"
},
"versionId": "c42ea134-5e24-4e45-9a6b-0f0765c4c13c",
"connections": {
"12941dfe-2c91-4270-87a4-510f83c7aa65": {
"main": [
[
{
"node": "0799d997-c38e-4c84-8096-0f2ef04b0223",
"type": "main",
"index": 0
}
]
]
},
"67188445-73c4-4070-b1f8-6e21beb3e1fa": {
"main": [
[]
]
},
"cf2e4f76-e658-4aa3-a6c0-9a85bb1749e6": {
"main": [
[
{
"node": "67188445-73c4-4070-b1f8-6e21beb3e1fa",
"type": "main",
"index": 0
}
]
]
},
"6a740b21-b95f-4c8e-bb92-c205e52e3925": {
"main": [
[
{
"node": "d5524925-4d2d-4c95-9efc-c877004e65b0",
"type": "main",
"index": 0
}
],
[
{
"node": "04573589-8467-4768-9451-177aa2d19f57",
"type": "main",
"index": 0
}
]
]
},
"87300ee2-366e-469b-85bf-9dbd1d5de850": {
"main": [
[
{
"node": "6a740b21-b95f-4c8e-bb92-c205e52e3925",
"type": "main",
"index": 0
}
]
]
},
"0799d997-c38e-4c84-8096-0f2ef04b0223": {
"main": [
[
{
"node": "04573589-8467-4768-9451-177aa2d19f57",
"type": "main",
"index": 0
}
]
]
},
"04573589-8467-4768-9451-177aa2d19f57": {
"main": [
[
{
"node": "87300ee2-366e-469b-85bf-9dbd1d5de850",
"type": "main",
"index": 0
}
]
]
},
"d5524925-4d2d-4c95-9efc-c877004e65b0": {
"main": [
[
{
"node": "cf2e4f76-e658-4aa3-a6c0-9a85bb1749e6",
"type": "main",
"index": 0
}
]
]
},
"ec6c9aa4-aa67-4f76-bda5-2d8368995993": {
"main": [
[
{
"node": "12941dfe-2c91-4270-87a4-510f83c7aa65",
"type": "main",
"index": 0
}
]
]
}
}
}よくある質問
このワークフローの使い方は？
上記のJSON設定コードをコピーし、n8nインスタンスで新しいワークフローを作成して「JSONからインポート」を選択、設定を貼り付けて認証情報を必要に応じて変更してください。
このワークフローはどんな場面に適していますか？
上級 - 人工知能
有料ですか？
このワークフローは完全無料です。ただし、ワークフローで使用するサードパーティサービス（OpenAI APIなど）は別途料金が発生する場合があります。
関連ワークフロー
サウンドエフェクトジェネレーター
CassetteAI を使用してリアルなサウンド効果を生成し、Google ドライブに保存します
If
Wait
Form Trigger
+
If
Wait
Form Trigger
12 ノードDavide
人工知能
画像ベースのAIによる動画生成
画像から 🤖🧠 AI 駆動の動画 🎥 を生成して Google Drive にアップロード
If
Set
Wait
+
If
Set
Wait
13 ノードDavide
人工知能
WooCommerce服装カタログのAI仮想試着
WooCommerce服装カタログのAI仮想試着自動生成
If
Set
Wait
+
If
Set
Wait
21 ノードDavide
営業
GIF に顔を入れ替える
Fal.run AI と Google サービスで GIF 顔入れ替えを自動化
If
Set
Wait
+
If
Set
Wait
19 ノードDavide
デザイン
画像から 3D モデルへ
Fal.ai Trellis を使って画像を3Dモデルに変換し、Google Drive に保存
If
Set
Wait
+
If
Set
Wait
17 ノードDavide
デザイン
Google Veo3 を使って動画を作成して YouTube にアップロード
Google Veo3 で AI 動画を生成し、Google Drive に保存して YouTube へアップロード
If
Set
Wait
+
If
Set
Wait
22 ノードDavide
人工知能
ワークフロー情報
難易度
上級
ノード数16
カテゴリー1
ノードタイプ7
作成者
Davide
@n3witaliaFull-stack Web Developer based in Italy specialising in Marketing & AI-powered automations. For business enquiries, send me an email at info@n3w.it or add me on Linkedin.com/in/davideboizza
外部リンク
n8n.ioで表示 →
このワークフローを共有