EC画像の更新を効率化するには？Figmaで書き出し・保存・反映をつなぐ方法
この記事で分かること
- EC画像の制作後に発生する、書き出し・保存・登録の作業を整理する方法
- Figmaの命名ルールとGoogle Driveを使った連携の考え方
- 自動化を始める前に決めたい承認・反映確認・やり直しの手順
セール用のバナーや商品画像が完成しても、すぐに店舗へ掲載できるとは限りません。社内確認、画像の書き出し、フォルダへの保存、モールへの登録といった作業が残り、担当者同士の連絡に時間がかかることがあります。
この負担を減らすには、「どの画像を、どの商品に、いつ反映するか」をそろえてから、繰り返し作業をつなぐことが大切です。ECグロースチャンネルでは、Figma・Google Drive・AIを活用し、デザイン完成後の工程を効率化する運用事例が紹介されています。
本記事は2026年10月10日公開の動画をもとに、画像更新の流れを解説します。動画の事例と、編集部が補足する管理表・チェックリストは区別して紹介します。情報確認日：2026年10月15日。
株式会社Wacworks 代表取締役社長 舟瀬悠
本記事は、楽天市場・Amazon・Yahoo!ショッピング・Qoo10などのECモール支援を手がける株式会社Wacworksの代表取締役社長 舟瀬 悠が監修しています。また、当サイトのコンテンツは、株式会社Wacworksが定める「コンテンツ制作・編集ポリシー」に基づいて制作しています。
目次
EC画像の更新は、制作から反映までの6工程で考える
動画では、画像更新の業務を「制作→社内確認→書き出し→保存→登録→反映」に分けています。デザイナーが画像を作り、店舗の担当者が確認し、再びデザイナーへ書き出しを依頼する。その後、運用担当者がモールへ登録する、といった引き継ぎが起こります。
数枚ならチャットで対応できても、商品数やセール施策が増えると、確認待ちの画像、修正前の画像、掲載済みの画像が混在しやすくなります。まずは、自社の業務がどの工程で止まっているかを見てみましょう。次の表は動画の流れを実務向けに整理したものです。
| 工程 | 行うこと | 引き継ぐ情報 |
|---|---|---|
| 制作 | 商品画像・バナーを作る | 対象商品、用途、サイズ、訴求内容 |
| 社内確認 | 内容や掲載条件を確認する | 承認者、修正内容、承認済みの版 |
| 書き出し | 承認された画像を出力する | 対象フレーム、形式、解像度 |
| 保存 | 納品・共有用の場所へ置く | 保存先、ファイル名、更新日 |
| 登録 | モール側へ画像を登録する | 登録先、画像の識別情報 |
| 反映 | 商品ページ等に画像を設定する | 掲載位置、反映日時、確認結果 |
「登録できた」と「購入者が見るページに反映された」は別の状態です。自動化の範囲を決めるときも、完了をどこで判定するかまで明らかにすると、担当者間の認識を合わせやすくなります。
Figmaを、制作物の確認と受け渡しの起点にする
動画の事例では、Figma上にサムネイルやページ用の制作物をまとめ、関係者が確認できる状態にしています。ここで扱っているのは、AIによる画像生成そのものではなく、完成したデザインを次の工程へ渡す仕組みです。
デザインを確認する場所がそろうと、「メールに添付された画像」「チャットに貼られた修正版」「担当者の手元の最終版」を探す作業を減らせます。そのうえで、承認された画像を機械的に識別できるようにします。
動画では、連携の仕組みを作る際に使うAIツールとしてCodexやClaude Codeが挙げられています。紹介されているのは、Figmaや保存先、モールのAPIを組み合わせて構築した運用事例です。Figmaの画面を用意するだけで、すべてのECモールに自動反映されるという意味ではありません。
命名ルールで、画像と商品・用途・反映日を結び付ける
動画では、Figma内の制作物に商品管理番号、サムネイルなどの用途、実装日が分かる名前を付ける考え方が紹介されています。人が見て分かるだけでなく、後続の処理が対象商品を取り違えないことが目的です。
たとえば、画像名を「最終版」「修正版2」だけにすると、どの商品に使うか、セール前後のどちらに掲載するかを別途確認する必要があります。画像の名前と更新一覧を対応させ、用途と反映条件を一意に決めることから始めましょう。
以下は編集部が作成した管理表の例です。動画内の実ファイル名や、特定モールが定めた命名規則ではありません。
| 項目 | 記入例 | 決めておくこと |
|---|---|---|
| 対象商品 | item-001 | 店舗で使う商品管理番号と一致させる |
| 用途・掲載位置 | 商品画像1枚目 | どの画像枠へ反映するかを明記する |
| 適用先 | 楽天市場の対象店舗 | 複数店舗・複数モールでの取り違えを防ぐ |
| 反映日時 | 2026-10-20 10:00 JST | 日付だけで足りるか、時刻・時間帯も必要かを決める |
| 承認状態 | 確認待ち／承認済み | 承認前の画像を処理対象に入れない |
| 素材の対応 | Figmaの対象フレーム＋保存先 | 承認した版と、書き出す対象を対応させる |
名前にすべての情報を詰め込む必要はありません。商品番号・用途・日付などの基本ルールをそろえ、承認状態や詳細な時刻は一覧表で管理する方法もあります。同じ名前が重なったときや、承認後にデザインが変わったときの扱いも決めてください。
書き出しと保存は、公式APIでつなげる
APIは、外部のプログラムからサービスの機能を利用するための窓口です。動画では、Figmaから画像を書き出し、Google Driveへ保存する工程を連携させています。
Figmaの公式資料では、指定したノードを画像として出力する機能が案内されており、JPGやPNGなどの形式を選べます。出力結果には画像のURLが返されますが、対象によっては出力に失敗する場合もあります。出典：Figma公式「File endpoints／GET image」。
Google Drive APIも、ファイルの作成・更新時にデータをアップロードする機能を提供しています。動画では、クライアントへJPEGなどを共有する目的でDriveを保存先にしていると説明されています。出典：Google公式「Upload file data」。
実装時には、各サービスへの認証と必要な権限、保存先の設定が必要です。編集部の提案として、まず「承認済みの画像を、決めた形式・名前で指定フォルダへ保存する」ところまでを小さく試しましょう。ファイル数、画像の内容、形式が合っているかを人が確認できる段階から始めると、原因を切り分けやすくなります。
モールへの登録・反映は、対象の仕様を確かめてからつなぐ
動画では、楽天市場を例に、保存した画像をモールへ登録し、商品ページ側へ反映する流れが説明されています。ただし、使うAPIや対応項目、利用条件はモールごとに異なります。画像を保存できることと、任意のページを更新できることは分けて確認してください。
楽天市場のAPI連携を検討する場合は、RMS WEB SERVICEの公式案内と、自店舗で利用できる最新の仕様・権限を確認します。本記事ではログインが必要な個別API仕様を検証していないため、特定の更新項目や全店舗での利用可否は断定しません。
また、反映する時刻を指定したい場合は、その時刻に処理を開始する仕組みと、失敗した際に気付ける運用が必要です。AIへ希望日時を伝えるだけで、予約反映の仕組みが常に用意されるわけではありません。
次の3点は、モールとの接続を担当する人へ渡しておきたい確認事項です。以下は編集部による補足です。
登録・反映の前に決めること
- 更新対象：店舗・商品・画像枠を特定し、想定外の商品を変更しない
- 反映条件：承認済みの版、掲載開始・終了の時刻、元に戻す画像を決める
- 完了確認：処理の結果と公開ページを照合し、途中で止まった場合の確認先を決める
画像の内容やサイズは、掲載先の現行ガイドラインにも合わせます。デザインが完成したことだけを承認条件にせず、掲載位置やキャンペーン期間まで確認してください。
自動化は1商品から試し、途中で止まっても再開できる形にする
編集部がおすすめする導入順は、①1商品の書き出しと保存、②保存結果の確認、③対象を限定したモール更新、④公開ページでの照合、です。工程ごとの結果を残しておけば、どこまで終わったかを確認できます。
たとえば保存まで成功し、モール登録で止まった場合に、すべてを最初から再実行すると画像が重複するおそれがあります。処理結果が分からないときは、登録先を読み戻して確かめてから再実行する設計にします。更新前の画像と設定も残しておくと、誤反映があった際に戻しやすくなります。
運用開始前のチェックリスト
- 制作物の置き場所と、承認する担当者が決まっている
- 商品・用途・店舗・反映日時を識別できる
- 承認した版と書き出す画像が一致する
- 画像の形式・サイズ・内容を掲載先のルールと照合した
- 保存先のファイルとモール側の登録結果を確認できる
- 公開ページの表示を確認する担当者が決まっている
- 途中で止まったときの通知先と再開手順がある
- 更新前に戻す方法と、セール終了後の対応が決まっている
効果を見るときは、画像1件あたりの作業時間だけでなく、確認待ちの時間、担当者間の連絡回数、差し戻しや誤反映の件数も記録しましょう。動画では具体的な削減時間は検証されていないため、自社で実測して対象を広げる判断に使います。
チームでAI活用を進める体制づくりには、EC企業のAI導入を進める5ステップ、既存ツールと内製の使い分けには、ECのSaaS費用を見直す判断基準も参考になります。
元動画でFigmaから画像反映までの運用事例を確認する
出典：ECグロースチャンネル「【EC×AI】Figmaからモール反映まで自動化！画像の書き出し・保存・登録を効率化する方法【ECコンサル】」（2026年10月10日公開）。本文の場面画像は元動画から引用しています。
まとめ｜画像が完成した後の作業も、一続きの業務として整える
EC画像の更新を効率化する第一歩は、制作後の確認・書き出し・保存・登録・反映を見えるようにすることです。Figma上の制作物と、商品・用途・反映条件を結び付け、小さな範囲で連携を試しましょう。承認と公開後の確認を組み込むことで、担当者が替わっても進められる運用へ近づけます。
店舗の課題整理や施策の実行支援については、WacworksのEC支援サービス一覧をご覧ください。
画像更新に追われ、店舗改善まで手が回っていませんか？
商品ページや広告の改善に使える時間を増やしたい事業者様へ。無料店舗診断で現在の店舗課題を整理し、優先して取り組む施策をご相談ください。
申込フォームの「サポートを受けたいモール」で、ご相談したい対象を選択してください。
株式会社Wacworks 代表取締役社長 舟瀬悠
ECサイトサポートサービス
EC事業の成功を後押しする私たちのサービスは、売上だけでなく利益を伸ばす戦略を提案し、EC/D2C事業の立ち上げから商品企画・ブランディング戦略まで全方位的にサポートします。サイトの構築・リニューアル、各種カート選定からサイトの制作まで”売れるサイト”づくり一気通貫で引き受けます。また、各モールなどでの運用代行に関してもビジネスモデルに合わせた料金形態お気軽にお任せいただけます。お客様の店舗を単に運営するだけでなく、お客様の事業の成長を支えていきます。
