今使っているコードやURLの一覧からまとめて取り込む
CHAPTER 01
BANNERLOOP（バナーループ）とは
BANNERLOOPは、ブログやホームページにバナーが自動で切り替わるスライドショーを置くための、無料の作成ツールです。画像のURLとリンク先を入れるだけで、設置用のコードができあがります。
お店にたとえるなら、通りに面したショーウィンドウです。1枚のバナーを貼りっぱなしにするのは、同じ商品をずっと飾っているようなもの。BANNERLOOPなら、限られた1つの枠で、いくつもの商品や講座を順番に見せられます。しかもページを開くたびに並びが変わるので、何度も来てくれる読者にも新鮮に映ります。
CHAPTER 02
BANNERLOOPの特徴
開くたびにランダムで入れ替わる
登録したバナーの中から、決めた枚数だけを毎回ランダムに選んで流します。10枚登録して5枚ずつ流せば、ページを開くたびに違う組み合わせに。登録順で流すこともできます。
3つのコードを貼るだけで設置
出力されるのはHTML・CSS・JavaScriptの3つだけ。WordPressなら、カスタムHTMLブロックとCSS・JSの設定欄に貼れば完成です。プラグインを増やす必要はありません。
スマホでもなめらかに動く
スマホではスワイプで切り替えられて、パソコンではマウスを乗せると一時停止します。端末で「視差効果を減らす」を設定している人には、自動で穏やかなフェード表示に切り替わります。
軽くてサイトの表示を邪魔しない
外部のライブラリを読み込まない、小さなコードだけで動きます。jQueryなどの追加も不要なので、ページの表示速度への影響を最小限に抑えられます。
見た目をサイトに合わせて調整
縦横比（16:9、SNSのシェア画像サイズ、帯バナーなど）、最大幅、角の丸み、影、ドットの色を選べます。調整した結果はその場のプレビューで確認できます。
入力内容は自動で保存
入力したバナーや設定は、お使いのブラウザに自動で保存されます。バナーを1枚足したいときも、ページを開き直して続きから編集できます。
CHAPTER 03
BANNERLOOPの活用シーン
SCENE 1
ブログのトップページに
おすすめ記事、無料プレゼント、販売中の講座など、読者に知ってほしいものをまとめて紹介できます。枠を1つ作るだけで、サイトの「案内係」として働いてくれます。
SCENE 2
記事の最後のおすすめ枠に
記事を読み終えた読者は、次に何を読もうか探しているタイミングです。関連する商品や次に読んでほしい記事のバナーを流せば、自然に次の行動へ案内できます。
SCENE 3
講座・商品・キャンペーンの告知に
Udemyや自社の講座、電子書籍、メルマガ登録の特典など、商品をいくつも持っている人ほど効果的です。どれか1つに絞らなくても、全部を順番に見てもらえます。
SCENE 4
LPや固定ページの彩りに
お客様の声や実績の画像を流せば、文章だけのページにも動きが生まれます。静かなページに小さな「動く窓」があるだけで、目が止まりやすくなります。
CHAPTER 04
BANNERLOOPの使い方
-
1
バナーを登録する
画像のURLとリンク先URLを入れます。WordPressなら、メディアライブラリの「URLをコピー」で取得した画像URLがそのまま使えます。今使っているコードやURLの一覧からまとめて取り込むこともできます。
-
2
表示のしかたと見た目を決める
流す枚数、切り替えの間隔、切り替え効果、縦横比などを選びます。設定を変えるたびに、上のプレビューですぐに確認できます。
-
3
コードを貼り付ける
HTML・CSS・JavaScriptを、それぞれ決まった場所に貼り付けます。あとからバナーを足したいときは、JavaScriptの冒頭にある一覧に1行足すだけでもOKです。
CHAPTER 05
BANNERLOOPで期待できる効果
1つの枠で、見てもらえる商品が増える
ページの中で目立つ場所は限られています。バナーを1枚ずつ貼ると場所が足りなくなりますが、スライドショーなら1つの枠でいくつも紹介できます。限られた土地に、何階建てものビルを建てるようなイメージです。
見慣れたバナーが「背景」にならない
同じ場所に同じバナーがずっとあると、読者の目は自然とそこを素通りするようになります。並びや内容が毎回変わることで、「今日は何があるんだろう」と目を向けてもらいやすくなります。
バナーの入れ替えが「習慣」になる
コードを一から書き直す必要がないので、新しい講座が出たら1枚足す、古くなったら1枚外す、という小さな更新を気軽に続けられます。続けやすい仕組みは、それだけで成果につながります。
CHAPTER 06SPECIAL EDITION
スペシャル版でできること
フリー版だけでも、トップページのスライドショーは十分に作れます。そのうえで「バナーでもっと売りたい」「キャンペーンをうまく回したい」という方のために、スペシャル版を用意しました。ツールの中で鍵マークが付いている機能が、スペシャル版で使えるようになります。
フリー版が「ショーウィンドウ」だとしたら、スペシャル版は「売り場づくりの道具一式」です。何をいちばん目立たせるか、いつまで飾るか、どんな札を付けるか。お店の人が毎日やっている工夫を、バナーでもできるようにしました。
表示の優先度
バナーごとに「必ず表示」「よく出す」「ふつう」「たまに出す」を選べます。ランダムのよさはそのままに、今いちばん売りたい商品だけは毎回きちんと見せられます。
たとえば、発売したばかりの講座を「必ず表示」にして、ほかのバナーはランダムに回す、という使い方ができます。
掲載期間の自動管理
バナーごとに開始日と終了日を決めておくと、その期間だけ自動で表示されます。終わったキャンペーンのバナーが残ったままになる「外し忘れ」がなくなります。
たとえば、来月のセールのバナーを今のうちに登録しておけば、当日から勝手に表示が始まります。
期限メッセージ
終了日が近いバナーに「10/31(金)まで」「あと3日」といったメッセージを自動で重ねます。最終日には「本日まで」に変わります。日付は終了日から自動で計算するので、書き換えの手間はありません。
「いつでも買える」と思われがちな商品に、今動く理由をそっと添えられます。
バッジ・隅三角・斜めの帯と「NEW」の自動表示
「無料」「期間限定」「人気」などの札を、バナーの四隅に付けられます。形は丸いバッジ、角の三角、斜めの帯の3種類で、色も自由です。掲載開始から決めた日数だけ「NEW」を自動で付けて、期間が過ぎたら勝手に外すこともできます。
お店の値札やPOPと同じで、小さな札が1枚あるだけで、目に留まる確率がぐっと上がります。
全13種類の切り替え効果
フェードとスライド（横）に加えて、次の11種類が使えます。
- ディップ（白）
- ディップ（黒）
- スライド（縦）
- ワイプ
- ワイプ（円）
- ワイプ（斜め）
- フリップ
- キューブ回転
- ページめくり
- ズーム
- ランダム
左右の矢印
丸・角・シンプルの3デザインから選べる矢印で、読者が自分のペースで前後のバナーを見られます。
複数設置と設定の持ち運び
トップには講座、記事下には無料特典、というように別々のスライドショーを同じページに置けます。設定を書き出して、別のパソコンで続きを編集することもできます。
フリー版とスペシャル版のちがい
| 機能 | フリー版 | スペシャル版 |
|---|---|---|
| バナーの登録・並べ替え・まとめて取り込み | 使える | 使える |
| ランダム表示・登録順表示 | 使える | 使える |
| ドット・一時停止・スワイプ | 使える | 使える |
| 縦横比・幅・角丸・影の調整 | 使える | 使える |
| 切り替え効果 | 2種類 | 13種類 |
| 表示の優先度 | – | 使える |
| 掲載期間の自動管理 | – | 使える |
| 期限メッセージ | – | 使える |
| バッジ・隅三角・斜めの帯 | – | 使える |
| NEWの自動表示 | – | 使える |
| 左右の矢印 | – | 使える |
| 1ページに複数設置 | – | 使える |
| 設定の書き出し・読み込み | – | 使える |
| 料金 | 無料 | 無料（メールアドレスのご登録のみ） |
CHAPTER 07
よくある質問
Q本当に無料で使えますか？
Aはい、フリー版は登録なしで無料でお使いいただけます。作ったスライドショーは、ご自身のブログや商用サイトにも設置できます。スペシャル版も、メールアドレスのご登録だけで無料です。
QWordPress以外のサイトでも使えますか？
A使えます。HTML・CSS・JavaScriptを貼り付けられるサイトであれば設置できます。WordPressの場合は、HTMLをカスタムHTMLブロックに、CSSとJavaScriptをテーマの設定欄などに貼り付けてください。
Qバナー画像はどんなサイズで作ればいいですか？
Aツールで選んだ縦横比に合わせて作ると、画像の端が切れずにきれいに収まります。迷ったら16:9（たとえば1280×720ピクセル）がおすすめです。すべてのバナーを同じ比率でそろえると、切り替わったときの見た目がきれいに整います。
Qサイトの表示が重くなりませんか？
A外部のライブラリを使わない軽いコードで動きます。ただし画像そのものが重いと影響が出るので、バナー画像はなるべく圧縮してから使うのがおすすめです。
Qあとからバナーを追加・削除できますか？
Aできます。ツールで編集してコードを貼り直すか、JavaScriptの冒頭にあるスライドの一覧を直接書き換えてください。入力内容はブラウザに保存されているので、ツールを開き直せば続きから編集できます。
Qスペシャル版の期限表示は、毎日更新が必要ですか？
A必要ありません。終了日をもとに、見る人のその日の日付で自動計算して表示します。掲載期間が終わったバナーも自動で表示されなくなります。