更新するたびにバナーや画像をランダム表示する方法

# WEB制作

2020.03.03

みなさま、こんにちは。

突然ですが、私はカルーセル(スライダー)があまり好きではありません(本当に突然ですが……)。

カルーセルがとても人気なことは知っています。
制作の依頼がくるときも「画像くるくる回る」を導入してほしいといわれることもたびたび。

確かにカルーセルがあるだけでそれっぽいサイトが作れますよね。

そういった意味では非常に使い勝手のいいカルーセルですが、

  • ユーザーの意に反して動く
  • 順番的に後ろの方に置かれた画像は日の目を見ない

そして上記内容と重なるのですが、
カルーセルのクリック率はサイト訪問者の1%と言われ、そのうち84%が最初の画像をクリックしているとのデータもあります。

実際web業界でもカルーセルのデメリットは言われ続け、カルーセルについて否定的な記事が溢れています。

「でも複数のコンテンツを紹介したい」
そんな時はランダム表示を検討してみてください。

更新するたびに画像がランダム表示!

まず参考までに下記サイトをご覧いただき、何回か更新をしてみてください。

PROGBLOG

ヘッダー画像がランダムに表示されることが確認できますでしょうか。

表示コンテンツに優先順位がつけられない点ではカルーセルに劣りますが、回遊しているお客様へ、平等に、コンテンツをストレスなく見せれますので、ぜひ実装してみてください。

画像ランダム表示の実装方法

まずはソースを書きますので、「もう時間がないっ!」という人はこちらをコピペしてみてください。

HTMLの「js-random」というクラスを付与したブロックの中に表示されますよ。

それでは詳細を解説していきますので、仕組みが知りたい方は読んでみてください。

表示させたいソースを定義する

まずは表示させたいソースを定義してください。
ランダム表示ですので、とうぜん複数個になるかと思います。

ランダムで表示されるソースを定義する

次に、ランダム表示されるソースを定義してください。
ここがランダム表示の肝になりますので、解説していきますね。

上記ソースを解剖していくと、

Mathオブジェクトのfloor()メソッドは、小数点以下を切り捨てるという意味で、「Math」オブジェクトの「random()」メソッドはランダム値を生成するために使います。
そして「.length」プロパティで、配列の中の要素数を取得しました。

それを踏まえて先のソースを日本語に翻訳すると、
「sorceList の数を取得し、ランダムで返す。その際、少数点以下は切り捨てる」
となりました。

「js-random」クラス内に表示する

ここまでくれば後は表示するだけですので、

「js-random」内にsorceList で定義したソースの[random]番目を表示するとなります。

完成版はこれ

See the Pen
OJVmjmg
by sank (@sank_f)
on CodePen.

最後に完成版を置いておきますので、ご確認ください。
最もわかりにくそうなランダム値をコンソールで書き出しましたので、デベロッパーツールを活用しつつ確認してみてください。

確認できましたでしょうか?
コンソールで0が出てるときは、青。
コンソールで1が出てるときは、赤。
コンソールで2が出てるときは、緑になります。

ココナラでwebに関する質問に回答するサービスを出品しておりますので、もしよろしければ覗いてみてください。

HTML、CSS、SCSS、jQueryを教えます 調べてみたけれどわからないコーディング、ご相談ください。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~