ネットショップに「よくある質問ページ」が重要な3つの理由

離脱を防ぐ

ユーザーはネットショップにせっかく訪問してくれても、ちょっとでもストレスを抱える状況になるとためらいなく離脱します。

そのために存在するのが「よくある質問ページ」なんですね。訪問客が疑問を持ったことに対する答えを用意しておくっておことです。

それだけで離脱を防ぐことが出来ます。よくある質問へのリンクは全ページにあって、わかりやすい位置にあることが望まれます。

専門性が上がり、信頼度が上がる

「よくある質問」へ対する回答というのはその辺のおじさんにできることではありません。

そのショップで務めていて、例えば商品について熟知しているからこそ答えられます。つまり、回答には専門性があるってことです。

そんな「専門的な質問」にもちゃんと答えている「よくある質問」ページがあると、専門性があるショップであることを表現できます。ただし、あやふやな回答が続くようなページなら逆効果です。

サイトが専門的であるとわかれば、それは信頼につながり、初めてのお客様でも安心して購入出来るというわけです。

ムダな作業の回避

ちゃんとした「よくある質問」ページがあると、お問い合わせのメールや電話が減り、ムダな業務が減ります。もし毎回毎回、メールや電話で同じような質問をされる……としたら、そこを回避することで業務効率は上がるのは自明の理ですよね。。

解決策として、ページを改善しわかりやすくすることと、「よくある質問」ページの設置が重要です。もちろん質問ページへの導線も分かりやすいところに配置することは言うまでもありません。

電話やメールで質問してくれる熱心な方ならまだいいのですが、「もう面倒だから、や～めた!」って方って多いと思いませんか? そうなるとせっかくのお客様を逃してしまうということにつ繋がります。

dtを使う

うん。<div>を使うよりもすっきりしますね。別に<h4>と<p>とかでやっても良いかもしれませんが。

画像は背景に、paddingで調整

こんな風にしました。

<dt>の背景に「 Q 」の画像を配置し「position: relative;」で調整しています。そして<dd>の背景には「 A 」の画像を入れて調整しています。

html

htmlはめちゃくちゃシンプル。<dl>、<dt>、<dd>しかありません。


<dl>
<dt>◆質問がここに入る。</dt>
<dd>◆回答がここに入る。</dd>
</dl>


CSS

CSSもシンプルです。


dl{
     width:100%;
     margin-left:45px;
     line-height:1.8;
     overflow: hidden;
     _zoom: 1;
}

dd{
     width: 455px;
     background: url(../images/faq_a.png) no-repeat 20px 7px;
     margin: 20px 0 -1px 0;
     padding: 0 20px 15px 44px;
     border-bottom: 1px #000 dotted;
}


ボーダーは<dd>タグの下に出るようにしていますが、一番下の質問&回答のところでは出ないようになっています。

<dd>の下マージンを-1pxにして、「overflow: hidden;」で、はみ出したところを見せないようにしているためです。ちなみに「_zoom」はインターネット・エクスプローラーの表示対策です。

ついでに画像も

ついでにこの例で使っている「Q」と「A」の画像も置いておきます。ダウンロードして使って下さい。使わなくてもいいですが。