見出し画像

画像系サイトの価値を高めるフルサイズスライドショー機能の実装方法

本記事は以下のような方に読んでいただくことを前提としています。

・画像系サイト/ショップ系サイトのオーナー
・サイトに掲載している画像により価値を持たせたい方
・サイトのアクセスアップ/リピーター増を目指したい方

本当に素晴らしい画像を取り揃えているサイトを訪れたとき思わず、ダウンロードしたくなって後からじっくり眺めてみたいと思ったことはありませんか?

しかし、実際にダウンロードされてしまうと、その人はもうあなたのサイトには訪れてくれないかもしれません。中身のコンテンツだけダウンロードされて、二度と訪れられないとなるとサイトオーナーとしてはたまったものではありませんよね。しかし、現状は多くのサイトがそうなっています。

あなたのサイトが本当に素晴らしい画像を揃えているサイトであれば、少し機能を加えてあげれば、ビジターはあなたのサイトの中で、画像を楽しめるようにすることができます。

以下のサンプル画面を見てみてください。

スライドショーページのサンプル

上記のサイトでは以下のようなことを実施しています。

・ビジターがサイト上に貼られた好きな画像をお気に入り登録できる
・お気に入り登録した画像URLはアクセス元のPCに保存され、PCやブラウザを再起動した場合でも、お気に入りした画像は残っている。
・お気に入りを選んだ状態でスライドショーページを開くと、お気に入りに選択した画像が順番に切り替わる全画面スライドショーがブラウザ上で実行される。
・スライドショーの大きさはブラウザのウィンドウの大きさを変更することで自動的に調整される。
・スライドの切り替えのスピードやフェードエフェクトの長さはユーザが自由に変更でき、その設定も保存される。

スライドショー機能がもたらす効果

それぞれのユーザが作り上げたお気に入り画像集はサイトを訪れればすぐに再現されます。あなたのサイトのファンであれば、定期的にサイトが更新される度に、自分のお気に入りリストも更新しつつ、画像閲覧を楽しんでくれるに違いありません。
例えば「アイドルなどの画像を集めたサイトで、自分のお気に入りのアイドルの画像だけを集めたスライドショーを各々の訪問者が作成する」といったことが可能になります。
実際に本機能を実装したページの離脱率が改善されたという報告も受けています。
あまり、このような機能を持たせたサイトが現状存在しないので、真新しくて使ってみる、という訪問者も多いのかもしれません。
是非、あなたのサイトでの使い方をイメージしてみてください。
使い方を工夫すれば、あなたのサイトの価値をぐっと上げてくれるかもしれません。

あなたのサイトに本機能を導入するには?

本noteは私がスライドショー機能を実装したときのノウハウをできるだけ簡単にしてまとめています。HTMLがある程度編集できる方であれば実装が可能です。不安な方は購入前に一度LINE@までご相談ください。

HTMLやJavaScript、CSSに詳しい方であれば上記サンプルを見ただけで自力で実装できてしまうかもしれません。
しかし、その場合でも、画像の枚数などに応じて動的にCSSを変更して出力する処理がどうしても必要になると思います。

本noteをご購入いただいた方には、slideshow実現のためのCSS動的出力APIの利用権(サービス継続する限り)も一緒に提供させていただきます。
難しい動的処理は私のサーバに任せて、静的なHTMLの記載のみでサンプル同様の機能を実現することが可能です。

noteの購入を検討していただける方へのFAQ

Q. PCのことは全く分かりませんが、購入しても大丈夫ですか?
  「ブラウザの右クリックで保存」「htmlファイルをメモ帳で編集」「htmlファイルをサーバにアップロード」といったキーワードで何をしたら良いかある程度分かる方であれば大丈夫です。

Q. 実装の手間はどの程度ですか?
  とりあえず、2~3枚程度の画像でスライドショーを試すだけであれば、手番は30分かからない程度だと思います。ただし、事前に私の方でAPI利用のためのIDを発行する必要(発行には1~2日程度かかる)があります。

Q. サポートはどの程度してくれるのか?
 note購入者にはLINE@にて、できる限りのサポートはさせていただきますが、あくまでベストエフォート対応とさせていただきます。例えば24時間以内の返答を約束するといったものではありません。

Q. 代わりに導入してもらうことは可能か?
  note購入前に相談に頂ければ対応可能です。状況に応じて導入費をいただきます。購入後に相談いただいた場合は、対応できない場合がありますのでご注意ください。

Q. noteやfc2ブログなどHTMLが直接編集できないブログでも使用可能か?
  上記のようなブログでは難しいです。また、記事自体にhtml記法が使えても、HTMLファイルをアップロードできないサービスでは使用不可能です。ご利用のサービスまでお問合せください。

Q.wordpressで利用可能か?
  利用可能です。wordpressの場合の実装方法については本文中に記載があります。操作面ではwordpressの基本操作(メディアアップロード、ウィジェット編集)が出来れば問題なく利用できます。

Q. JavaScriptやCookieを利用しているか?
 JavaScriptは利用していますが、Cookieは利用していません。Cookieの代わりにローカルストレージという技術を利用しています。

Q. PC・スマホ共に使えるか?
 共に使えます。スマホの場合は全画面表示しかできないため、画像の縦横比に応じてどうしても見切れる部分が出る場合があります。
iPhone環境のSafariで全画面表示するためにはアドレスバーを消すためのスクロール操作が必要になります。(少しコツがいる感じです)

Q. 各訪問者に任意の画像を選ばせるのではなく、全ての訪問者に対して同じ画像をスライドショーで表示することは可能か?
   可能です。少し実装方法が変わりますので、LINE@にてお声掛けください。

Q. 少し機能を変更したいのだが、コードを変更しても良いか?
   可能です。ただし、自己責任でお願いいたします。

Q. 少し機能を変更したいのだが、コード変更をお願いできないか?
   内容によってはお受けすることが可能です。ただし、別途費用をいただきます。LINE@にて相談ください。

Q. APIはいつまでも利用できるのか?
    基本的にはずっと提供し続けるつもりですが、ブラウザの仕様などが大きく変わったタイミングで利用できなくなる可能性があります。本ノート購入のおまけの位置づけと考えてください。



この続きをみるには

この続き: 11,534文字 / 画像5枚

画像系サイトの価値を高めるフルサイズスライドショー機能の実装方法

SakuragiMizuki

3,980円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
本業:ITアーキテクト 副業:FX自動取引、情報商材販売、アフェリエイト 既に本業の年収を副業が大きく超えているが、本業の会社に辞めると言い出せずにいる。 いつの間にか「まあそれでもいいか」と思えてきている。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。