• 楽天
  • Yahoo!

【ネットショップの離脱防止】「FAQページ」がコピペで作れるHTMLテンプレート3デザイン

1541_main

銭湯で水風呂後に、アッツアツ風呂ざっぷん浸かったときの体温が戸惑ってるじんじん感がたまらないオガリア中村です。出たあとはフルーツ牛乳150円。

今日はこちら、ネットショップの「よくある質問」「FAQ」が簡単につくれるHTMLテンプレートをご用意しました。楽天市場/Yahoo!ストアどちらも対応しています。

イメージ

シンプルな3パターンをご用意!どれも画像のご用意必要ナシ。HTMLをコピペして、書き変えるだけ。

デザイン1:超シンプル

ネットショップのよくある質問テンプレート_デザイン1

デザイン2:フレーム

ネットショップのよくある質問テンプレート_デザイン2

デザイン3:吹き出し(楽天のみ/ご契約店舗様限定)

ネットショップのよくある質問テンプレート_デザイン3

(※ogaRia×System「フルバージョンプラン」ご利用店舗様限定のテンプレートです。)

メリット

お客様トラブルを減らす、問合せ(顧客対応時間)を減らす、ショップの信頼度が増すことで購買率が向上する、などの効果が見込めます。

楽天市場もYahoo!ストアもそうですが、自動生成される「会社概要」ページは正直見づらくて・・・。お客様が知りたい情報を得るのはちょっと苦労しますよね。

「よくある質問」コーナーを別途作成する事で、顧客ケアが充実したショップである事を印象づけることもできますよ。

デザイン1:HTMLテンプレート

ネットショップのよくある質問テンプレート_デザイン1

赤文字の箇所を書換えてお使いください~

楽天ショップ用

<style type="text/css">
<!--
#QandA-1 {
	width: 100%;
	font-family: メイリオ;
	font-size: 14px; /*全体のフォントサイズ*/
}
#QandA-1 h2 {

}
#QandA-1 dt {
	background: #444; /* 「Q」タイトルの背景色 */
	color: #fff; /* 「Q」タイトルの文字色 */
	padding: 8px;
	border-radius: 2px;
}
#QandA-1 dt:before {
	content: "Q.";
	font-weight: bold;
	margin-right: 8px;
}
#QandA-1 dd {
	margin: 24px 16px 40px 32px;
	line-height: 140%;
	text-indent: -24px;
}
#QandA-1 dd:before {
	content: "A.";
	font-weight: bold;
	margin-right: 8px;
}

-->
</style>

<div id="QandA-1">
	<h2>よくあるご質問</h2>
	<dl>
		<dt>質問タイトル</dt>
		<dd>回答内容<br>回答内容</dd>
		<dt>質問タイトル</dt>
		<dd>回答内容<br>回答内容</dd>
		<dt>質問タイトル</dt>
		<dd>回答内容<br>回答内容</dd>
	</dl>
</div>

Yahoo!ストア用

<div id="QandA-1" style="width:100%;font-family:メイリオ;font-size:14px;" >
よくあるご質問
<dl>
<dt style="background-color:#444;color:#fff;padding:8px;border-radius:2px;">
Q. 質問タイトル
</dt>
<dd style="margin-top:24px;margin-bottom:40px;margin-right:16px;margin-left:32px;line-height:140%;text-indent:-20px;">
A. 回答内容<br>回答内容
</dd>
<dt style="background-color:#444;color:#fff;padding:8px;border-radius:2px;">
Q. 質問タイトル
</dt>
<dd style="margin-top:24px;margin-bottom:40px;margin-right:16px;margin-left:32px;line-height:140%;text-indent:-20px;">
A. 回答内容<br>回答内容
</dd>
<dt style="background-color:#444;color:#fff;padding:8px;border-radius:2px;">
Q. 質問タイトル
</dt>
<dd style="margin-top:24px;margin-bottom:40px;margin-right:16px;margin-left:32px;line-height:140%;text-indent:-20px;">
A. 回答内容<br>回答内容
</dd>
</dl>
</div>

デザイン2:HTMLテンプレート

ネットショップのよくある質問テンプレート_デザイン2

赤文字の箇所を書換えてお使いください~

楽天ショップ用

<style type="text/css">
<!--
#QandA-2 {
	width: 100%;
	font-family: メイリオ;
	font-size: 12px; /*全体のフォントサイズ*/
}
#QandA-2 h3 {
	font-size: 16px;
	margin-top: 32px;
}
#QandA-2 dl {
	border: 1px solid #ccc;
}
#QandA-2 dt {
font-weight: bold;
	color: #111;
	background: #f4f4f4; /* 「Q」タイトルの背景色 */
	padding: 8px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#QandA-2 dt:first-child {
	border-top: none;
}
#QandA-2 dt:before {
	content: "Q.";
	font-weight: bold;
	margin-right: 8px;
}
#QandA-2 dd {
	padding: 16px 16px 24px 30px;
	margin: 0;
	line-height: 140%;
}
#QandA-2 dd:first-line {
	font-weight: bold;
	color: #bf0000;
}
#QandA-2 dd:before {
	content: "A.";
	font-weight: bold;
	margin-right: 8px;
	margin-left: -21px;
}
-->
</style>


<div id="QandA-2">

	<h3>◯◯について</h3>
	<dl>
		<dt>質問タイトル</dt>
		<dd>回答内<br>回答内容</dd>
	</dl>
	<dl>
		<dt>質問タイトル</dt>
		<dd>回答内<br>回答内容</dd>
	</dl>

	<h3>◯◯について</h3>
	<dl>
		<dt>質問タイトル</dt>
		<dd>回答内<br>回答内容</dd>
	</dl>
	<dl>
		<dt>質問タイトル</dt>
		<dd>回答内<br>回答内容</dd>
	</dl>
</div>

Yahoo!ストア用

<div id="QandA-2" style="width:100%;font-family:メイリオ;font-size:12px;" >
	<p style="font-size:16px;margin-top:32px;" >◯◯について</p>
	<dl style="border-width:1px;border-style:solid;border-color:#ccc;" >
		<dt style="font-weight:bold;color:#111;background:#f4f4f4;padding:8px;border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-top: none;" >
			Q. 質問タイトル
		</dt>
		<dd style="padding-top:16px;padding-bottom:24px;padding-right:16px;padding-left:30px;margin:0;line-height:140%;" >
			A. 回答内容<br>回答内容
		</dd>
		<dt style="font-weight:bold;color:#111;background:#f4f4f4;padding:8px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;" >
			Q. 質問タイトル
		</dt>
		<dd style="padding-top:16px;padding-bottom:24px;padding-right:16px;padding-left:30px;margin:0;line-height:140%;" >
			A. 回答内容<br>回答内容
		</dd>
	</dl>
	<p style="font-size:16px;margin-top:32px;" >◯◯について</p>
	<dl style="border-width:1px;border-style:solid;border-color:#ccc;" >
		<dt style="font-weight:bold;color:#111;background:#f4f4f4;padding:8px;border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-top: none;" >
			Q. 質問タイトル
		</dt>
		<dd style="padding-top:16px;padding-bottom:24px;padding-right:16px;padding-left:30px;margin:0;line-height:140%;" >
			A. 回答内容<br>回答内容
		</dd>
		<dt style="font-weight:bold;color:#111;background:#f4f4f4;padding:8px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;" >
			Q. 質問タイトル
		</dt>
		<dd style="padding-top:16px;padding-bottom:24px;padding-right:16px;padding-left:30px;margin:0;line-height:140%;" >
			A. 回答内容<br>回答内容
		</dd>
	</dl>
</div>

デザイン3:HTMLテンプレート(楽天のみ)

ネットショップのよくある質問テンプレート_デザイン3

赤文字の箇所をクリックすればその場で編集可能です。

貼り付け場所

楽天市場であれば、「カテゴリページ」を使いましょう!「よくある質問」というカテゴリを新しく作り、カテゴリ説明文にHTMLをコピペすれば完了です。

Yahoo!ストアの場合は「カスタムページ」を使います。ページタイトルに「よくある質問」とつけ、「PC用フリースペース」欄にHTMLをコピペすれば完了です!

ちなみに弊社オーガランドの「よくある質問」はこんな内容になってます。ご参考くださいませ!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメント

1 件のコメント

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。