楽天バナーの作り方完全ガイド｜サイズ規定・設置方法・広告ルール

楽天市場で店舗を運営していると、バナーのサイズや作り方、広告のルールが複雑でどこから手をつければよいか分からなくなることがあります。
この記事では、楽天市場の最新規定に沿ったバナーを自力で作成し、RMSやGOLDを用いて意図した場所に正しく表示させ、店舗の回遊率やセール売上を向上させられる状態になるための知識を解説します。

この記事で分かること

・ 楽天の規定に沿ったバナーサイズやファイル形式のルール
・ クリック率を最大化するためのデザイン作成のポイント
・ RMSでの基本設定からHTMLを用いた応用的な設置方法
・ 広告審査を通過するために必須のテキスト量や禁止表現の基準

楽天バナー作成から設置までを5ステップで解説！売れるデザインの基礎知識

楽天市場で効果的なバナーを展開するには、5つのステップを踏むことが重要です。
最初に掲載場所ごとのサイズ規定を正確に把握し、次いでクリック率を高めるデザインのコツを学びます。
デザイン作成が完了したら、楽天の管理画面であるRMSを使って店舗ページへ設置。

さらに応用としてHTMLを用いた特殊なバナー設置方法も紹介します。
最後に、広告用バナーを制作する際の審査ルールを理解することで、一連のプロセスが完了します。

ステップ1：掲載場所ごとの推奨サイズとファイル形式を把握する

バナー作成に取り掛かる前に、まず楽天市場が定める掲載場所ごとのサイズやファイル形式の規定を正確に理解することから始めます。
PCとスマートフォンでは推奨されるサイズが異なり、それぞれに適した画像を用意しないと、表示崩れや見栄えの悪化につながるためです。
規定を遵守することが、効果的なバナー制作の第一歩となります。

このステップで解説する規定を理解し、次のデザイン作成の準備を整えましょう。

【PCページ編】トップや共通説明文で使う主要バナーサイズ一覧

PCの店舗トップページや全ページに表示される共通説明文エリアでは、複数のバナーサイズが使用されます。
それぞれの役割に応じて適切なサイズで作成することが求められます。
以下に、主要なバナーサイズの一覧をまとめました。

メインビジュアル（大バナー）:横1200px×縦400pxなど、店舗のデザインに合わせて可変。最も目立つ場所に設置されるため、セールや主力商品の案内に使用します。
サイドバナー（縦長）:横200px×縦400pxなど。カテゴリ一覧や特定の特集ページへの誘導に使われます。
共通説明文（大）:横750px×縦200px。全商品ページの上部に表示され、送料無料やキャンペーン告知に適しています。
共通説明文（小）:横468px×縦60px。全商品ページの下部に表示され、補足情報や注意喚起などに用います。

【スマートフォンページ編】トップや商品ページで使う推奨バナーサイズ

スマートフォンのトップページや商品ページでは、限られた画面スペースを有効活用するためのバナーサイズが推奨されています。
特にモバイル端末は高解像度ディスプレイ（Retinaディスプレイなど）が主流のため、推奨サイズの2倍の大きさで画像を作成すると、より鮮明に表示されます。
トップページメインバナー:横750px×高さ300～500px程度（推奨作成サイズ:横1500px）。
店舗の顔となる部分で、最も訴求したい情報を掲載します。

共通バナー（大）:横1080px×縦210px（推奨作成サイズ:横2160px×縦420px）。
PCと共通で、全ページに表示される重要な告知エリアです。
小バナー（正方形グリッド表示用など）:横350px×縦350px（推奨作成サイズ:横700px）。
複数のカテゴリや商品を並べて見せる際に便利です。

楽天の共通バナーSとは？大・小サイズとの使い分け方

楽天の共通バナーとは、一度RMSに登録すれば全商品ページに同じバナーを自動で表示できる便利な機能です。
サイズに応じて「共通バナー（大）」と「共通バナー（小）」があり、それぞれ使い分けることで効果的な情報提供が可能になります。
「共通バナー（大）」はサイズが大きく視認性が高いため、開催中のセールや全品送料無料キャンペーンなど、ユーザーに必ず伝えたい重要な情報を掲載するのに適しています。

一方、「共通バナー（小）」はサイズが小さめなので、営業日カレンダーやお問い合わせ先、ギフトラッピングの案内といった補足的な情報を掲載するのに向いています。

作成前に確認必須！ファイル容量（KB）と保存形式の基本ルール

バナーを作成する際は、画像のピクセルサイズだけでなく、ファイル容量と保存形式のルールを守ることが不可欠です。
ファイル容量が大きすぎるとページの表示速度が遅くなり、ユーザーの離脱につながる可能性があります。
ファイル形式:主にJPEG（.jpg）またはGIF（.gif）を使用します。
写真がメインのバナーはJPEG、アニメーションや透明色を使いたい場合はGIFが適しています。

ファイル容量:多くのバナー枠では、1つあたり200KB～500KB以内という制限が設けられています。
作成後は必ずファイルサイズを確認し、必要であれば画像圧縮ツールなどを使って容量を削減するルールを徹底してください。

ステップ2：クリック率を高める「売れるバナー」をデザインする

規定通りのサイズでバナーを作成するだけでは、売上向上にはつながりません。
ユーザーの目を引き、思わずクリックしたくなるような「売れるデザイン」を施すことが重要です。
優れたデザインは、キャッチコピー、写真、配色、フォントという4つの要素で構成されます。

これらのコツを理解し、情報が的確に伝わるバナーを作成しましょう。
このステップでの工夫が、次の設置作業後の成果を大きく左右します。

お買い物マラソンやセールで効果的なキャッチコピーの作り方

お買い物マラソンや楽天スーパーセールといった大型イベント期間中は、ユーザーの購買意欲が非常に高まっています。
その機会を最大化するため、バナーには限定感やお得感を強く打ち出すキャッチコピーの作り方が有効です。
緊急性を煽る:「今だけ！」「ラスト2時間」「タイムセール」

お得感を具体的に示す:「店内全品ポイント10倍」「最大50%OFFクーポン配布中」
行動を促す:「エントリーでポイント山分け」「まずはクーポンをGET→」
これらのキーワードをキャンペーン内容に合わせて組み合わせ、ユーザーが今すぐ行動すべき理由を明確に伝えましょう。

ついクリックしたくなる魅力的な写真・商品画像の選び方

バナーの中心となる写真や商品画像は、クリック率を左右する最も重要な素材です。
商品の特長が伝わるだけでなく、ユーザーの感情に訴えかけるようなバナー画像を選びましょう。
利用シーンを想起させる商品を実際に使っている人物の写真や、生活の中に置かれているイメージ画像は、ユーザーに自分ごととして捉えさせ、購買意欲を高めます。

シズル感を演出する食品であれば湯気やツヤ、アパレルであれば素材の質感が伝わるような、五感に訴えかける写真を選びます。
ターゲットに合わせる若者向けならポップで明るい印象の素材、シニア向けなら落ち着いた信頼感のある写真を選ぶなど、ターゲット層に響くテイストを意識することが重要です。

配色の基本ルール｜3色以内でプロ並みのデザインに仕上げるコツ

デザインに統一感を持たせ、情報を分かりやすく伝えるためには、色数を絞ることが基本ルールです。
多くの色を使いすぎると、まとまりがなくなり、本当に伝えたい情報が埋もれてしまいます。
プロ並みのデザインに仕上げるコツは、以下の3つの役割で色を3色以内に抑えることです。

ベースカラー（70%）:背景など最も広い面積を占める色。白や薄いグレーなどが使いやすいです。
メインカラー（25%）:店舗やブランドのイメージを象徴する色。最も目立たせたい要素に使います。
アクセントカラー（5%）:「購入ボタン」や「〇%OFF」など、特にユーザーの注意を引きたい部分に使う対照的な色です。

可読性が上がるフォント選びと読みやすい文字の配置テクニック

バナーデザインにおいて、メッセージを正確に伝えるためにはフォント選びと文字の配置が極めて重要です。
文字が読みにくいデザインでは、せっかくのキャッチコピーも効果を発揮しません。
フォントの選び方：パソコンやスマートフォンなどのデジタル画面では、線が均一な太さの「ゴシック体」が最も可読性が高いとされています。
特に理由がなければ、視認性の高いゴシック体を選びましょう。

文字の配置：伝えたい情報の優先順位をつけ、重要なキーワードほど大きく配置します（ジャンプ率）。
また、行間や文字間を適切に調整し、窮屈な印象を与えないように注意してください。
背景色と文字色のコントラストを十分に確保することも、読みやすさを上げる基本です。

ステップ3：RMSで作成したバナーを店舗ページに設置する

デザインが完成したら、次はその作成したバナーを楽天の管理システムであるRMSを使い、実際の店舗ページに設置します。
RMSでは、PC用トップページ、スマートフォン用トップページ、そして全商品ページに共通で表示される箇所など、目的に応じて様々な場所にバナーを設定可能です。
各場所への基本的な設定手順を理解し、正確に表示させましょう。

この設定をマスターすれば、次の応用編である特殊なバナー設置もスムーズに進められます。

PCトップページにバナーを設置する基本的な手順

PCのトップページは、店舗の「顔」となる最も重要なページです。
以下の手順でバナーを設置し、魅力的な店舗を演出していきましょう。
RMSにログインし、左側メニューから「店舗設定」＞「1デザイン設定」をクリックします。
「PCデザイン設定」の項目内にある「トップページ編集」を選択します。

表示された編集画面で、バナーを設置したい箇所をクリックし、「画像」アイコンを選択します。
R-Cabinet（画像管理フォルダ）から事前にアップロードしておいたバナー画像を選択します。
画像を選択後、リンク先URLの入力欄が表示されるので、バナーをクリックした後の遷移先ページ（商品ページや特集ページなど）のURLを設定します。
最後に「保存」ボタンを押して設定を完了します。

スマートフォン用トップページにバナーを表示させる設定方法

現在のEC利用者の多くはスマートフォン経由であるため、モバイルページの作り込みは売上に直結します。
PCと同様の手順で、スマートフォン用トップページにもバナーを設定しましょう。
RMSの「店舗設定」＞「1デザイン設定」に進みます。

「スマートフォンデザイン設定」の項目内にある「トップページ編集」を選択します。
編集画面のパーツ一覧から「バナー」や「画像」といった要素を、設置したい場所へドラッグ＆ドロップで追加します。
追加した要素をクリックし、R-Cabinetからスマホ用に作成したバナー画像を選択します。
リンク先URLを設定し、忘れずに「保存」ボタンを押して反映させます。

全商品ページに共通バナーを表示させる登録手順

セール情報や送料無料の案内など、すべての商品ページに共通で表示したい情報は「共通説明文」機能を使ってバナーを設置します。
RMSの「店舗設定」＞「4商品登録・更新」＞「共通説明文（大・小）設定」へ進みます。
「共通説明文（大）」（ページ上部に表示）または「共通説明文（小）」（ページ下部に表示）の編集画面を開きます。

テキストエディタの上部にある「画像挿入」アイコンをクリックし、R-Cabinetから共通で使いたいバナー画像を選択します。
挿入した画像を選択した状態で「リンク挿入/編集」アイコンをクリックし、遷移先のURLを設定します。
「登録」ボタンを押すと、すべての商品ページにこの設定が反映されます。

ステップ4：【応用編】HTMLコードで特殊なバナーを設置する

RMSの基本機能だけでは実現できない、より高度な見せ方をしたい場合はHTMLコードを利用します。
画面の左右に固定表示される「縦帯バナー」や、スクロールしても画面に追従する「フローティングバナー」などは、ユーザーの視界に常に情報を表示し続けられるため、回遊率アップに効果的です。
HTMLの知識がなくてもコピー＆ペーストで使えるコードを紹介するので、ぜひ挑戦してみてください。

この手法を覚えれば、次の広告制作にも役立つ知識が得られます。

コピーして使える！画面左右に表示する「縦帯バナー」のHTMLコード

画面の左右（横）の余白部分にバナーを固定で設置するには、以下のHTML/CSSコードをRMSの「共通説明文（大）」などのフリースペースに貼り付けます。
これにより、ユーザーがページをスクロールしてもバナーが常に表示される状態になります。

.side-banner-left{position:fixed;top:150px;left:0;z-index:999;}
.side-banner-right{position:fixed;top:150px;right:0;z-index:999;}
「〇〇のURL」と書かれている部分を、ご自身の画像URLとリンク先URLに書き換えてから設置してください。
「top:150px;」の数値を変更すると、上下の表示位置を調整できます。

スクロールしても追従する「フローティングバナー」の設置方法

画面の右下などに常に表示され、スクロールに追従するフローティングバナーを設定するには、以下のコードを利用します。
特にセール期間中のクーポン案内や、期間限定キャンペーンの告知に効果的です。
.float-banner{position:fixed;bottom:20px;right:20px;z-index:1000;}

こちらも「〇〇のURL」部分をご自身の情報に書き換えてください。
「bottom:20px;right:20px;」の数値を変更することで、右下からの表示位置を調整可能です。
「width=”150″」でバナーの横幅を指定していますので、適宜変更してください。

ステップ5：広告審査を通過するためのTDAバナー制作ルールを理解する

店舗内に設置するバナーと異なり、楽天市場のTDA（ターゲティングディスプレイ広告）などに出稿する広告バナーには、より厳格な制作ルールと審査基準が存在します。
これらのルールを理解せずに制作を進めると、審査落ちで広告配信が遅れる原因となります。
特に注意すべきテキスト量の制限や禁止表現を学び、スムーズな広告出稿を目指しましょう。

これらの知識は、バナー作成全体の質を高める上でも重要です。
楽天広告の種類や活用法については「楽天広告の活用法」で詳しく紹介しています。

審査落ちの主な原因「テキスト量30%ルール」の概要と対策

楽天のディスプレイ広告における審査落ちの最も一般的な原因が、バナー画像内に含まれるテキストの面積が全体の3分の1（約33%）を超えてしまう「テキスト量30%ルール」です。
楽天の公式では「1/3ルール」と呼称されています。
ロゴや商品パッケージに含まれる文字もテキストとしてカウントされるため、注意が必要です。

対策としては、伝えたい情報を極力絞り込み、簡潔なキャッチコピーにすることです。
また、テキストを画像内に配置する際は、余白を十分に確保し、文字が密集しないようにレイアウトする工夫が求められます。
楽天ディスプレイ広告については「楽天ディスプレイ広告の売上拡大戦略」で詳しく紹介しています。

使用が禁止されている表現やデザイン要素の具体例

広告審査では、テキスト量以外にも景品表示法や薬機法（旧薬事法）などに基づき、使用が禁止されている表現やデザインが定められています。
これらのルールに抵触すると審査を通過できません。
「No.1」「世界一」など、客観的な根拠を示せない最上級表現
「必ず痩せる」「絶対治る」といった効果を保証する表現

過度に肌を露出した画像や、恐怖心・不快感を与えるデザイン
楽天の公式ロゴやキャラクターを無断で使用、または模倣したデザイン
ユーザーのクリックを不当に誘導するような矢印やボタンのデザイン（例：「閉じる」ボタンに見せかけたデザイン）

広告レギュレーション内で効果を高めるデザインのコツ

厳しい広告レギュレーションの中でも、ユーザーへの訴求力を高めるデザインのコツは存在します。
限られた条件を逆手に取り、効果的なバナーを作成しましょう。
情報を絞り込む：テキスト量が制限されているため、最も伝えたいメリット（例：「50%OFF」「送料無料」）を一つに絞り、大きく見せることが重要です。

ビジュアルで訴求する：文字で説明できない部分は、商品の魅力が直感的に伝わる写真やイラストで補います。
シズル感のある画像や、使用シーンがイメージできる写真が効果的です。
数字を効果的に使う：「50%」「No.1（※要根拠）」といった数字は、ユーザーの目を引きやすく、瞬時にメリットを伝えられます。

楽天のバナー作成に関するよくある質問

ここでは、楽天のバナー作成に関して、多くの店舗運営者が抱きがちな疑問について回答します。
サイズ選びの優先順位や、お買い物マラソンなど特定のイベント時のデザインのコツ、HTMLを使わない特殊バナーの設置可否など、実践的な内容をまとめました。

楽天のバナーサイズに迷ったら、どのサイズを優先して作るべきですか？

スマートフォン用のトップページメインバナーを最優先で作成することをおすすめします。
現在の購買行動の主流はスマートフォンであり、店舗の第一印象を決める最も重要なバナーサイズだからです。
高解像度で作成しておけば、PCページにも流用しやすいです。

楽天お買い物マラソン用のバナーを作るときのデザインのコツはありますか？

お買い物マラソンの公式ロゴやテーマカラーを取り入れ、イベントとの連動性をアピールするのが効果的です。
「買いまわりでポイント最大〇倍」「エントリーはこちら」など、イベント特有のキーワードを目立つように配置するデザインがクリック率を高めるコツです。
キャンペーンの賑やかさを演出しましょう。

HTMLが分かりませんが、楽天GOLDを使わずに特殊なバナーを設置できますか？

はい、可能です。
この記事の応用編で紹介した「縦帯バナー」や「フローティングバナー」は、楽天GOLDを契約していなくても、RMSの「共通説明文」などのHTML記述が許可されているフリースペースにコードを貼り付けるだけで設置できます。
専門知識がなくてもコピー＆ペーストで対応可能です。

まとめ

本記事では、楽天バナーの作成から設置までを5つのステップで解説しました。
効果的なバナーを作成するためには、まず掲載場所ごとの正確なサイズやファイル形式といったルールを遵守することが不可欠です。
その上で、クリックしたくなるような魅力的なデザインのコツを取り入れ、RMSでの基本的な設置方法をマスターすることが重要です。

応用としてHTMLを用いた設置や、広告出稿時の制作ルールも理解することで、より戦略的な店舗運営が可能になります。