メインコンテンツにスキップ

製品カタログおよび製品エディタのUI(Webアプリ)に関するクイックガイド

C
対応者:Craig Wright

この記事では、Shopifyストアなどの連携ストアの商品画像を管理するために使用する画面の概要を説明します。


「商品」画面

Photoroomをストアに連携すると、「商品」画面が表示されます。これは「商品カタログ」とも呼ばれます。サイドバーの「Shopify商品」を選択してもこの画面にアクセスできます。

「商品」画面は、Photoroomに登録されているすべての商品を確認できる中心的な画面です。商品は以下のいずれかに分類されます:

  • PhotoroomとShopifyの両方に存在する商品

  • Photoroom内にあり、Shopifyへの追加待ちの状態。

Products screen showing the range of products in Photoroom that can be synced with your store.

デフォルトでは商品はグリッド表示されますが、必要に応じてリスト表示に切り替えることもできます。各商品について、Photoroomでは注目画像が表示されます。
​

「商品」画面では、以下の操作が可能です:


商品エディタ

商品カタログで商品をダブルクリックすると、商品エディタが開きます。商品エディタでは、商品の画像を1枚以上変更できるほか、Photoroomを使用して新しい画像を生成することもできます。デフォルトでは、Shopifyのサイドバーが表示されます。


商品エディタのサイドメニュー

商品エディタでは、サイドメニューからさまざまな一般的な編集機能を利用できます。これらのオプションを使用すると、行った変更は以下の対象に適用されます:

  • 選択したすべての画像

  • すべての商品画像(画像が選択されていない場合、またはすべての画像が選択されている場合)。

サイドメニューには以下の項目が含まれます:

  • テンプレート
    商品画像にテンプレートを適用します。
    ​

  • サイズ変更
    画像のサイズとアスペクト比を変更します。
    ​

  • 配置
    パディングと配置を変更します。
    ​

  • 背景
    背景を削除するか、色、画像、またはAI生成の背景に置き換えます。
    ​

  • AIによる影
    AI生成の影効果を適用します。
    ​

  • AIツール
    「AIファッションモデル」、「リカラー」、「ゴーストマネキン」などのツールを使用して、新しい画像を生成します。AIツールを選択すると、その設定がサイドバーに読み込まれます。

  • 画像の追加
    新しい画像をアップロードするか、既存のデザインを使用するか、AI画像を生成します。
    ​

  • Shopify
    Shopifyのサイドバーを表示または非表示にします(この文書の後半で説明します)。
    ​

  • 使用方法
    SpaceのAIクレジットとエクスポート使用状況が表示されます。
    ​


Shopifyサイドバー

Shopifyサイドバーは、Shopifyへの商品リストの作成と公開を支援します。各セクションに沿って作業を進めることで、画像、商品情報、SEOメタデータを含む完全な商品リストを素早く作成できます。

Shopifyサイドバーには以下の項目が含まれます:

  • リスティングスコア
    商品リストの完成度を示します。提案された項目を完了させることで、スコアが向上します。
    ​

  • AIショットリスト
    商品画像の提案(例:正面、背面、側面、モデル着用写真)を生成するために使用します。
    ​

  • タイトルと説明
    商品のタイトルや説明文を作成、編集、または生成します。
    ​

  • SEOとメタデータ
    商品画像のSEO対策に最適なファイル名や代替テキストを作成、編集、または自動生成します。
    ​

  • バリエーション
    商品のバリエーション(例:色やサイズのバリエーション)用の画像を追加します。


商品エディタのピルメニュー

各商品画像には、個々の画像を編集するために使用できるピルメニューがあります。ピルメニューには以下の項目があります:

  • 画像全体

  • 画像上の各前景レイヤー。

ピルメニューには、サイドバーからは利用できない編集オプションが用意されています。これには、テキストレイヤーやグラフィックの追加、明るさやハイライトの調整、「レタッチ」機能へのアクセス、レイヤーのトリミング、レイヤーの順序変更など、さまざまなオプションが含まれます。

重要:ピルメニューのオプションは、選択されているレイヤーまたは画像ごとに異なります。たとえば、テキストレイヤーの場合はテキスト編集用のオプションが表示されますが、これはグラフィックレイヤーのピルメニューのオプションとは異なります。


右クリックコンテキストメニュー

製品画像を右クリックすると、コンテキストメニューが表示されます。

The product editor showing its side menu, shopify sidebar, and a grid of images for a single product

右クリックコンテキストメニューのオプションには、以下のものがあります:

  • コピー
    画像をデバイスのクリップボードにコピーします。
    ​

  • 貼り付け
    デバイスのクリップボードの内容をエディタに貼り付けます。
    ​

  • 編集内容のコピー/貼り付け
    ある画像に加えた編集内容をコピーし、別の画像に貼り付ける際に使用します。

  • 複製
    画像のコピーを作成します。
    ​

  • 削除
    商品から画像を削除します。なお、更新を公開するまでは、Shopifyから画像が削除されることはありませんのでご注意ください。
    ​

  • 新しいセクションを作成
    商品エディタに新しいセクションを追加します。
    ​

  • すべて選択
    すべての画像を選択します。
    ​

  • テンプレートとして保存
    現在の画像をテンプレートとして保存します。
    ​

  • ダウンロード
    商品画像を画像ファイルとしてエクスポートします。


すべてに適用

個々の画像を編集すると、その画像のピルメニューに「すべてに適用」オプションが表示されます。このオプションを使用すると、その商品の他のすべての画像に同じ編集内容を適用できます。

Apply to all option on the pill menu for an image tile in the product editor

すべての商品画像ではなく、一部の商品画像にのみ直近の編集内容をコピーしたい場合は、代わりに右クリックコンテキストメニューの「編集内容をコピー/貼り付け」オプションを使用してください。

詳細については、「『すべてに適用』はどのように機能しますか?」をご覧ください。


グリッド表示と全画面表示

商品エディタで商品を開くと、その画像はデフォルトでグリッド表示されます。これが「グリッド表示」であり、すべての画像を確認しながら編集を行うことができます。

Product images shown in Full Screen View

より集中して作業を行うには、画像をダブルクリックするか、ツールバーの表示切り替えボタンを使用して、フルスクリーン表示に切り替えることができます。

フルスクリーン表示では、1 枚の画像が拡大表示されるため、細部の編集がしやすくなります。

画面下部には、その商品に関連する他の画像のサムネイルが表示されます。サムネイルのいずれかを選択すると、その画像がフルスクリーン表示されます。


次の手順

​商品画面の仕組みが理解できたので、商品リストの作成や編集を開始できます。


関連記事

主なワークフロー:

編集:

AIツール:

こちらの回答で解決しましたか?