FAQ-005 公開  更新

ステップ案内型 FAQ

2〜3問の選択に答えてもらい、該当する質問だけを表示するFAQの設計です。
読み手は探す言葉を考えなくても、「契約前か契約中か」「何について知りたいか」を選ぶだけで、自分に関係する質問にたどり着けます。
選んだ内容を確認・変更できるようにして、迷ったときはすべての質問や問い合わせにも進めるようにします。

ワイヤーフレーム(PC)

ステップ案内型 FAQ PC版ワイヤーフレーム

ワイヤーフレーム(SP)

ステップ案内型 FAQ SP版ワイヤーフレーム

SP版の特徴

  1. 選択肢は縦に全幅で並べる:横に並べると文字が折り返して読みにくくなるため、1つずつ全幅のボタンにして押しやすくしています。
  2. 選んだ内容は1行で結果の上に:狭い画面でも、何を選んだ結果なのかがすぐ分かり、そこから選び直せるようにしています。
  3. 次のステップが見える位置へ移動:選んだあとに次の質問を探して画面を動かさなくて済むよう、次の見出しが確認できる位置へ移動します。
  4. 問い合わせのボタンは全幅に:該当する質問で解決しなかったときに、そのまま問い合わせへ進めるようにしています。

採用前の判断ポイント

向いているケース

  • 読み手の立場や状況によって、見るべき質問がはっきり分かれる
  • 契約前の人と契約中の人、個人と法人のように、同じページに立場の違う読み手が来る
  • 読み手が探す言葉を思いつきにくく、選択肢を見せた方が早い
  • サービスのサポートページ、会員向けのヘルプ、手続きの種類が多い窓口のFAQなど

向かないケース

  • 質問が少なく、一覧で見渡せる(全文表示型やアコーディオン型が向きます)
  • 読み手の状況で質問を分けられない(選択肢を作っても、どれを選んでも同じ質問が出るなら手間が増えるだけです)
  • 読み手が探す言葉をはっきり持っている(検索型の方が、入力するだけで早くたどり着けます)

このワイヤーの特徴

探す言葉を思いつかなくても、選ぶだけでたどり着ける

検索欄を置いても、読み手が「何と入れればいいか」を思いつけなければ使われません。
状況と知りたいことを選択肢で見せることで、言葉を考えなくても、自分に関係する質問にたどり着けます。

立場の違う読み手に、それぞれ必要な質問だけを見せられる

契約前の人に解約の手順を、契約中の人に申し込みの流れを見せても役に立ちません。
最初に状況を選んでもらうことで、同じページに来た立場の違う読み手に、それぞれ関係する質問だけを表示できます。

選んだ内容が見えていて、いつでも選び直せる

どの条件で絞り込まれた結果なのかが分からないと、読み手は結果を信用できません。
「契約中 › 支払い」のように選んだ内容を表示し、そこから前のステップに戻って選び直せるようにしています。

解決しなかったときに、選んだ内容ごと問い合わせに進める

該当する質問を読んでも解決しない人はいます。
結果の下に問い合わせの枠を置き、選んだ内容をフォームに引き継ぐことで、同じ説明を入力し直さずに相談できます。

SPでは選択肢が全幅になり、片手で進められる

SPでは選択肢を縦に並べ、1つずつ全幅のボタンにしています。選ぶと次の質問が見える位置へ移動するので、指を大きく動かさずに進められます。

制作時のよくある失敗

ステップを進めないと、質問が1つも見えない

最初の画面が選択肢だけだと、質問を一覧で見たい人や、選択肢に当てはまらない人がそこで離脱します。
「すべての質問を見る」を、どのステップからでも押せるようにします。

質問の数が多く、結果にたどり着くまでが長い

4問、5問と続くと、答えている途中でやめてしまう人が増えます。
2〜3問を目安にし、それで分けきれない場合は、検索やカテゴリ分けとの組み合わせを検討します。
重要な違いを省いてまで質問を減らす必要はありません。

どの選択肢にも当てはまらない人の行き先がない

選択肢に自分の状況がないと、読み手は先に進めません。
「わからない」「その他」を用意し、その場合は候補を広めに表示します。
それでも見つからない場合は、すべての質問や問い合わせへ案内します。

前のステップに戻ると、結果が古いまま残る

ステップ1を選び直したのに、ステップ2の選択と結果が前のまま残ると、矛盾した結果が表示されます。
選び直したときは、それ以降の選択と結果を更新します。

0件になる組み合わせの行き先を用意していない

選択肢を組み合わせたときに、表示する質問がない組み合わせが残っていることがあります。
公開前にすべての組み合わせを通して0件になるものを確認し、質問を追加するか、近い質問・すべての質問・問い合わせのいずれかへ案内します。

よくある質問

選択肢はどう分ければいいですか?

問い合わせや質問の中身を見て、読み手によって答えが変わる境目を探します。
契約前か契約中か、個人か法人か、のように、選ぶと見える質問がはっきり変わる分け方が向いています。
どれを選んでも同じ質問が出る分け方は、選ぶ手間が増えるだけなので避けます。

同じ質問が複数の結果に出てもいいですか?

問題ありません。
「支払い方法を変えたい」のように、契約中の人にも解約を考えている人にも関係する質問は、両方の結果に表示します。
1つの質問を1か所にしか置けない作りにすると、必要な人に届かない質問が出てきます。

検索欄と一緒に置いてもいいですか?

置けます。
探す言葉をはっきり持っている人は検索、思いつかない人はステップ、と入り口を分けられます。
その場合は、どちらから探しても同じ質問と回答にたどり着くようにし、内容がずれないようにします。

カテゴリ分け型やプラン診断型と、どう違いますか?

カテゴリ分け型は、読み手が分野を1つ選んで質問を絞ります。
ステップ案内型は、状況と知りたいことを順に選び、その組み合わせで質問を絞ります。
料金表のプラン診断型は答えを原則1つのプランに絞りますが、ステップ案内型は該当する質問を複数表示し、読み手自身に選んでもらいます。

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開