こんにちは、makeshopデザイン質問掲示板担当です。
いつもmakeshopをご利用いただきありがとうございます。

この記事では、ECサイト運営者の皆さまに向けて、セール・イベント告知バナーを効果的に活用する具体的な方法をご紹介します。バナーが売上を伸ばす理由から、実際の設置方法、サンプルコード、さらにAIを使った便利なツールまで、実践的な内容をお届けします。

バナーがECサイトの売上を伸ばす3つの理由

ECサイトで売上をアップさせるには、イベント告知バナーが非常に効果的です。なぜなら、以下の3つの理由で訪問者様の購買行動を強力に後押しするからです。

1.　 一目でわかるインパクト

・文字情報よりも視覚的なバナーは、訪問者様の注目を集めやすいです。
・サイトを開いた瞬間に、どんなセールやキャンペーンがおこなわれているかがパッと伝わり、興味を惹きつけます。

2.　 今すぐ買いたい気持ちにさせる

・「本日限り」「在庫限り」といった限定感を出すことで、「今買わなきゃ！」という心理が働き、すぐに購入するよう促します。
・訪問者様を目的のページへ素早く誘導できるため、離脱を防ぎ、購入までの道のりを短くできます。

3.　 ブランドの親近感を高める

・季節のイベントなどにあわせたバナーを常に表示することで、訪問者様に「今」の情報を届けることができます。
・サイト全体で同じメッセージを発信することで、ブランドの統一感や親近感が生まれ、リピーターを増やすことにもつながります。

このように、イベント告知バナーは、訪問者様の注意を引きつけ、購買意欲を高め、スムーズな購入体験を提供することで、売上アップに貢献します。

実際にバナーを設置してみよう！

makeshopのクリエイターモードのテンプレート【Complete】、【Manabito】、【Basics】のトップページに設置する方法をご案内いたします。

バナー設置箇所例	テンプレート該当箇所
	【Complete】トップ「HTML」欄 <main class="main"> ★
	【Manabito】トップ「HTML」欄 <div class="contents-wrapper"> <{$module.side_nav}> <main> ★
	【Basics】トップ「HTML」欄 <div class="product-contents-wrap"> ★

それぞれの★の位置にHTMLにバナー表示用のHTMLを追記してください。

画像バナーを設置する場合、

<div class="event_img">
    <a href="リンク先URL"><img src="画像URL"></a>
</div>

と記述することで表示が可能です。
表示させたい画像はあらかじめファイルサーバーにアップロードしてご用意ください！
関連記事：画像やCSSファイルをアップロードしたい

HTMLとCSSでより柔軟なバナーを作成

テキストの内容を自由に変更できる、HTMLとCSSを使ったバナーの作成方法をご紹介します。
以下のHTMLコードをコピーして前述の「HTML」欄 ★の位置など、バナーを表示させたい箇所に追記してください。
HTML例）

<a href="リンク先URL" class="ms_banner_link">
    <div class="ms_banner">
        <h2 class="ms_sale-name">SPECIAL SALE</h2>
        <p class="ms_sale-period">20XX/10/01 - 20XX/10/31</p>
    </div>
</a>

記述したHTMLを装飾するCSSを、トップ「CSS」欄　に下記を追記し、前述のHTML部分を装飾してください。
CSS例１）

 

/* ---- バナー青 ---- */
.ms_banner_link {
  display: block;
  text-decoration: none!important;
  width: 100%;
  margin-bottom: 30px;
}
.ms_banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 40px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
}
.ms_banner1::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: ms_shine1 3s infinite;
}
.ms_banner .ms_sale-name {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px rgba(255,255,255,0.3);
  animation: ms_glow1 2s ease-in-out infinite alternate;
  margin: 0;
}
.ms_banner .ms_sale-period {
  font-size: 14px;
  font-weight: 300;
  margin-top: 15px;
  letter-spacing: 2px;
  opacity: 0.9;
}
@keyframes ms_shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
@keyframes ms_glow1 {
  from { text-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px rgba(255,255,255,0.3); }
  to { text-shadow: 0 0 30px rgba(255,255,255,0.8), 0 0 50px rgba(255,255,255,0.5); }
}
@media (max-width: 768px) {
  .ms_banner_link1 { max-width: none; }
  .ms_banner1 { padding: 25px; }
  .ms_banner1 .ms_sale-name { font-size: 2.2rem; }
  .ms_banner1 .ms_sale-period { font-size: 12px; }
}
@media screen and (max-width: 768px) {
  .ms_banner {
    padding: 16px 35px;
  }
  .ms_banner .ms_sale-name {
    font-size: 2rem;
  }
}

---

CSS例２）

 

/* ---- バナー赤 ---- */
.ms_banner_link {
  display: block;
  text-decoration: none!important;
  width: 100%;
  margin-bottom: 30px;
}
.ms_banner {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: #ffffff;
  padding: 45px 35px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(255, 107, 107, 0.3);
}
.ms_banner::before,
.ms_banner::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  background: rgba(255,255,255,0.1);
  transform: skewX(-25deg);
}
.ms_banner::before {
  top: 0;
  left: -100%;
  animation: ms_wave3 6s infinite;
}
.ms_banner::after {
  top: 0;
  left: -100%;
  animation: ms_wave3 6s infinite 3s;
}
.ms_banner .ms_sale-name {
  font-size: 3.2rem;
  font-weight: 800;
  margin: 0;
  position: relative;
  z-index: 1;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  animation: ms_bounce3 2s infinite;
}
.ms_banner .ms_sale-period {
  font-size: 14px;
  font-weight: 500;
  margin-top: 15px;
  position: relative;
  z-index: 1;
  letter-spacing: 1px;
}
@keyframes ms_wave3 {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}
@keyframes ms_bounce3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (max-width: 768px) {
  .ms_banner_link3 { max-width: none; }
  .ms_banner3 { padding: 30px 25px; }
  .ms_banner3 .ms_sale-name { font-size: 2.4rem; }
}
@media screen and (max-width: 768px) {
  .ms_banner {
    padding: 16px 35px;
  }
  .ms_banner .ms_sale-name {
    font-size: 2rem;
  }
}

もっと手軽に！AIを活用したバナー作成ツール

よりカンタンにバナー画像を作成したい、バナーのテキスト部分のHTMLとCSSを作る時間が取れないというショップ様向けに簡易ではありますが、Geminiを使用してバナー作成ツールを生成してみました！

下記のリンクからアクセスできます。
SALEバナー作成ツール
HTML/CSSのほかに、作成したバナーをPNG画像でダウンロード可能です。ぜひご活用ください！
※ツールは予告なく公開停止する場合がございます。ご了承ください。

いかがでしたでしょうか。
セール情報やお得な特集ページをバナーを使ってアピールしてみてください！
それではまた！