Shopifyのスライドショーの利用のメリットと導入方法について

こんにちは。中川瞬(@shun01224)です。

中川
この記事ではShopifyのスライドショーについて知りたい
という方のために、利用するメリットと導入方法について解説をします。

この記事を読むことで、

  1. Shopifyのスライドショーを利用するメリットがわかる
  2. Shopifyのスライドショーの導入方法がわかる
  3. Shopifyのスライドショーを導入する際の注意点がわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それでは、Shopifyのスライドショ― について解説をしていきます。

 

Shopify スライドショ― を利用することによって、さらに魅力的なお店作りができるため、

多くのお客様の目に留まりやすくなり、ゆくゆくは売り上げにつながります。

Shopify スライドショーとは

スライドショーとは、一連の画像を次々と表示することができる機能です。

初めてのお客様に印象に残るお店を作ることができるので是非取り入れたい手法です。

Shopifyのお店に設置することで、動きがあり目に留まるページにデザインすることができます。

スライドショーを設置して「このページを見てみたい」とお客様に思わせる

魅力的なお店にしましょう。

特別なスキルは必要ない

Shopify スライドショ― を作るのは、

「難しそう」「専門の知識が必要なのでは?」との印象がある方もいるでしょう。

しかし、実際のところはそのような不安を持つことはなく、

特別なスキルは必要ないため誰でも挑戦できるものとなっています。

特別なスキルが必要となってしまっては、

Shopifyがここまでシェアを拡大するのも難しかったのではないかと思われます。

もちろん、最初の手順に戸惑う方もいるかもしれませんが、

それはどのようなことでも同じことではないでしょうか。

慣れてしまえば特別難しいものではないことがわかるはずです。

Shopifyでお店をはじめる人にとって、

スライドショーを取り入れないのは勿体ないといえるでしょう。

魅力的なサイトになる!

人の第一印象は3秒で決まるといわれています。

それくらい、初見というのは大事であり、

とくにネット上のお店では「見てみたいお店」

「別に見なくていいお店」に一瞬で振り分けられてしまいます。

この第一印象で「見てみたいお店」側に入ることはとくに大事なことであり、

そのための方法のひとつとして、スライドショーがあるのです。

とくに、販売している商品が静止画では魅力を伝えにくい商品の場合、

スライドショーを利用することによって商品の魅力を伝えることもできるでしょう。

ネット上で販売するというのは、実際に手に取ってもらえない分、

上手に魅力を伝えることが必要となります。

伝える手段のひとつとしてスライドショーが存在しているのです。

お客様に目に留まるページに

私たちは動いているものに目を奪われる習性があります。

それは特定の人だけではなく、人すべてに備わっているものです。

普段の生活でも、目の前に座っている女性がピアスをしていると仮定しましょう。

そのピアスが揺れるものである場合、どうしても目を奪われてしまいます。

自然と目がいってしまうのです。

動きがあるスライドショーがあることで、

販売数アップや売り上げアップにつなげることができるでしょう。

お客様に商品の魅力を伝えたいのであれば、利用した方がいいのは間違いないです。

動きのあるページは見ていて飽きることがありません。

次はどのようなスライドショーで楽しませてくれるのかと、

ワクワクした気持ちで見ることができます。

Shopify スライドショー導入方法

Shopify スライドショーの導入方法についての説明です。

導入には複数の方法があり、Shopifyサイトを使った方法と、

コードを直打ちする方法があります。

普段、コードを直打ちすることがない場合は、

Shopifyサイトを使った方法を利用した方が簡単ですし、スムーズに利用できるでしょう。

Shopifyスライドショー導入の注意点

Shopifyのお店にスライドショーを導入する場合、フルサイズで、

または1番目の画像の高さに合わせます。

高解像度の画像をスライドに使用した方がよいことはもちろん、

アップロード制限を超えないのであれば、3,840 x 2,160ピクセル以上の画像も使用可能です。

スライドショーのサイズと形状については、

それぞれが使っているデバイスのサイズや形状に合わせられることから、

一部スライドショーがトリミングされた形となることもあると思います。

このようなケースを考えて、

中央部分に画像の重要な部分がくるように配置するようにしておくと、

大事な部分は常に表示されることとなるでしょう。

スライドショーもはじめてのときは手間取ることもありますが、

回数を重ねることで慣れていきます。

Shopifyサイトを使う方法

トップページのファーストビューを自分の好みに合わせて、

スライドショーは簡単に設定や変更ができます。

まずホーム画面の「テーマをカスタマイズする」をクリックします。

もしくは、画像の左のメニューにある「オンラインストア」をクリックすると次の画像に進めます。

右上にある「カスタマイズ」をクリックすると、「スライドショー」という項目が出てきます。

「スライドショー」という部分をドラッグして一番上までドロップしてください。

一番上まできたら、「スライドショー」の右横にある小さな点々の部分をクリックしてください。

「画像を選択する」をクリックし、ライブラリーにある写真もしくは、

アップロードして表示したい画像を選択しましょう。

画像を選んで、「見出し」「小出し」に入れたテキストを入力します。

画面の中央部分に3つのアイコンがあり、左からスマホ、パソコン、フルスクリーンです。

メニューを下にスクロールすると、「スライドの自動切り替え」があります。

ここにチェックを入れると画面が秒単位で変わっていきます。

コード直打ちする方法

Shopifyにスライドショーを導入するため、

JavaScriptのライブラリーであるSwiper.jsを使用する手順です。

コード直打ちは専門的な知識がなければできませんが、

自由度が高くなり、アプリを使わない分、コストを抑えることができます。

はじめは、HTMLを作っていきます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”https://unpkg.com/swiper/swiper-bundle.min.css” />
</head>
<body>
<div class=”content-main”>
<div class=”swiper-container”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”><img src=”images/aaa01.png”></div>
<div class=”swiper-slide”><img src=”images/aaa02.png”></div>
<div class=”swiper-slide”><img src=”images/aaa03.png”></div>
</div>
<div class=”swiper-pagination”></div>

<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>

<div class=”swiper-scrollbar”></div>
</div>
</div>
</body>
</html>

上記の5行目がswiper.js用のCSSになります。

これを読み込ませることによってスライドショーの左右ボタンを表示させたりといった

CSS的な装飾をしています。

上記の8行目から32行目までがスライドショーになる部分です。

画像がURLで記述されています。

WordPressであればこのURL部分はメディアライブラリーから

コピーできますので試してみるとよいでしょう。

実用的には、スライドショーを入れたい部分に8行目から32行目部分をコピペすれば、

html部分は完成です。

次はJavaScriptを以下のように追記してあげましょう。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”https://unpkg.com/swiper/swiper-bundle.min.css” />
</head>
<body>
<div class=”content-main”>
<div class=”swiper-container”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”><img src=”images/bbb01.png”></div>
<div class=”swiper-slide”><img src=”images/bbb02.png”></div>
<div class=”swiper-slide”><img src=”images/bbb03.png”></div>
</div>
<div class=”swiper-pagination”></div>

<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>

<div class=”swiper-scrollbar”></div>
</div>
</div>
<script src=”https://unpkg.com/swiper/swiper-bundle.min.js”></script>
<script>
var swiper = new Swiper(‘.swiper-container’, {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: ‘.swiper-pagination’,
clickable: true,
},
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
});
</script>
</body>
</html>

追記しないとスライドしてくれません。

追記したのは、35行目から53行目になります。

この部分はSwiperの制御をしている部分です。

スライドの速度は41行目の値を変更することで制御できます。

いったん動くコードができたら、あとは画像リンクを差し替えるだけでOKです。

商品ページでも固定ページでもブログページでも、どこでも動かせるようになります。

アプリを使ってShopify スライドショーを作成する

Shopifyのスライドショーで、アプリを使って作成することもできます。

Shopifyはアプリを上手に使うことにより、お店作りがしやすいことで知られていますが、

スライドショー作成アプリもあります。

イメージスライダー

とても評価の高いアプリです。

無料プランもあるので、上手に利用しましょう。

18の異なるスライダー遷移スタイルから選択できます。

スライダーのキャプション、ボタン、カスタムスライダーの矢印、ビデオ、

スライダーの背景、スライダーの境界線などを追加できるため、完全にカスタマイズが可能です。

スライダーの速度も決められるので、

速度が速すぎてお客様が大事な情報を見逃してしまうこともありません

画像スライダーでベストセラーを宣伝したり、

コレクションを表示したりすることもできるので、

あなたらしいお店作りができるアプリとなっています。

簡単にインストールでき、無料のカスタマーサポートもあります。

PageFly Landing Page Builder

人気のアプリで、利用者数も多いことが特徴です。

組み込みの遅延読み込み機能と最適化されたコードを使用して、

ページの速度とページのパフォーマンスを向上させます。

さまざまなページタイプを作成できます。

料金は無料を含めて4段階に設定されています。

スライドショー専門のアプリではなく、あらゆる機能があるので、

このアプリひとつであらゆる機能を使用することができるでしょう。

サポートされている言語が多いことも特徴としてあります。

Shopify スライドショーを導入の注意点

Shopify スライドショーを導入する場合、注意したいことがいくつかあります。

できる限りスムーズにスライドショーを取り入れるために、

チェックしておきたいことがいくつかあります。

画像サイズについて

デモストアに表示される2種類の画像スライドは、いずれも1200 x 800ピクセルです。

画像スライドはすべて、スライドショー画像に最適なサイズへそろえておきましょう。

大きな画像はすべてのデバイスに収まるわけではありません。

使用するデバイスによっては、画像の一部しか表示されないことがあります。

Shopifyスライドショーに大きな画像が多数含まれていると、

画像の一部が見えないこともあるので注意が必要です。

ショップのコンセプトを考えて決定する

あなたのShopifyのお店のコンセプトをもう一度確認してみましょう。

どのようなテーマでどのような客層に何をどう販売するのかという原点に戻り、

それに合ったサイトにデザインにしなければなりません。

スライドショーの取り入れ方や大きさなどショップのコンセプトをもとに決定し、

お客様から見て魅力的かつ分かりやすいお店を作りをしましょう。

スライドショーでどのように商品を見せていくかを考え、

最終的には分かりやすいお店作りをしていくことが必要です。

商品の説明、金額、注意事項など大事なことが分かりやすく記載されていないと

買い物をしようとする気持ちが失せてしまうこともあります。

Shopify スライドショーを使うともっと魅力的なサイトに!

Shopifyスライドショーはお店作りに是非取り入れていきたいものです。

あなたのお店の第一印象を決めるのにプラスに作用する可能性が高く、

お客様に印象付けることができます。

とくに、アパレルなどの販売にはスライドショーは欠かせません。

取り入れ方もいくつかあるので、取り組みやすい方法で取り入れましょう。

魅力的なShopifyのお店作りができ、素敵な商品がそろえば、

売り上げは自然に付いてくるはずです。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。