FAQ（よくある質問）の時短運用術　簡単なデザイン＆運用を紹介

「FAQ（よくある質問）ページのデザインどうしようかな？あと、追加・修正が多くて変更が面倒だな。時間のかからない方法ないかな。」

そんなお悩み解決します。

本記事の内容

FAQページ運用が重要な理由が分かる
FAQページのデザインサンプルが分かる
FAQページ運用手間を80％削減する具体的方法が分かる

私は、IT・マーケティング支援をしている会社を運営しています。FAQ（よくある質問）ページは重要視しているのですが、管理工数がかかって困っていました。ご紹介する方法を使って、圧倒的にラクになった経験があるので、役立つ話ができると思います。結論から言うと、Googleスプレッドシートを利用します。サンプル作ってみました。

スプレッドシートのサンプル

>>>スプレッドシートへのリンクはコチラ

このスプレッドシートをAPI化して、2つのデザインを当ててみました。

デザインのサンプル①

デザインのサンプル②

スプレッドシートの文字を変更したり、項目を追加すると【自動的に】WEBサイトの情報も変更・追加されます。

FAQページを運用すべき2つの理由

そもそも、なぜFAQ（よくある質問）は運用すべきなのでしょうか。数あるWEBサイトの中ではFAQを用意していないサイトも多くあります。この理由は2つあります。

1. 窓口の問合せを削減できる

電話対応に終われる — WEBサイトから「同じような質問」があり、対応に終われたことのある人は多いはずです。FAQでムダな時間は短縮できる可能性が高いです。

一つは、現場で働いている方の時間を煩わせる窓口対応を減らせるということです。例えばEC店舗を運営している場合、「配送」「決済」「クーポン」等のことはよく問合せが入ります。また、質問内容は、それぞれ類似していることが多い。こうした質問に対して、FAQを用意しておくことで、窓口対応の時間は削減できます。お客様も電話・メールで問い合わせる時間が省けます。

2. お客様の安心感を得て、問合せへ繋がる

FAQは安心感に繋がる — FAQがあることで、安心感に繋がりコンバージョン率の向上も見込めます

二つ目が、ユーザーから「お客様の声をしっかりと聞いて、WEBサイトを更新している安心できる企業（店舗）だ」と認識されやすくなるということです。こうした安心感は、売上・コンバージョンにも大きくかかわってきます。

読みやすい FAQページの2つのデザイン

次にデザインですが、「Copypet」さんのブログの記事「コピペでできる！CSSとhtmlだけのシンプルなQ&Aデザイン5選」がオススメです。他にも3種類紹介されています。私が気に入って利用するデザインは下記の2つです。

デザイン①

デザイン②

管理運用はスプレッドシートを利用して80％DOWN

ここからは、なるべく時間を使わずFAQページを管理する「時短方法」を紹介します。スプレッドシートを利用します。

FAQスプレッドシートを利用する仕組み

まず、スプレッドシートを外部から呼び出すことのできるAPIへ変更します。このスプレッドシートのAPI化には、GoogleAppScriptを使いします。API化したスプレッドシートはJSONPを返却します。フロント側でajax通信を行い、またJSONPをFAQ形式に成形できるようにします。

ajaxを利用サンプルはココからダウンロード

ajaxやJSONPを成形するコードサンプルは下記です。

    jQuery(function($){ 
    function return_data(){
    var result = $.ajax({
        type: 'GET',
        url: 'https://script.google.com/macros/s/AKfycbz14bVJJbsTErVdrGJM-EFE3xQWyuv7-7c6KlRvvLGnAhQ5LovI/exec?action=nullpo',
        datatype: 'jsonp',
        jsonp: 'callback',
        async: false        
    }).responseText;
    return result;
    }
    var result_sozai = return_data();
    var result = $.parseJSON(result_sozai);
    console.log(result_sozai);
        
    //cp_qa_1はここで書いてます。
    var str = '';
    for (var i=1; i<result["response"].length; i++){  
    var child = '<dt>'+ result["response"][i][0]+'</dt>'+
        '<dd>'+ result["response"][i][1]+'</dd>';
    str += child;
    }
    //cp_qa_3はここで書いてます。
    var strnext = '';
    for (var q=1; q<result["response"].length; q++){  
    var childnext = '<div class="cp_qanda"><p class="quest">'+ result["response"][q][0]+'</p>'+
        '<p class="answer">'+ result["response"][q][1]+'</p></div>';
    strnext += childnext;        
    }
        $('.cp_qa_1 dl').html(str);
        $('.cp_qa_3').html(strnext);        
    });

jQuery(function($){

function return_data(){

var result = $.ajax({

type: 'GET',

url: 'https://script.google.com/macros/s/AKfycbz14bVJJbsTErVdrGJM-EFE3xQWyuv7-7c6KlRvvLGnAhQ5LovI/exec?action=nullpo',

datatype: 'jsonp',

jsonp: 'callback',

async: false

}).responseText;

return result;

}

var result_sozai = return_data();

var result = $.parseJSON(result_sozai);

console.log(result_sozai);

//cp_qa_1はここで書いてます。

var str = '';

for (var i=1; i<result["response"].length; i++){

var child = '<dt>'+ result["response"][i][0]+'</dt>'+

'<dd>'+ result["response"][i][1]+'</dd>';

str += child;

}

//cp_qa_3はここで書いてます。

var strnext = '';

for (var q=1; q<result["response"].length; q++){

var childnext = '<div class="cp_qanda"><p class="quest">'+ result["response"][q][0]+'</p>'+

'<p class="answer">'+ result["response"][q][1]+'</p></div>';

strnext += childnext;

}

$('.cp_qa_1 dl').html(str);

$('.cp_qa_3').html(strnext);

});

外部jsにして、ページから読みだせるようにして見てください。またこの外部jsを読みだす前に、jQueryが読み込まれているかを確認してください。ここからダウンロードしてもよいです。

htmlは以下の記述だけでOK

次に、下記のhtmlを利用してajax通信が成功しているかを確認しましょう。htmlのソースは下記を張り付けるだけで動き始めるはずです。

<style>
.cp_qa_1 *, .cp_qa_1 *:after, .cp_qa_1 *:before {
	font-family: 'FontAwesome', sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa_1 dt {
	position: relative;
	margin: 0 0 1.5em 0;
}
.cp_qa_1 dd {
	position: relative;
	margin: 0 0 2em 0;
	padding: 0 0 1.5em 2em;
	border-bottom: 1px dotted #0097a7;
}
.cp_qa_1 dt::before, .cp_qa dd::before {
	font-size: 1.2em;
	margin: 0 0.5em 0 0;
	color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	line-height: 1.2em;
}
.cp_qa_1 dt::before {
	padding: 0.1em 0.3em;
	content: '\f128';
	background: #f57c00;
}
.cp_qa_1 dd::before {
	padding: 0.12em 0.45em;
	content: '\f12a';
	background: #0097a7;
}
.cp_qa_1 dt::after, .cp_qa dd::after {
	position: absolute;
	top: 0.5em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-width: 5px 0 5px 5px;
	border-style: solid;
}
.cp_qa_1 dt::after {
	left: 1.5em;
	border-color: transparent transparent transparent #f57c00;
}
.cp_qa_1 dd::after {
	left: 3.5em;
	border-color: transparent transparent transparent #0097a7;
}
    
.cp_qa_2 *, .cp_qa_2 *:after, .cp_qa_2 *:before {
	font-family: 'FontAwesome', sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa_2 dt,.cp_qa_2 dd {
	position: relative;
	padding: 0.5em;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
	border-radius: 0.3em;
}
.cp_qa_2 dt {
	margin: 0 3em 1em 3em;
	background: #ffe0b2;
}
.cp_qa_2 dd {
	margin: 0 3em 3em 3em;
	background: #b2ebf2;
}
/* 吹き出し▶︎ */
.cp_qa_2 dt::before,.cp_qa_2 dd::before{
	position: absolute;
	z-index: 99;
	top: 0.5em;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}
/* 質問吹き出し▶︎ */
.cp_qa_2 dt::before {
	left: -0.5em;
	border-width: 5px 8.7px 5px 0;
	border-color: transparent #ffe0b2 transparent transparent;
}
/* 答え吹き出し▶︎ */
.cp_qa_2 dd::before {
	right: -0.5em;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #b2ebf2;
}
/* ?!アイコン */
.cp_qa_2 dt::after,.cp_qa_2 dd::after {
	font-size: 1.2em;
	position: absolute;
	top: 0;
	color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.2em;
}
/* ?アイコン */
.cp_qa_2 dt::after {
	left: -2.5em;
	margin: 0 0.5em 0 0;
	padding: 0.2em 0.4em;
	content: '\f128';
	background: #f57c00;
}
/* !アイコン */
.cp_qa_2 dd::after {
	right: -2.5em;
	margin: 0 0 0 0.5em;
	padding: 0.2em 0.55em;
	content: '\f12a';
	background: #0097a7;
}

.cp_qa_3 *, .cp_qa_3 *:after, .cp_qa_3 *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa_3 .cp_qanda {
	line-height: 1.5;
	position: relative;
	margin: 0 0 2em 15em;
	padding: 0 0 0 1em;
	border-left: 1px solid #333333;
}
.cp_qa_3 .quest {
	font-weight: bold;
	position: absolute;
	bottom: -1em;
	left: -15em;
	display: inline-block;
	width: 14em;
	text-align: right;
}
.cp_qa_3 .cp_qanda::before {
	font-family: serif;
	font-size: 4em;
	position: absolute;
	top: -0.4em;
	left: -3.7em;
	display: inline-block;
	width: 9em;
	content: 'Q';
	opacity: 0.1;
}
.cp_qa_3 .answer {
	min-height: 3em;
}
</style>

<div class="cp_qa_1">
<dl></dl>
</div>

<div class="cp_qa_3">
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

<style>

.cp_qa_1 *, .cp_qa_1 *:after, .cp_qa_1 *:before {

font-family: 'FontAwesome', sans-serif;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.cp_qa_1 dt {

position: relative;

margin: 0 0 1.5em 0;

}

.cp_qa_1 dd {

position: relative;

margin: 0 0 2em 0;

padding: 0 0 1.5em 2em;

border-bottom: 1px dotted #0097a7;

}

.cp_qa_1 dt::before, .cp_qa dd::before {

font-size: 1.2em;

margin: 0 0.5em 0 0;

color: #ffffff;

border-radius: 50%;

display: inline-block;

width: 1.3em;

height: 1.3em;

line-height: 1.2em;

}

.cp_qa_1 dt::before {

padding: 0.1em 0.3em;

content: '\f128';

background: #f57c00;

}

.cp_qa_1 dd::before {

padding: 0.12em 0.45em;

content: '\f12a';

background: #0097a7;

}

.cp_qa_1 dt::after, .cp_qa dd::after {

position: absolute;

top: 0.5em;

display: inline-block;

width: 0;

height: 0;

content: '';

border-width: 5px 0 5px 5px;

border-style: solid;

}

.cp_qa_1 dt::after {

left: 1.5em;

border-color: transparent transparent transparent #f57c00;

}

.cp_qa_1 dd::after {

left: 3.5em;

border-color: transparent transparent transparent #0097a7;

}

.cp_qa_2 *, .cp_qa_2 *:after, .cp_qa_2 *:before {

font-family: 'FontAwesome', sans-serif;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.cp_qa_2 dt,.cp_qa_2 dd {

position: relative;

padding: 0.5em;

box-shadow: 0px 1px 1px rgba(0,0,0,0.2);

border-radius: 0.3em;

}

.cp_qa_2 dt {

margin: 0 3em 1em 3em;

background: #ffe0b2;

}

.cp_qa_2 dd {

margin: 0 3em 3em 3em;

background: #b2ebf2;

}

/* 吹き出し▶︎ */

.cp_qa_2 dt::before,.cp_qa_2 dd::before{

position: absolute;

z-index: 99;

top: 0.5em;

display: inline-block;

width: 0;

height: 0;

content: '';

border-style: solid;

}

/* 質問吹き出し▶︎ */

.cp_qa_2 dt::before {

left: -0.5em;

border-width: 5px 8.7px 5px 0;

border-color: transparent #ffe0b2 transparent transparent;

}

/* 答え吹き出し▶︎ */

.cp_qa_2 dd::before {

right: -0.5em;

border-width: 5px 0 5px 8.7px;

border-color: transparent transparent transparent #b2ebf2;

}

/* ?!アイコン */

.cp_qa_2 dt::after,.cp_qa_2 dd::after {

font-size: 1.2em;

position: absolute;

top: 0;

color: #ffffff;

border-radius: 50%;

display: inline-block;

width: 1.5em;

height: 1.5em;

line-height: 1.2em;

}

/* ?アイコン */

.cp_qa_2 dt::after {

left: -2.5em;

margin: 0 0.5em 0 0;

padding: 0.2em 0.4em;

content: '\f128';

background: #f57c00;

}

/* !アイコン */

.cp_qa_2 dd::after {

right: -2.5em;

margin: 0 0 0 0.5em;

padding: 0.2em 0.55em;

content: '\f12a';

background: #0097a7;

}

.cp_qa_3 *, .cp_qa_3 *:after, .cp_qa_3 *:before {

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.cp_qa_3 .cp_qanda {

line-height: 1.5;

position: relative;

margin: 0 0 2em 15em;

padding: 0 0 0 1em;

border-left: 1px solid #333333;

}

.cp_qa_3 .quest {

font-weight: bold;

position: absolute;

bottom: -1em;

left: -15em;

display: inline-block;

width: 14em;

text-align: right;

}

.cp_qa_3 .cp_qanda::before {

font-family: serif;

font-size: 4em;

position: absolute;

top: -0.4em;

left: -3.7em;

display: inline-block;

width: 9em;

content: 'Q';

opacity: 0.1;

}

.cp_qa_3 .answer {

min-height: 3em;

}

</style>

</div>

</div>

ZoomやChatworkでファイル共有している方へ

リモートワークが一般的になってきた今「誰が」「どこで」「何を」ファイル共有しているのかしっかりと把握する必要があります。easyDBを利用すればセキュリティ上で安全なファイル共有をクラウド上で行えるだけでなく、ファイルのバージョン管理等も簡単にできます。

>>>リモートワーク時代の安全なファイル共有「easyDB」はこちら

この記事のURLとタイトルをコピー

FAQ（よくある質問）の時短運用術 簡単なデザイン＆運用を紹介

FAQページを運用すべき2つの理由

1. 窓口の問合せを削減できる

2. お客様の安心感を得て、問合せへ繋がる

読みやすい FAQページの2つのデザイン

管理運用はスプレッドシートを利用して80％DOWN

FAQスプレッドシートを利用する仕組み

ajaxを利用 サンプルはココからダウンロード

htmlは以下の記述だけでOK

ZoomやChatworkでファイル共有している方へ

この記事に関連する記事

FAQ（よくある質問）の時短運用術　簡単なデザイン＆運用を紹介

ajaxを利用サンプルはココからダウンロード