このワイヤーの特徴
押す手間なく、回答まで読み進められる
開閉させる作りでは、読みたい質問ごとに押す必要があります。
質問と回答をすべて表示することで、上から読み進めるだけで、どの回答にも目が届きます。
目次で、読む前に全体を見渡せる
回答まで表示するとページは長くなります。
冒頭に質問の目次を置くことで、どんな質問があるのかを先に見渡し、読みたい質問へ直接移動できます。
質問ごとのIDで、URLから特定の質問を案内できる
問い合わせへの返信やチャットで、特定の質問を案内したい場面があります。
質問ごとにIDを持たせることで、URLを送るだけで、その質問の位置を直接開いてもらえます。
回答がすべてページ上にあり、ページ内検索でも見つかる
回答を開閉させないため、ページ内検索で探した言葉が、閉じた中に隠れていることがありません。読み手が自分の言葉で探しても、該当する回答にそのままたどり着けます。
SPでは目次を1列にし、移動先が隠れないようにする
SPでは目次を1列にして質問文を省略せず表示し、目次から移動したときに質問が固定ヘッダーの下に隠れないよう、止まる位置を調整しています。狭い画面でも、目次から選んだ質問をそのまま読み始められます。
制作時のよくある失敗
質問が多いのに、すべて表示している
質問が20も30もある状態ですべて表示すると、ページが長くなり、目次があっても読む負担が大きくなります。
質問の数が多い場合は、アコーディオン型やカテゴリ分けを検討します。
質問と回答の区切りが分かりにくい
質問と回答が同じ見た目で続くと、どこからが次の質問なのかが分かりにくくなります。
質問は見出しにし、組の間を区切り線と余白で分けます。
目次から移動すると、質問が固定ヘッダーに隠れる
ページ内リンクで移動したときに、固定ヘッダーの下に質問が隠れて、どこに来たのか分からなくなることがあります。
移動先の止まる位置を、ヘッダーの高さ分だけずらします。
回答の行が長すぎる
PCで横幅いっぱいに回答を書くと、1行が長くなり、読み進めにくくなります。
回答を置く幅を抑えて、1行が長くなりすぎないようにします。
内容が変わるFAQに、最終更新日がない
料金や手続きに関わる回答は、変わることがあります。
こうしたFAQに最終更新日がないと、読み手は今も正しい情報かを判断できません。
内容が変わる可能性のあるFAQでは更新日を表示し、見直したら変えます。
よくある質問
質問がいくつまでなら、全文表示でいいですか?
一律の上限はありませんが、回答が短い場合は10問前後までをひとつの目安にし、スクロールで無理なく読み切れるかどうかで判断します。
それ以上になる場合や、回答が長い場合は、アコーディオン型やカテゴリ分けを検討します。
目次は必要ですか?
質問が数問だけで、画面に収まる程度なら省いても読めます。
質問が増えてスクロールが必要になるなら、目次を置くと、どんな質問があるかを先に見渡せます。
質問ごとのリンクは、どう作ればいいですか?
各質問の見出しにIDを付け、ページのURLの末尾に「#」とIDを付けたリンクにします。
IDは #q3 のような番号ではなく、#payment（支払い方法）、#cancel（解約）のような内容を表す名前にすると、質問の順番を入れ替えてもURLが変わらず、共有したリンクが切れにくくなります。
アコーディオン型とは何が違いますか?
アコーディオン型は、質問を一覧で見せ、押した質問の回答だけを開く型です。
質問が多い場合に向きます。
この型は開閉させずにすべて表示するため、質問が少なめで、どの回答も読んでもらいたい場合に向いています。
