楽天のバナーの作り方｜サイズ・構図・配色の基本

楽天のバナーは、「目的を1つに絞る→情報を整理する→レイアウト→配色→フォント」の順で作ると、初心者でも見やすく仕上がります。いきなり装飾から入るとごちゃごちゃになりがちなので、最初に「このバナーで何をクリックさせたいか」を決めるのが近道です。

この記事では、店舗トップ・商品ページ・セール用のバナーを自作したい方に向けて、サイズの目安・構図・配色・フォントの基本を、手順とNG例に分けて解説します。あわせて、混同しやすい「商品画像1枚目のガイドライン」との違いも整理します。

楽天のバナーの作り方（全体の流れ）

まず全体像です。バナー作成は次の5ステップで進めると迷いません。

1. 目的を1つに決める：セール告知なのか、特集ページへの誘導なのかを絞る
2. 情報を整理する：載せる要素を厳選し、主役（見せたいもの）を決める
3. レイアウトを組む：整列・視線の流れ・余白で要素を配置する
4. 配色を決める：主役を引き立て、文字が読める色の組み合わせにする
5. フォントを整える：読める大きさと書体で、背景とのコントラストを確保する

この順番が大事な理由は、土台（目的と情報整理）が決まる前に見た目を作り込むと、あとで全部やり直しになるからです。以下、各ステップを掘り下げます。

バナーの目的を1つに絞る

1枚のバナーに役割を詰め込みすぎると、結局どれも伝わりません。「1バナー＝1メッセージ」が基本です。

たとえば同じセールでも、次のように目的が違えば作りも変わります。

最初に目的を決めておくと、「この情報は載せる／載せない」の判断が一気に楽になります。迷ったら要素を減らすのが、見やすいバナーへの最短ルートです。

情報を整理して優先順位をつける

目的が決まったら、載せる情報に優先順位をつけます。人の目は一度にたくさんの情報を追えないので、主役を1つ、脇役を1〜2つまでに絞ると読みやすくなります。

情報の優先順位は、次の3段階で考えると整理しやすいです。

1. 一番伝えたいこと（主役）：最も大きく・目立たせる（例：「全品50%OFF」）
2. 補足（脇役）：主役を支える情報（例：期間・対象カテゴリ）
3. 細かい注記：小さく添える程度でよい情報（例：一部対象外の但し書き）

この差をサイズと配置ではっきりつけると、見た人が「何のバナーか」を一瞬で理解できます。逆に、全部を同じ大きさで並べると、どれも埋もれて主役が消えます。

バナーの構図・レイアウトの基本

構図で押さえるのは「整列」「視線の流れ」「余白」の3つです。

整列でそろえる

要素をバラバラに置かず、左揃え・中央揃え・右揃えのどれかに統一します。文字も写真も同じ基準線でそろえるだけで、素人っぽさが一気に消えます。

• 左揃え：文章量が多いとき、読ませたいときに向く
• 中央揃え：短いキャッチをどんと見せたいときに向く
• 右揃え：写真を左に置き、文字を右にまとめたいときに向く

1枚のバナーの中で揃え方を混在させると散らかるので、基本は1つの揃え方に統一します。

主役を大きく、余白も味方にする

主役の商品やキャッチは、思い切って大きく配置します。空いたスペースは、主役を伸びやかに見せるために使いましょう。

一方で、あえて余白をたっぷり取ったシンプルなレイアウトも有効です。情報が詰まった楽天のページの中では、余白のあるバナーがかえって目立つことがあります。「隙間なく埋める」のが正解とは限りません。

視線が集まる場所に文字を重ねない

写真には、見た人の視線が自然に集まる場所があります。たとえば風景写真なら地平線、商品写真なら商品そのものです。

この「見たい部分」に文字を重ねると、見る人はストレスを感じます。 文字は視線が集まる場所を避け、背景がすっきりした位置に置くのが基本です。切り抜き写真なら位置や大きさを自由に調整できるので、文字スペースを確保しやすくなります。

バナーの配色の基本

配色は「色相環」を土台にすると考えやすくなります。色相環とは、赤・黄・青の基本3色に、それらを混ぜた橙・緑・紫（等和色）を加え、さらにその間の色を足して輪のように並べたものです。

色が与える印象を利用する

色にはそれぞれイメージがあります。バナーの目的やお店の雰囲気に合わせて選びましょう。

同じ色でも、明るいトーンは軽やかで優しい印象、鮮やかなトーンは元気で活発な印象、暗いトーンは落ち着いた渋い印象になります。「何色か」だけでなく「どのトーンか」まで意識すると、狙った雰囲気に近づきます。

コントラストで主役を目立たせる

色の差（明暗・鮮やかさの差）が大きいほど、その要素は手前に飛び出して見えます。主役と背景のコントラストを強くすると、自然と目が主役に向かいます。

逆に、背景と主役の色が近いと、要素が背景に溶けて見えにくくなります。使う色は主役・背景・アクセントの3色程度に絞ると、まとまりと目立ちを両立しやすくなります。

バナーのフォント・文字の可読性

どれだけデザインが良くても、文字が読めなければバナーの意味がありません。 可読性は次の3点で決まります。

1. 文字サイズ：スマホで縮小表示されても読める大きさにする
2. 背景とのコントラスト：文字色と背景色の明暗差をはっきりつける
3. 書体の選び方：主役の見出しは太めで視認性の高い書体にする

とくに注意したいのが、背景と文字の色が近いケースです。こげ茶の背景に濃い文字、写真の上に同系色の文字などは読みにくくなります。文字色を変える、文字の下に帯（仕切りの色）を敷く、フチや影をつける、といった対策で読みやすくなります。

書体は1枚のバナーで2種類までに抑えると、統一感が出ます。飾りの強い書体を多用すると、かえって読みにくく安っぽく見えるので注意しましょう。

楽天バナーのサイズの基本（店舗トップ・商品ページ・セール用）

楽天RMSはHTMLでバナーを自由に配置できるため、「必ずこのサイズ」という決まりは1つではありません。 店舗のデザインや配置枠によって変わります。ここでは一般的な目安として、用途別の考え方を整理します。

サイズを決めるときのポイントは次の2つです。

• スマホ表示を前提にする：縮小されても主役の文字が読める情報量にする
• 配置枠に合わせる：RMSのどの枠に置くかで最適な縦横比は変わる

大きいバナーほど情報を載せたくなりますが、サイズが大きくても要素を詰め込みすぎると読みにくくなります。 大バナーこそ「1メッセージ」を意識しましょう。

なお、バナーに使う写真そのものの作り方は「[商品画像の作り方](https://rakurip.com/ec/rakuten-gazou-tsukurikata/)」もあわせてご覧ください。

バナー作成でやりがちなNG例

初心者がつまずきやすいポイントを、NGと改善の対で整理します。

多くの失敗は、「引き算」で解決します。うまくいかないときは、足すより先に減らせないかを考えてみてください。

商品画像ガイドラインとバナーは別物（20%ルールの誤解に注意）

楽天のバナー作りでよくある誤解が、「商品画像1枚目のガイドライン」がバナーにも適用されると思い込むことです。ここは明確に分けて理解しましょう。

楽天の商品画像登録ガイドラインは、検索結果に並ぶ商品画像の1枚目（メイン画像）が対象です。主なルールは次のとおりです。

• テキスト要素（文字・ロゴ・アイコン等）は画像全体の20%以内に収める
• 判定方法：画像を縦10×横10の100区画に分け、テキストが重なる区画を20区画（20%）以内にする
• 画像に枠線をつけない
• 背景は白、または商品の使用シーンがわかる写真背景にする

一方、店舗ページ内に貼るバナー（販促画像）は、このガイドラインの対象外です。文字量・配色・枠線は基本的に自由に設計できます。つまり、

• 商品画像の1枚目 … 20%ルールなどガイドラインを厳守
• バナー（販促画像） … 目的に合わせて自由にデザインしてよい

という住み分けです。この違いを取り違えると、「バナーなのに文字を20%以内に抑えなきゃ」と不要な制約で悩むことになります。商品画像1枚目のルールの詳細は「[画像登録ルール](https://rakurip.com/ec/rakuten-gazou-rule/)」で確認できます。

よくある質問（FAQ）

Q. 楽天のバナーに決まったサイズはありますか？ A. 商品画像1枚目のような明確な規定はありません。RMSでHTMLとして自由に配置できるため、店舗トップの大バナーは横幅いっぱい、誘導バナーは中サイズ、といった目安で用途に合わせて決めます。スマホでも文字が読めるかを基準にすると失敗しにくいです。

Q. バナーの文字も20%以内にしないといけませんか？ A. いいえ。20%以内のテキストルールは、検索結果に並ぶ商品画像の1枚目に対するものです。店舗ページ内のバナーは対象外なので、文字量は目的に合わせて自由に決められます。

Q. 色は何色まで使ってよいですか？ A. 明確な上限はありませんが、主役・背景・アクセントの3色程度に絞るとまとまりと目立ちを両立しやすくなります。色数が多いほど散らかって見えるので、迷ったら減らす方向で調整します。

Q. 文字が読みにくくなってしまいます。どうすればいいですか？ A. 背景と文字の明暗差（コントラスト）が足りない可能性が高いです。文字色を変える、文字の下に帯を敷く、フチや影をつける、といった対策で読みやすくなります。写真の上に文字を置くときは、背景がすっきりした位置を選びましょう。

Q. デザインが素人っぽく見えます。まず何を直せばよいですか？ A. 要素の「揃え」と「引き算」から見直すのが効果的です。左・中央・右のどれかに揃え方を統一し、載せる情報を主役1つに絞るだけで、印象は大きく変わります。

Q. セール用バナーと通常バナーで作り方は変わりますか？ A. 基本の手順は同じですが、セール用は割引率やセール名を主役に大きくし、赤やオレンジなど「お得・緊急」を感じさせる色を使うと訴求しやすくなります。期間や対象は脇役として添えます。