WeShop AIWeShop AI
scroll left

AI画像

エフェクト

AI動画

料金

20% OFF

ソリューション

リソース

ダウンロード

Affiliate

API

scroll right
サインイン
リソース
作業をもっと速く進めるためのガイドやヒントをチェックしましょう。
blog
ブログ
blog
FAQ
feature request
機能リクエスト
jobs
Jobs
app image
いつでもどこでも WeShop AI で制作
外出先でもデスクでも、ひらめきをすぐ形に。WeShop AI をダウンロードして、思いついた瞬間に印象的なデザインへ変えましょう。パワフルで柔軟、しかもいつでも手元で使えます。
September 7

WeShop Canvasチュートリアル:アパレルのポーズとショーケース動画を作成

WeShop Canvasを使って、アパレルのポーズバリエーション、Skillベースの画像分岐、5秒間のショーケース動画を計画・調整・生成する方法を学びます。

WeShop Canvas実践チュートリアル:2枚の参照画像からポーズ、Skills、ショーケース動画まで

実践チュートリアル · 画像 + Skills + 動画

2枚の参照画像から、完全なアパレルワークフローを構築します。

着用済みのベース画像を作成し、3つのポーズを試し、ポーズBを2つのSkill結果に分岐させ、最後に5秒間のショーケース動画を完成させます。すべてを1つの追跡可能なCanvas上で行えます。

WeShop Canvasをダウンロード →

このチュートリアルでは、1つのプロジェクトを開始から完了まで進めます。2枚の画像から始めて、次を行います。

  1. 画像1の人物に、画像2のピンクの衣装を着せる。
  2. ベース画像からポーズA、ポーズB、ポーズCを作成する。
  3. ポーズBにApply Photo Filter Skillを適用する。
  4. ポーズBにChange Pose Skillを適用する。
  5. ポーズBを5秒間の無音ショーケース動画に変換する。

完成したCanvasを以下に示します。各接続は、右側のノードが左側のノードから作成されたことを意味するため、すべての結果を元のソースまで追跡できます。

Completed WeShop Canvas with two inputs, a base image, three poses, two Skill results, and a video
Completed Canvas. Two inputs lead to one dressed base image, three pose branches, two Skill results, and a showcase video.
入力

人物 + アパレル参照

作成

ベース画像 + 3つのポーズ

出力

2つのSkill編集 + 動画

[!NOTE] このガイドは、実際のWeShop Canvas 0.1.10のインターフェースと、スクリーンショットに記録されたプロジェクトに基づいています。利用可能なモデルやパラメーターは変更される場合があります。生成されるメディアは異なることがありますが、ノード構造と操作手順は同じです。

ステップ1:2枚のソース画像をCanvasにドラッグする

ファイルを準備する

処理する権限を持つ2枚の画像を使用します。

画像このプロジェクトでの用途
画像1:三つ編みの赤毛の女性新しい衣装を着用する人物を提供します。
画像2:ピンクのセットアップを着たモデル画像1の人物に着せる衣服を提供します。
INPUT 01 · PERSON
Image 1: red-haired woman with braids
Identity reference. Supplies the person who will wear the new outfit.
INPUT 02 · OUTFIT
Image 2: pink sportswear set
Apparel reference. Supplies the pink set placed on the person in Image 1.

プロジェクトを作成して画像を追加する

  1. WeShop Canvasを開き、ホーム画面でNew Projectをクリックします。
  2. プロジェクト名を入力し、必要に応じて保存場所を選択して、Create Projectをクリックします。

The Create Project screen in WeShop Canvas

  1. 新しいCanvasを開きます。コンピューターのファイルブラウザーで画像1と画像2を選択し、Canvasの空いている領域にドラッグします。
  2. 各画像が個別の画像ノードとして表示されるまで待ちます。
  3. 両方のノードを選択します。右側の会話入力欄の上に、両方の画像が参照として添付されているはずです。

Canvas controls for creating, importing, selecting, aligning, undoing, and deleting nodes

2枚のソース画像は、独立したCanvasノードとして維持されます。後から接続を追加することで、生成されたすべての結果をこれらの入力まで追跡できます。

ステップ2:両方の画像を選択し、衣装変更のリクエストを送信する

両方の画像ノードを選択したままにします。会話入力欄に、このプロジェクトで使用したリクエストと同じ内容を入力します。

プロンプト · 衣装を変更する

画像1 @20260821_1_3fb66cd…1186.png の人物に、画像2 EverydaySeamlessTr…40x.webp の服を着せてください。

2つのファイル名はCanvasの参照です。ご自身のファイル名は異なる場合があります。例のファイル名を手入力するのではなく、Canvasの候補からご自身の参照を挿入してください。

Sendをクリックします。会話履歴には、2つの参照とリクエストが記録されます。その後、Agentは実装を提案する前に両方の画像を読み取り、確認します。

チェックポイント: 履歴には、両方の参照、元のリクエスト、Agentの推論エントリーが表示されます。

ステップ3:Agentのプランを確認し、手動生成を選択する

入力を確認した後、Agentが生成プランを提案します。この時点で、実行方法を選択します。

会話履歴に表示される内容

段階期待される記録
Agentの推論Agentは画像1の人物と画像2の衣装を特定し、ベースとなる試着画像を1枚提案します。
ワークフロー確認プランにはソース画像、画像モデル、出力1件、Uses powerラベルが表示されます。
選択Create for manual generationをクリックします。
Agentのアクティビティ履歴に手動実行の確認と、完了したcanvas_create_nodeアクティビティが表示されます。
Canvasの更新2つのソースノードに接続された、ベース画像のDraftが表示されます。

ここでの手動生成の意味

プランカードでCreate for manual generationを選択します。

flowchart LR
    A[衣装変更リクエストを送信] --> B[Agentが分析してプランを提案]
    B --> C[Create for manual generationを選択]
    C --> D[CanvasがDraftと接続を作成]
    D --> E[プロンプトとパラメーターを確認]
    E --> F[DraftでGenerateをクリック]
    F --> G[画像生成API呼び出しを承認]
  • Create for manual generationは、設定済みのDraftとその接続を作成した後、確認のために一時停止します。Draftを作成するだけでは、有料の画像・動画生成APIは呼び出されません。
  • Create and generate automaticallyは、ワークフローを作成して生成を続行します。
  • Agentの分析と計画では、Thought processの横に表示される会話モデルのポイントが使用される場合があります。
  • 画像生成APIは、DraftでGenerateをクリックし、有料操作を承認した後にのみ送信されます。

Manual and automatic execution choices shown after the Agent proposes a plan

Create for manual generationをクリックします。履歴で手動実行が確認され、canvas_create_nodeが完了と表示されるまで待ちます。

ベース画像Draftを生成する

  1. 新しいベース画像Draftをクリックします。
  2. 参照、プロンプト、画像モデル、出力量を確認します。
  3. Generateをクリックします。
  4. 有料操作の確認が表示されたら、Just this onceをクリックします。
  5. 画像がノードに戻るまで待ち、① 人物置換 · ピンクの衣装と名前を付けます。

結果を確認: 人物は画像1の人物である必要があります。ピンクの長袖トップス、セットのショーツ、正面向きの立ち姿、スタジオ背景は画像2に従う必要があります。

ステップ4:ベース画像①からポーズA、ポーズB、ポーズCを作成する

ベース画像を選択する

① 人物置換 · ピンクの衣装をクリックし、会話入力欄に添付された参照がこれだけであることを確認します。

3つのポーズのリクエストを入力する

プロンプト · 3つのポーズを作成する

選択したベース画像①のみを、人物と衣装の参照として使用してください。同一人物、2本の三つ編みの赤毛、ピンクの長袖トップス、セットのショーツ、衣服の構造、色、スタジオ背景を維持してください。以下の3つの別々の結果を計画してください。

  1. ポーズA:リラックスした正面向きの立ち姿。
  2. ポーズB:片手を自然に腰に置いた、斜め前向きの立ち姿。
  3. ポーズC:自然に前方へ歩くポーズ。

全身をフレーム内に収め、手は自然にしてください。衣装は変更しないでください。3つすべての結果を現在のCanvasに配置し、ベース画像①に接続して、生成前にプランを見せてください。

Sendをクリックします。

3つのDraftを確認して作成する

プランに、すべてベース画像①を使用する個別の1画像ステップが3つ含まれていることを確認します。Create for manual generationをクリックします。履歴には完了したcanvas_create_nodeアクティビティが3件記録され、Canvasには接続された3つのDraftが表示されます。

Pose A, Pose B, and Pose C branching from base image ①

ポーズを生成する

  1. ポーズADraftを選択し、パラメーターを確認して、Generateをクリックし、操作を承認します。
  2. ポーズBでも同様に繰り返します。
  3. ポーズCでも同様に繰り返します。
  4. 各結果が配信されると、履歴に生成アクティビティが記録され、メディアアーティファクトがCanvasに配置されたことが確認されます。
  5. Fit the canvas in viewをクリックし、3つの結果をすべて開いて比較します。

顔、三つ編み、ピンクの衣装、手、背景の一貫性を確認してください。以降の手順では、③ ポーズB · 斜め前向き、片手を腰に置くを使用します。

ステップ5:Apply Photo Filter Skillで明るい商用ルックを適用する

Skillを開く

  1. ポーズBを選択します。
  2. 会話入力欄の左下にあるSkillsをクリックします。
  3. apply-photo-filterを検索します。
  4. Apply Photo Filterを開き、シーンの内容を変更せずにフィルターを適用することを確認します。
  5. Use Skillをクリックします。

The WeShop Canvas Skills library

Apply Photo Filter Skill

次のリクエストを入力します。

プロンプト · 写真フィルターを適用する

Apply Photo Filter Skillを使用して、選択したポーズBに明るく、クリーンで、自然なEコマース向けルックを与えてください。変更するのは明るさ、色調、コントラストのみです。人物、ポーズ、ピンクの衣装、衣服の構造、ロゴ、スタジオ背景を維持してください。テキストやアクセサリーは追加しないでください。結果を1件作成し、生成前にプランを見せてください。

Sendをクリックし、プランがポーズBを使用して画像を1枚作成することを確認してから、Create for manual generationをクリックします。canvas_create_nodeを待ち、新しいDraftを選択してGenerateをクリックし、Just this onceを承認します。

会話には、Skillコマンド、Agentの分析、提案されたワークフロー、手動実行の確認、canvas_create_nodeアクティビティがまとめて保持されます。

INPUT · POSE B
Original Pose B
Before. The original Pose B controls identity, gesture, apparel, and scene content.
OUTPUT · COMMERCIAL FILTER
Pose B after Apply Photo Filter
After. Compare brightness, skin tone, outfit color, and background while checking content preservation.

明るさ、肌の色調、衣装の色、背景の色調を比較する前に、人物、ジェスチャー、衣服の輪郭、ロゴが損なわれていないことを確認してください。

ステップ6:Change Pose Skillで後ろ向きの立ち姿を作成する

  1. フィルター処理後の結果ではなく、元のポーズBを選択します。
  2. Skillsをクリックし、change-poseを検索して、Change Poseを開き、Use Skillをクリックします。
  3. 次を入力します。
プロンプト · 背面ビューを作成する

Change Pose Skillを使用して、選択したポーズBを自然な後ろ向きの立ちポーズに変えてください。同一人物、2本の三つ編みの赤毛、ピンクのシームレス長袖トップス、セットのショーツ、衣服の輪郭、ロゴ、色、スタジオ背景を維持してください。全身をフレーム内に収め、テキストやアクセサリーは追加しないでください。結果を1件作成し、生成前にプランを見せてください。

  1. Sendをクリックします。この記録されたケースでは、Agentがリクエストを利用可能なchange-poseワークフローにどのように対応付けるかを説明します。
  2. ソース、ポーズ方向、モデル、数量を確認します。このケースでは、airpose prostraight_backを使用します。
  3. Create for manual generationをクリックし、手動確認と完了したcanvas_create_nodeエントリーを待ちます。
  4. 接続された背面ポーズDraftを選択し、airpose / straight_backを確認して、Generateをクリックします。

Change Pose plan, manual execution record, and back-pose node

Back-facing Pose B created with Change Pose

三つ編み、ネックライン、袖、トップスとショーツの背面の輪郭、ロゴの配置、体の比率を確認してください。この結果はポーズBからの新しい分岐として保持します。

ステップ7:ポーズBから5秒間のショーケース動画を作成する

  1. 元のポーズBをもう一度選択します。
  2. 次を入力します。
プロンプト �� ショーケース動画を作成する

選択したポーズBを、音声なしの5秒間のアパレルショー��ース動画の最初のフレームとして使用してください。人物は、カメラを固定したまま、呼吸や重心移動のような控えめで自然な動きだけを行うようにしてください。人物のアイデンティティ、2本の三つ編みの赤毛、ピンクの衣装、ロゴ、色、背景、衣服の構造を維持してください。現在のCanvasに動画を1本作成し、生成前にプランを見せてください。

  1. Sendをクリックします。
  2. プランにweshop_cli kling、Kling 3.0、5秒、音声オフ、出力1件、Uses powerが表示されていることを確認します。
  3. Create for manual generationをクリックします。履歴には手動実行の確認と、ポーズBに接続されたDraft用の完了したcanvas_create_nodeエントリーが表示されます。

Video plan, Draft creation activity, and conversation input

  1. 動画Draftを選択し、Kling 3.0、5秒、音声なし、出力1件を再確認します。
  2. ノードの生成コントロールをクリックし、Just this onceを承認します。
  3. 動画が配信されたら、動画ノード中央の再生ボタンをクリックします。
INPUT · FIRST FRAME
Pose B input frame
Pose B. Supplies identity, apparel, scene, and the video's opening frame.
OUTPUT · 5-SECOND VIDEO
Showcase result. Play the video and inspect motion restraint, identity, apparel, and background continuity.

右側のツールを使って、直接試すことができます。

再生中は、顔、三つ編み、腕、ピンクの衣装、背景が安定していること、および開始時や終了時に急な変化がないことを確認してください。

ステップ8:ワークフロー全体を確認して結果を保存する

Fit the canvas in viewをクリックし、次の構造を確認します。

flowchart TD
    A[画像1 · 人物] --> C[ベース画像 · ピンクの衣装]
    B[画像2 · 衣装] --> C
    C --> D[ポーズA]
    C --> E[ポーズB]
    C --> F[ポーズC]
    E --> G[商用フィルター]
    E --> H[後ろ向きポーズ]
    E --> I[ショーケース動画]

1つの結果を保存するには:

  1. 対象の画像または動画ノードを右クリックします。
  2. Save Asをクリックします。
  3. システムダイアログで保存場所とファイル名を選択します。
  4. 保存したファイルを開き、画像が正しく表示されるか、動画が正常に再生されることを確認します。

複数の結果を保存するには、WindowsではCtrl、macOSではを押しながらノードを選択し、右クリックしてSave selected asを選択します。

会話とCanvasが一致しない場合

問題対処方法
Agentが誤ったソースの役割を割り当てたプランの段階で停止します。両方の参照を確認し、どの画像が人物、衣装、ポーズ、背景を指定するかを明確に伝えてください。
プランは正しいがDraftが表示されない完了したcanvas_create_nodeエントリーを探します。実行中の場合は待機し、失敗した場合は表示される復旧メッセージに従ってください。
Draftは存在するが結果がない手動モードでは正常です。Draftを選択し、パラメーターを確認してGenerateをクリックします。
生成パワーを消費したくない有料操作の確認でNot nowを選択します。Draftとプロンプトは後で利用できる状態で残ります。
新しいノードが見つからないFit the canvas in viewをクリックするか、Node listを開いて名前で検索します。
実行中のタスクに指示を追加する必要がある追加要件を入力し、Add to current taskをクリックします。タスクを終了する場合はStopをクリックします。
誤ってノードを移動または削除したすぐにUndoをクリックし、ノードとその接続の両方が戻ることを確認します。

作成の準備完了

最初の接続型アパレルワークフローを構築する

人物画像を1枚、アパレル参照を1枚用意し、最初の会話リクエストから最終的なショーケース動画まで、このチュートリアルに沿って進めてください。

WeShop Canvasをダウンロードして、最初のノードワークフローを作成する →