ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

ページの集客率UPを狙う!開閉式の追従型バナーの作り方

ページの集客率UPを狙う!開閉式の追従型バナーの作り方
サイトにおけるバナーの役割

バナーは広告として、サイトを訪れた人を別のページやサイトに誘導するものとして、また訪問者が求めるページに辿り着きやすくするために使われ、基本的にページの一部に埋め込まれていることがほとんどです。

aishipRでも様々なバナーを導入しています。

しかし、バナーが埋め込まれている状態(特にページ中部)では、訪問者がそのバナーに気付かず通り過ぎてしまったり、そのバナーまでたどり着かないこともあります。

追従型バナーのメリット

追従型のバナーはページをスクロールしても、画面に固定表示されるので、ページを訪問した人の目に止まりやすくなります。

そのため、追従型のバナーを使うことで、そのサイトやページにより多くのユーザを引きつけることができます。

もちろん、アフィリエイト広告など、大々的に宣伝したいものでなければ、埋め込み式のバナーの方が良いですが、特に広告したいもの、ページの集客率をあげたいものに関しては追従型のバナーを使うのが効果的です。

しかし、そのページを何度も訪れる人や、その広告に興味がない人にとっては、スクロールに応じてついてくる追従型のバナーは邪魔に感じ、かえって逆効果になってしまうこともあります。

そこで、バナーを開閉式にすることで、そのデメリットを解消することができます。

今回はそんな閉開式の追従型バナーのつくり方をご紹介します。

追従型バナーのつくり方

まずは、単純な追従型のバナーのコード例を紹介します。

【HTMLコード】

 <div class="floating-banner">
<a href="サイトURL" target="_blank">
<img src="バナー画像" style="width:400px;">
</a>
</div>

【CSSコード】

 a:hover img {
opacity:1;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
transition: 0.4s;
}
.floating-banner {
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
}

【実装例】

追従型のバナーの実装例

CSSでバナーの位置を固定することで簡単に実装することができます。

開閉式の追従型バナーのつくり方

次に開閉式の追従型バナーのコード例を紹介します。

【HTML・JSコード】

<div class="floating-banner">
<button onclick="changeClass()" class="floating-banner_button" role="button"></button>
<p class="target">
<a href="サイトURL" target="_blank">
<img src="バナー画像" style="width:400px;">
</a>
</p>
</div>

<script type="text/javascript">
var $target = document.querySelector('.target')
var $button = document.querySelector('.floating-banner_button')
$button.addEventListener('click', function() {
$target.classList.toggle('is-hidden')
$button.classList.toggle('floating-banner_buttonClose')
})
</script>

【CSSコード】

 a:hover img {
opacity:1;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
transition: 0.4s;
}
.floating-banner {
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
}
.target.is-hidden {
display: none;
}
p {
margin: 0;
}
/* ボタンの設定 */
.floating-banner_button {
display: block;
width: 30px;
height: 30px;
background-color: rgb(87,87,87);
position: absolute;
left: 92.5%;
cursor: pointer;
}
/* アイコンの設定(開) */
.floating-banner_button::before, .floating-banner_button::after {
display: block;
content: '';
width: 4px;
height: 24px;
background-color: #FFF;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.floating-banner_button::before {
transform: rotateZ(90deg);
}
.floating-banner_button::after {
transform: rotateZ(90deg);
}
/* アイコンの設定(閉) */
.floating-banner_buttonClose {
display: block;
width: 30px;
height: 30px;
margin-left: auto;
background-color: rgb(87,87,87);
position: absolute;
left: 0;
bottom: 100%;
cursor: pointer;
}
.floating-banner_buttonClose::before, .floating-banner_buttonClose::after {
display: block;
content: '';
width: 4px;
height: 24px;
background-color: #FFF;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.floating-banner_buttonClose::before {
transform: rotateZ(0deg);
}
.floating-banner_buttonClose::after {
transform: rotateZ(90deg);
}
}

【実装例】

開閉式の追従型バナーの実装例

JavaScriptを用いて、ボタンがクリックされた時にバナーを非表示に、アイコンが変更されるようにしています。

ちなみにこのアイコンの設定としては、中に何も要素を持たないbuttonタグの:before要素と:after要素に対して縦長の四角形を設定しているため、初期状態では2本の縦線が重なっている状態になっています。

その2本の線それぞれを回転させることで、バナーの開閉に応じて、それぞれの図形を表現しています。

また、このアイコンはcontentの部分に矢印などの画像を挿入したりしてアレンジすることもできます。

是非参考にしてみてください。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。