ヨス(@yossense)です。ショッピングサイトを始め、何かサービスを提供しているWEBサイトにはかかせないのが「よくある質問」ページです。今回は、よくある質問ページの重要性と、<dl>タグ、<dt>タグ、<dd>タグを使った簡単な作り方を紹介します。シンプルなんですが、最初やったときに意外と苦戦しましたので......。ある質問ページが重要な3つの理由ではネットショップに「よくある質問ページ」の重要性について3つの理由を紹介します。7年以上WEB上でショップ店長をしていた私から言うと、このページがないサイトはありえません。離脱を防ぐユーザーはネットショップにせっかく訪問してくれても、ちょっとでもストレスを抱える状況になるとためらいなく離脱します。そのために存在するのが「よくある質問ページ」なんですね。訪問客が疑問を持ったことに対する答えを用意しておくっておことです。それだけで離脱を防ぐことが出来ます。ある質問へのリンクは全ページにあって、わかりやすい位置にあることが望まれます。専門性が上がり、信頼度が上がる「よくある質問」へ対する回答というのはその辺のおじさんにできることではありません。そのショップで務めていて、例えば商品について熟知しているからこそ答えられます。回答には専門性があるってことです。そんな「専門的な質問」にもちゃんと答えている「よくある質問」ページがあると、専門性があるショップであることを表現できます。あやふやな回答が続くようなページなら逆効果です。サイトが専門的であるとわかれば、それは信頼につながり、初めてのお客様でも安心して購入出来るというわけです。ムダな作業の回避ちゃんとした「よくある質問」ページがあると、お問い合わせのメールや電話が減り、ムダな業務が減ります。毎回毎回、メールや電話で同じような質問をされる......としたら、そこを回避することで業務効率は上がるのは自明の理ですよね。解決策として、ページを改善しわかりやすくすることと、「よくある質問」ページの設置が重要です。質問ページへの導線も分かりやすいところに配置することは言うまでもありません。なるとせっかくのお客様を逃してしまうということにつ繋がります。タグで「よくある質問」ページを作るさて、ついでに「よくある質問」を<dl>の定義タグで作ってみました。今回目指したのはこんな表示です。こんな感じのよくある質問。DDタグを使ってよくある質問を表示。<div>を使うよりもすっきりしますね。別に<h4>と<p>とかでやっても良いかもしれませんが。画像は背景に、paddingで調整こんな風にしました。「DD」タグのCSS(padding)で指定します。relative;」で調整しています。」の画像を入れて調整しています。コードを紹介では<dl>を使った「よくある質問」の応答のコードを紹介します。必要最低限の装飾にとどめています。htmlhtmlはめちゃくちゃシンプル。<dl>、<dt>、<dd>しかありません。<dl><dt>◆質問がここに入る。</dt><dd>◆回答がここに入る。</dd></dl>CSSCSSもシンプルです。dotted;}ボーダーは<dd>タグの下に出るようにしていますが、一番下の質問&回答のところでは出ないようになっています。hidden;」で、はみ出したところを見せないようにしているためです。ちなみに「_zoom」はインターネット・エクスプローラーの表示対策です。ついでに画像もついでにこの例で使っている「Q」と「A」の画像も置いておきます。ダウンロードして使って下さい。使わなくてもいいですが。今回の記事は、自分が<dl>タグを使ってコーディングをしたときに、ちょっとつまづいたことがきっかけで書きました。」を表示させてました。「before」で出ているところは、あくまで仮想的なので、下につけているボーダーが「before」のところまで伸びてくれません。」マークを入れて、「padding」......って、すっごく簡単なのですが、ここに行き着くには<span>をかましたり、ボーダーを画像にして、「after」で出そうとしたり、複雑なことをやりすぎてしまっていました。こんな記事もあります。どの端末で見ても真ん中にする技!!WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。[テックアカデミー]なら、「Webリニューアル集中プログラム」という超ターゲットを絞ったコースがあります。このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。キーの割り当てを変える「KeySwap」プロフィール香川県在住の主夫ブロガー(月間120万PV達成)。Rank』の執筆メンバー。オンラインサロン「ヨッセンスクール」運営。イラストを描いたり、物事をわかりやすく説明するのが得意です。夫婦別姓を実行してて、ジェンダーや言語学の話になるとうるさい人です。iPadを使い倒してます。プロフィール詳細はこちら更新情報/フォローSNSやRSSで「ヨッセンス」の更新情報をGETできます。ヨスとつながってください。