楽天のセールバナーを自動生成するツールを開発中｜現状のクオリティと今後の改善点を公開

お買い物マラソン、スーパーSALE、5と0のつく日。楽天市場ではセールやキャンペーンが毎月のようにあり、そのたびに店舗トップや商品ページに載せるセールバナーを用意する必要があります。デザインを外注するほどではないけれど、毎回自分で作るのは手間がかかる。そんな声から、inSPICEでは楽天のセールバナーを自動で生成するツールの開発を進めています。

この記事では、開発中のセールバナー自動生成ツールについて、現在できること、管理画面の状況、生成されるバナーの今のクオリティを、良いところも足りないところも含めてそのまま紹介します。正直にお伝えすると、まだ「すぐに使える」と言えるクオリティではありません。今後デザインのパターンを増やし、実際の店舗運営で使えるものに仕上げてからリリースする予定です。

開発中のツールで生成したお買い物マラソンのセールバナー（架空のサンプル） — 開発中のツールで生成したセールバナー（1440×280px）
（店舗・商品・特典・日付はすべて架空のサンプルです）

セールバナー自動生成ツールとは

セールの種類や特典、開催期間などを入力して、デザインの組み合わせを選ぶだけで、楽天のセール告知に使える横長のバナー画像（1440×280px）を作るツールです。文字の配置や数字の強調、背景の模様などはツールが自動で整えるため、画像編集ソフトを使う必要はありません。

バナーを作る仕組みは、すでにご提供している「楽天ランキングの受賞バナー」と同じです。入力内容からバナーのデザインを組み立てて、そのまま画像として書き出します。

現在できること（機能の詳細）

セールの内容を入力する

セール種別：スーパーSALE、お買い物マラソン、ワンダフルデー、5のつく日、0のつく日、お客様ご愛顧感謝DAY、ブラックフライデー、超ポイントバック祭、オリジナルSALE（自由なセール名）の9種類。英字のサブタイトル（SUPER SALE など）も自動で入ります。
特典（最大3つ）：「ポイント○倍」「○%OFFクーポン」「○円OFFクーポン」「○%OFF」「送料無料」「自由文」から選べます。数字の上には「MAX」「最大」「店内全品」「エントリーで」などの前置きを小さく添えられます。
開催期間：日時を入れると「11/4(水)20:00 〜 11/11(水)1:59」のように、曜日つきの表記に自動で整えます。
サブコピー・ボタン文言：「人気アイテムがお得に」などの一言と、「今すぐチェック」などのボタンを入れられます。

ロゴと商品画像を載せる

店舗ロゴを登録しておくと、バナーの左側に表示できます。背景色に埋もれないよう、ロゴの下に白い座布団を敷くこともできます。商品画像は3枚まで載せられます。

デザインを選ぶ

レイアウト3種類（スタンダード／斜めカット／フレーム）、背景色7種類（赤・ピンク・オレンジ・青・緑・黒×金・金×赤）、模様5種類（ベタ塗り・放射光・ストライプ・ドット・ウェーブ）、フォント3種類（立体・シンプル・明朝）を組み合わせられます。組み合わせは全部で315通りです。

保存・複製・ダウンロード

作ったバナーの設定は保存でき、複製して日付や特典だけを変えれば、毎月の定期セール用のバナーもすぐに作れます。画像はPNGまたはJPEGでダウンロードできます。

開発中の管理画面

現在は、inSPICEの管理者アカウントだけが使える試作版として動かしています。画面の上にプレビューがあり、入力欄やデザインの選択を変えると、その場でバナーが描き変わります。

セールバナー作成の管理画面。上にプレビュー、下にセール内容とデザインの入力欄 — 新規作成画面。上部がプレビュー、左がセール内容、右がデザインの選択欄です

たとえばレイアウトを「斜めカット」、背景色を「青」、模様を「ストライプ」、フォントを「シンプル」に切り替え、セール種別と特典を入れ替えると、プレビューは次のようになります。

デザインと特典を切り替えたあとのプレビュー（スーパーSALE・斜めカット・青） — デザインを切り替えると、プレビューがすぐに更新されます

画面を下に進めると、開催期間・サブコピー・ボタン文言・ロゴ・商品画像の入力欄と保存ボタンがあります。プレビューは画面上部に固定されるので、入力しながら仕上がりを確認できます。

開催期間・サブコピー・ボタン文言の入力欄と保存欄 — 開催期間・サブコピー・ボタン文言の入力欄。管理名をつけて保存します

店舗ロゴの登録画面。背景が透明なPNGがおすすめです

生成バナーの現状のクオリティ

実際に開発中のツールで生成したバナーを並べます。店舗・商品・特典・日付はすべて架空のサンプルです。

スーパーSALEのセールバナー（斜めカット・青・ストライプ） — スーパーSALE／斜めカット・青・ストライプ・シンプル

ブラックフライデーのセールバナー（フレーム・金×赤・ドット・明朝） — ブラックフライデー／フレーム・金×赤・ドット・明朝

超ポイントバック祭のセールバナー（斜めカット・黒×金・ベタ塗り） — 超ポイントバック祭／斜めカット・黒×金・ベタ塗り・立体

5のつく日のセールバナー（フレーム・緑・放射光） — 5のつく日／フレーム・緑・放射光・シンプル（商品画像1枚）

ワンダフルデーのセールバナー（スタンダード・ピンク・ウェーブ、商品画像とボタンなし） — ワンダフルデー／スタンダード・ピンク・ウェーブ（商品画像・ボタンなし）

できていること

「10倍」「50%OFF」などの数字が大きく、遠目でも特典が伝わります。
セール名・期間・特典・ボタンの位置が決まっているため、情報が散らからず、誰が作っても一定の見た目になります。
色や模様を変えるだけで、セールの雰囲気に合わせた印象の違いは出せます。

まだ足りないところ

どれも似た構図になる：色や模様は変えられても、「左にセール名、中央に特典、右に商品」という骨組みは同じです。続けて使うと見慣れた印象になりやすく、目を引く力が弱くなります。
商品画像の見せ方が単調：商品画像は白いカードを少し傾けて並べるだけです。商品の切り抜きや、主役の商品を大きく見せる配置にはまだ対応していません。
要素が少ないと余白が目立つ：商品画像やボタンを入れない場合（ワンダフルデーの例）、右側が空いてバランスが悪く見えます。
細かな表記の粗さ：1日だけのセールでも「11/25(水)0:00 〜 11/25(水)23:59」のように日付が2回出るなど、表記にまだ改善の余地があります。
サイズが1種類だけ：今は1440×280pxの横長バナーのみで、スマートフォン向けや正方形などには対応していません。

想定している利用用途

店舗トップページやカテゴリページ上部に置く、セール告知バナー
商品ページの説明文に入れる、クーポンやポイントアップの案内
毎月の5と0のつく日、ワンダフルデーなど、繰り返しのセールのバナー差し替え
お買い物マラソンやスーパーSALEの直前に、急いで告知を用意したいとき

こんな人におすすめ

セールのたびにバナーを作り直していて、作業時間を減らしたい店舗運営者の方
デザイナーに依頼するほどではないが、見やすいバナーは用意したい方
複数の店舗を担当していて、各店舗のセールバナーをまとめて用意したい運営代行の方
画像編集ソフトの操作に慣れていない方

今後の改善点

デザインパターンを増やす：レイアウトの骨組みそのものを増やし、商品を主役にした構図、文字だけで見せる構図、季節やイベントに合わせた装飾などを追加します。
商品画像の見せ方を改善する：商品の切り抜き表示や、1点を大きく見せる配置に対応したいと考えています。
余白と表記の調整：入れる要素の数に合わせて配置を自動で詰める、1日だけのセールは日付を1回にまとめる、などの細部を整えます。
サイズの追加：スマートフォン向けや商品ページ向けなど、楽天の店舗運営でよく使うサイズへの対応を検討しています。
既存機能との連携：RMS一括更新のセール運用機能と組み合わせ、登録したセール予定からバナーを用意できる形も検討しています。

リリースについて

現在は試作の段階のため、一般のユーザーの方はまだご利用いただけません。上の改善を進め、実際のセールで店舗にそのまま載せられるクオリティになったと判断できた段階で、inSPICEの機能としてリリースする予定です。リリースの時期や、どのプランで使えるかは決まり次第お知らせします。

まとめ

セールバナー自動生成ツールは、セール名や特典、開催期間を入力してデザインを選ぶだけで、楽天のセール告知バナーを作れることを目指したツールです。数字を目立たせて情報を整理するという基本の形はできてきた一方で、デザインの幅や商品画像の見せ方など、使えるツールにするための課題もはっきりしてきました。

今後はデザインのパターンを増やしながら仕上げていきます。開発の進み具合は、このブログでも引き続きお伝えします。

同じ仕組みで作っている楽天ランキングの受賞バナーは、すでにご利用いただけます。
機能の詳細を見る：楽天ランキング・受賞バナー機能の紹介ページ
楽天ランキングの計測についての記事：楽天ランキングを自動で計測｜1位獲得から受賞バナーの生成・差し替えまで自動化する新機能