【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

13Jul2011

オーバーレイ表示機能についてのアレコレ・・

「thickbox」とは無償で公開されている、手軽にオーバーレイ表示を実現させるスクリプトです
 
近年、画像などをオーバーレイ表示させるサイトが急激に増えてきました。
 
僕のサイトでも、つい先日、全ページに設置してある「お問合せフォーム」へのリンクと、全商品画像をオーバーレイ表示される様にプチリニューアルしました。
 
 
オーバーレイ表示ってなに!? だって??
 
ここ」とか、↑上のタイトル画像をクリックして下さい。
  
ポップアップ表示みたいな物ですが、ポップアップが「新しいウィンドウでページ・画像を表示する」だけなのに対して、
オーバーレイは「現在のウィンドウに重ねて、新しい画像・ページを表示」する所に違いがあります。
 
あくまでもベースは「現在のウィンドウ(ページ)」なので、ウィンドウ・タブを閉じたり、戻ったりすると、オーバーレイ表示ごと現在のページも閉じてしまいます。
この点がインターネットに慣れないお客様にとっては離脱の原因になってしまうポイントの一つですが、デメリットは後ほどまとめて考えてみます。
 
 

もくじ

 
1, オーバーレイ表示導入事例の紹介
2, オーバーレイ表示のメリット・デメリット 
3, 実際の導入方法

 
 

オーバーレイ表示導入事例の紹介

 
今回、僕のサイトでは「お問合せjフォーム」へのリンクと、商品販売ページの商品画像をオーバーレイ表示にしました。

あまり自分のサイトへのリンクは貼らない主義でやっていたのですが、説明が面倒なので実際に見てください><

プチコテージ てぬぐいの販売ページ (別ウィンドウで開く)
↑ページ最上部のテキストナビゲーションの「お問い合わせ」をクリックしてください。 一目瞭然です。 
 
以前は「お問合せ」は、問い合わせフォームを設置してあるページへのリンクでした。
それをオーバーレイ表示にする事で、ページ遷移すること無くフォームだけを呼び出せます。
 
 
 

オーバーレイ表示のメリット

 
最大のメリットは 「カッコイイ」という事 (`・∀・´)エッヘン!!
 
ふざけたワケではなく、ネットショップにとって「かっこ良さ」や「制作技術」は大切です。
多少のスクリプトを使って画像をオーバーレイ表示させる技術がある、という事だけでも、閲覧しているお客様にとっての安心感に繋がります。
 
使っているスクリプトにもよりますが、大抵のオーバーレイ表示スクリプトにはスライドショー機能もついています。
これにより、同一ページ内の任意の画像を「Next」ボタンなどで簡単に表示させる事ができ、「商品ごとのスライドショー」を簡単に実現できます。 
 
 
ユーザビリティーの観点から言うと、 ページ遷移が無いため離脱率が下がる という点が重要です。
 
僕のサイトの例で言うと、商品拡大画像と問い合わせフォームをオーバーレイ表示にしています。
 
せっかく商品の販売ページを見てくれていて、さらに興味ももってくれているから画像を拡大したり「問い合わせフォーム」に進んだりするわけです。
その際に拡大画像が別ページで表示されたら。。。 きちんとブラウザの「戻る」ボタンを押してもらえる率はどのくらいでしょうか?
ましてや問い合わせフォームのように少し時間のかかる作業の場合、問い合わせた後に元のページに戻ってもらえる可能性はどれほどでしょう^^;
 
ページ遷移をなくすことで離脱率を下げ、結果として成約率が上がれば大成功です。
もちろんお客様にとっても「あぁ・・・ページ閉じちゃったよ。。」というイライラが無くなりますしね。
 
 

オーバーレイ表示のデメリット

 
ただし、先ほども触れたデメリットとして
オーバーレイ表示を閉じようとしてブラウザの戻るボタンor閉じるボタンを押されてしまう
という恐怖もあります。
 
大抵のオーバーレイ表示スクリプトは枠外のグレー部分をクリックすることで表示が消えますが、慣れていないお客様が戻るボタンを押してしまう例も多くあります。 

この点についての解決策ですが、
1. 閉じるボタンが目立つオーバーレイ表示スクリプトを選ぶ
2. 「枠外、または”閉じる”をクリックして下さい」などの注意書きを、すべてのオーバーレイ表示部分に書く
3. 間違って「戻るボタン」を押されても大丈夫。「進むボタン」を押してくれる事を期待する
などがあります。 
 
また、JavaScriptの処理が遅いIEでは、高機能なスクリプトを使用すると、表示に時間がかかったりカクカクしたりしますので、この点も注意が必要です。
 
 
ページ閲覧中に一時的に表示させる手段としては、デメリットよりはメリットのほうが多いでしょう。

 
 
 
長文になってきたので、次回に続かせていただきます^^;

後編 「web知識ゼロでもできるThickboxの導入方法」
 
 

関連記事