QAページ（よくある質問ページ）の作り方
QAページは文字通り、よく質問される情報を掲載しておくためのページです。
よくある間違いとして、「運営者が伝えたい情報」や確認しておきたい情報を記載しているケースもありますが、運営者サイトの事情による情報については、規約ページや運営者情報のページの方で掲載します。
QAページについては、「サイト訪問者が知りたい情報」を掲載するためのページになりますので、事実としてよく質問される事項のみを掲載するようにしましょう。
- QAページ → 訪問者が知りたい情報
- 利用規約、運営者情報 → 運営者が伝えたい情報
QAサイトを作成する目的は、自分で疑問を解決することにより、顧客からの問い合わせを減らし、ヘルプサポート業務の効率を向上させることにあります。そのため、よく質問される事項をピックアップし、それに対して満足のいく回答を作成する必要があります。
QAページで解決しない場合にのみ、問い合わせページから連絡してもらうようにするとよいでしょう。
QAページのHTMLコードのサンプル
具体的な作り方としては、<dl><dt><dd>のHTMLを使用して掲載するのがベストです。可能であれば、JavaScriptを設置し、質問をクリックすると回答の詳細を開けるようにしておくとユーザビリティーが高まります。
例えば、以下のような作りになります。
■QAサンプル
- 営業時間は何時までですか？
- 当店の営業時間は午前10時～午後18時までとなっております。
- 定休日はいつですか？
- 定休日は毎週水曜日です。
このコードのサンプルはこちらになります。
■HTML
<dl>
<dt>よくある質問１</dt>
<dd>わかりやすい回答</dd>
<dt>よくある質問２</dt>
<dd>わかりやすい回答</dd>
</dl>
■CSS
<style>
dt {
cursor: pointer;
font-size: 18px;
padding: 10px 0 10px 25px;
border-bottom: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: relative;
}
dt:before {
content: '▶';
font-size: 14px;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
dt.open:before {
content: '▼';
}
dt:hover {background-color:#fafafa;}
dd {
display: none;
font-size: 16px;
padding: 15px;
border-bottom: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
margin-left:0;
}
</style>また、JavaScriptはフッターの直前あたりに設置します。
■JavaScript
<script>
var dtElements = document.querySelectorAll("dt");
var dtArray = Array.prototype.slice.call(dtElements);
function getNextElementSibling(element) {
var nextSibling = element.nextSibling;
while (nextSibling && nextSibling.nodeType !== 1) {
nextSibling = nextSibling.nextSibling;
}
return nextSibling;
}
dtArray.forEach(function(dt) {
dt.addEventListener("click", function() {
var dd = getNextElementSibling(dt);
if (dd.style.display === "none") {
dd.style.display = "block";
dt.classList.add("open");
} else {
dd.style.display = "none";
dt.classList.remove("open");
}
});
});
</script>QAページの設置後、回答がわかりやすかったか、疑問点が解決されたのかのフィードバックを収集しながら、常に最新の情報にメンテナンスしていくことをおすすめします。