ブログ

2024年07月06日

画像スライダーを作るだけじゃない！見やすいホームページを作るためのslickの使い方の応用！

既存のクライアント様より新規ページ追加のご依頼をいただき、先日完成いたしました。

クライアント様は建築が得意な不動産会社様でして、戸建住宅のモデルハウスを建てたので専用ページを作りたいとご依頼をいただきました。

完成したページがこちらです。

住宅購入を検討中のお客様にモデルハウスをより良く見せるためのコンテンツとしては、外観・内観の大きなこだわりポイントだけでなく、各フロアの細かなこだわりポイントも掲載したいところです。

ただ、そのこだわりポイントは各フロアごとにいくつもあり、それらをどのようにシンプルかつ見やすく掲載するかが課題でした。ページの見やすさや理解のしやすさは、ページを見てくれたユーザーにとってとても重要なことです。

そこで、同じようにモデルハウスを建てている競合他社のホームページではどのようなコンテンツ構成にしているのかを調査してみました。

ユーザーにとって見やすいか面倒くさくないかを意識できていない

しかし、調査した限りの全てのホームページでは縦並びに羅列しているだけであり、少し見にくく感じてしまいました。

というのも、縦並びにコンテンツを羅列しているだけだと、次のこだわりポイントを見るためにスクロールして、またさらに次のこだわりポイントを見るためにスクロールしてという形になるため、平面図上のどの部分のことなのかがすぐに分からず、平面図を見るためにスクロールをして上部に戻らなければならないのです。

こだわりポイントはたくさんあるため、各箇所のポイントを見る度に「これはどの部分のことだろう？」と平面図の位置まで戻っていると少し面倒くささを感じます。

かといって、平面図を省くわけにもいきません。

平面図を掲載していないホームページもたくさんありますが、あった方が理解しやすくイメージが湧きやすいのは言うまでもありません。

どうすれば見やすく面倒くさくないコンテンツ構成にできるかを考える

この課題を解決する方法としては「平面図」と「各箇所のこだわりポイント」を同時に見られるようにすることです。

その方法はいくつか思いつきましたが、今回は「平面図」と「各箇所のこだわりポイント」を横並びに配置し、各箇所のこだわりポイントをスライド式で掲載することにしました。

こうすることで、どの部分のことなのかが理解しやすくなるだけでなく、ページのコンテンツ構成も非常にスッキリとまとまります。

スライドショーが作れるjQueryのプラグイン【slick】を応用して実装する

slickとはスライドショーが作れるjQueryのプラグインです。
主に画像スライダーを実装するために使用され、レスポンシブにも対応しております。

slickの導入方法

まずはslickをWEBサイトに導入しなければなりません。
slickの導入方法は「ファイルをダウンロードして格納する方法」と「CDNで読み込ませる方法」に２パターンあります。

近年ではCDNで読み込ませる方法が主流になりつつあり、今回の実装にあたってもCDNで読み込ませる方法を採用しました。

CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称で、外部に用意されているファイルをリンクで読み込ませて使用することができる仕組みです。

slickを動かすためには、「CSSファイル」と「スクリプトファイル」を読み込ませる必要があります。また、slickはjQueryで動くプラグインなのでjQueryを読み込ませることも忘れないようにしてください。

//CSS
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
//JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

ファイルを読み込む際の注意点ですが、スクリプトファイルを読み込ませる順番は必ず「jQuery」を読み込ませてからslickのスクリプトファイルを読み込ませるようにしてください。slickのファイルを先に読み込ませても動かないので注意してください。

コードの記述

slickの基本コードがこちらです。
スライドしたい画像の枚数に応じて「liタグ」を増やせば何枚でもスライド画像を増やすことができます。

<ul class="slide-items">
   <li><img src="images/dummy.png" alt=""></li>
   <li><img src="images/dummy2.jpg" alt=""></li>
   <li><img src="images/dummy3.jpg" alt=""></li>
 </ul>

しかし、今回は単なる画像スライダーを作りたいのではありません。コンテンツ（画像や文章など）を丸々スライドさせたいのです。

そこで今回書いたコードがこちらです。基本コードではスライドさせたい画像「imgタグ」を「liタグ」で囲っていましたが、今回はコンテンツ（画像やテキスト一式）をスライドさせたいので「divタグ」で囲っております。なので、「liタグ」を使わないということはさらに外側の「ulタグ」も必要ないので、こちらも「divタグ」に変更しております。

<div class="slider-items">
　<div>
　　<p><span>1</span><span>車好きな仲間と楽しむ趣味のスペース。<br>リビングとつながる空間で会話も弾む</span></p>
　　<div><img src="img/model/img_11.jpg" alt=""></div>
　</div>
　<div>
　　<p><span>2</span><span>内と外がつながる開放感のあるリビング。<br>玄関ホールに繋がる動線の良さも魅力的</span></p>
　　<div><img src="img/model/img_12.jpg" alt=""></div>
　</div>
　<div>
　　<p><span>3</span><span>しっかりとした骨組みの「男前ブラックスチール階段」が<br class="pcOnly">我が家の主役です</span></p>
　　<div><img src="img/model/img_13.jpg" alt=""></div>
　</div>
</div>

このようにすることで、単なる画像スライダーだけでなく、コンテンツ一式をスライドさせることができるようになります。

そして、スクリプトファイルに書いた記述がこちらです。「autoplay:false」で自動再生をオフにし、手動（ボタン）でスライドするようにしています。また、今回は単なるスライドではなく、「fade:true」でフワッと変化するスライドに変更しました。

jQuery(function($){
　$('.slider-items').slick({
　　autoplay: false,
　　autoplaySpeed: 0,
　　speed: 300,
　　cssEase: "linear",
　　slidesToShow: 1,
　　swipe: true,
　　arrows: true,
　　prevArrow: '<button type="button" class="slick-prev"></button>',
　　nextArrow: '<button type="button" class="slick-next"></button>',
　　pauseOnFocus: false, 
　　pauseOnHover: false, 
　　infinite: true,
　　fade: true,
　　responsive: [
　　　{
　　　　breakpoint: 750,
　　　　settings: {
　　　　　slidesToShow: 1,
　　　　}
　　　}
　　]
　});
})

他にもCSSによるデザイン調整などは必要ですが、もろもろ記述して完成したスライドがこちらです。