見出し画像

【構築編STEP3】実は結構重要!スライダー画像は、ショップの看板です!

弊社は"みんなでシェアし合うおすそわけマーケットプレイス ツクツク!!!"を運営する、TSUKU TSUKU株式会社です。
このnote記事では、自社システムの「ツクツク!!!CMS」にまつわる情報や誰でもできるネットショップ成功の秘訣・テクニックについて公開してまいります。

公開済みのSTEP1「テキスト編」、STEP2「アイキャッチ・ショップロゴ画像編」、そして本記事STEP3「スライダー画像編」を読むと「ショップページを最短で公開させるための方法」が身につきます!

早速とはなりますが、、、

皆様がリフォームをしたい!と思い、ツクツク!!!でリフォーム会社を見つけショップ総合ページを開いた時。
下記AとBの場合、どちらのサイトの方が「気になる!」また「サイトを覗いてみようかな!」という風に思いますか?

Bショップでは赤枠の画像を3枚設定しており、SNSの広告宣伝、プレゼントキャンペーン紹介やショップイメージ紹介を限られたスペースで、複数の情報をショップ総合ページ上部にコンパクトに表示、ユーザーに宣伝しています。

ショップ総合ページトップの表示、かつスライドの動きがあることで、サイトを訪れた際に目を惹かれませんか?

またショップ側からすると「メルマガなど集客方法を特に増やしたい!」や「キャンペーンを宣伝したい!」という場合、このAショップとBショップの差ってすごく大きいと思いませんか?

この差が【スライダー画像】です!

今回の記事は・・・

・スライダーにはどんな画像を登録すればいいかわからない。
・スライダーはどんな見せ方が有効的なのか教えてほしい。
・ショップページを最短で公開させたい!
・PCやスマホの操作に不慣れなため、入力方法を教えてほしい。

などお困りのショップ様にぜひ見ていただきたい記事となっております。短い時間でサクッと読める記事になっております。早速本編に行きましょう!


【スライダーとは?】

▷スライダーとは

スライダーとは、複数枚の画像や情報を横にスライドさせる、または自動でスライドされ、スライドショーのように見せることができる機能のことです。
※スライダーは別名でカルーセルと呼ばれる場合もあります。

▷登録後のメリット・効果

スライダー機能を有効に活用することによって、サイト運営にとっては購入促進や集客など多くの還元に繋がります。

▷掲載場所

スライダーはショップ総合ページ上部に大きく表示されます。

また、ツクツク!!!ではショップトップのテーマを4つの中から選ぶことができ、テーマによって見え方も少し変わります。ここではうち2つのテーマをご紹介します!
※CMSショップページ編集ページ内「ショップTOPのテーマ」でもサンプル画像を各テーマ毎にご用意しております。ぜひご参照くださいませ。

また、上記画像内「ツクツク建設」「リフォーム受付中」のようにCMSの機能で「文字」をスライダー画像のうえに載せることも可能です!
こちらは後半部分の「▷スライダー画像でできること」の項目で説明しておりますので、ぜひ最後までお読みください!

▷スライダーの活用例

続いて、スライダー機能の活用例をご紹介いたします。
ぜひスライダー設定の参考にしていただければ幸いです!

またデザインの作成にお困りの場合や苦手意識がある、、、という方は「アイキャッチ・ショップロゴ画像編」にデザイン作成方法をご紹介しておりますので、ぜひお読みください!

活用例1)既存販売商品の事例紹介、SNS紹介画像を掲載する。

活用例2)期間限定キャンペーンや紹介特典を掲載する。

さらに、スライダー画像にはリンクを設定して該当ページに遷移させることもできます。
※リンクはツクツク!!!サイト内に限ります。

■リンク設定の活用例
・商品ページに誘導する。
・お知らせ記事やフリーページに誘導する。

設定方法は、本記事後半部分の「▷スライダー画像でできること」の項目で説明しておりますのでご参照ください!

【スライダー画像を登録しよう!】

▷設定ページ(PCとSP)  

冒頭で少しご紹介をさせていただきました通り、スライダー画像は下記2ページPC・SP(スマートフォン)でそれぞれ登録が可能です。

・スライダーの設定PC ※ページはこちら
・スライダーの設定SP ※ページはこちら

なぜPCとSPそれぞれで設定をするのか、その理由は・・・

PCとSPでは端末ごとに画像の推奨サイズが異なり、
それぞれ最適な画像サイズの状態でサイトを見てもらうためです。

実際のショップ画像も併せてご説明します!

■PCのみ画像を設定している場合

■SPのみ画像を設定している場合

上記画像にて、PCとSPでは端末の画面幅が異なるため、それぞれで適切なサイズで画像設定する重要性が伝わりましたでしょうか。
それぞれの画像を作成するのが手間かもしれませんが、ぜひ登録を完了し、クオリティの高いショップページでの公開を目指しましょう!

▷スライダー画像の登録方法

スライダー画像の登録方法については、ツクツク!!!CMS公式マニュアルにて画像付きで案内をご用意しております。

ご登録の際には、上記マニュアルをぜひご参照くださいませ!

▷スライダー画像でできること  

ツクツク!!!CMSの標準機能で使用できるおすすめ機能をご紹介します!

◆フィルターの変更
【概要】
文字背景の濃淡が変更される。

【操作方法】

【活用例】
フィルターのパーセンテージを変更することで「文字をより目立たせる」「写真は隠れないように濃さを薄くする」など調整することが可能です!
ご自身のショップページにあった雰囲気の作成にぜひご活用ください。

◆文字色、サイズ、種類の変更
【概要】
テキストの「文字色」「文字サイズ」「文字の種類」がタイトル、説明文それぞれで変更がされる。

【操作方法】

【活用例】

◆リンクの入力
【概要】
リンクにツクツク!!!内のページを設定することで、ユーザーがスライダーをクリックした際に設定したページへ誘導することができます。

【操作方法】

【活用例】
■お友達紹介キャンペーンを告知する。

スライダー画像の活用例をぜひご参考にしていただけますと幸いです!
サイトのページに情報が万遍なく盛り込まれたページを作りましょう!

【ショップ総合ページを公開しよう!】

これまでSTEP1「テキスト編」そしてSTEP2「アイキャッチ・ショップロゴ画像編」、そしてそして本記事のSTEP3「スライダー画像編」にてショップページ公開までの道のりをご紹介いたしました!
皆様、ご登録状況はいかがでしょうか。

ご登録が完了された皆様はぜひページの公開を進めていきましょう!

◆ページの公開方法
ツクツク!!!CMS右上の「未掲載」をクリックする。
※「公開中」のタブへ変更されるとページが公開されます。

また、ショップ総合ページは下記の方法で確認が可能です。

設定及び入力方法に困ったら

重ねてのご案内となりますが、スライダー画像の登録方法またその他ツクツク!!!CMSにおける操作での不明な点等については、ツクツク!!!CMS公式マニュアルにて画像付きで案内をご用意しております。

操作にお困りの際はぜひ、公式マニュアルをご参照ください!

まとめ

最後まで記事をお読みいただき、誠にありがとうございます。
本日のまとめはこちらです!

①スライダー画像はPC・SPそれぞれでの登録をする
②文字色・サイズ・リンク化など機能を活用する

本記事を通して「最短での公開までの方法」また「ツクツク!!!CMS画像登録の必要性」が伝わっていれば幸いです!

※システムの仕様は変更となる場合がございます。何卒ご了承くださいませ。

次回のお知らせ

最後まで本記事をお読みいただき、ありがとうございました!

次回は「ショップファンクラブとは」についてを10月に公開予定です!
ぜひ次回記事もお読みいただけたら幸いです。

※記事内容は変更となる可能性もございます。