FV-009 公開  更新

診断開始型 ファーストビュー

ページを開いて最初に見える画面に質問の1問目を置き、答えていくと合うコースやプランが分かるファーストビューの設計です。
質問の数と進み具合を示し、前の質問に戻って選び直せるようにします。
結果には選んだ回答を理由として添え、診断をしない人のための一覧への入口も用意することで、自分に合うものが分からない人を最初の画面から次の行動へ進めます。

ワイヤーフレーム(PC)

診断開始型 ファーストビュー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

診断開始型 ファーストビュー SP版ワイヤーフレーム

SP版の特徴

  1. 診断の枠は説明の下に:左右に並べると質問と選択肢が窮屈になるため、説明のあとに診断の枠を置いています。
  2. 選択肢は横いっぱい:指で押しやすい大きさにし、補足の説明も読めるようにしています。
  3. 一覧への入口は枠の下に:診断を始める人の邪魔をせず、診断しない人も行き先が分かるようにしています。
  4. 1問目を早く見せる:見出しと説明を短くまとめ、最初の選択肢まで早くたどり着けるようにしています。

採用前の判断ポイント

向いているケース

  • コースやプランが複数あり、読み手が自分に合うものを判断しにくい
  • いくつかの質問に答えてもらえば、案内する行き先が決まる
  • 目的・レベル・使える時間など、読み手の状況で合うものが変わる
  • スクール、SaaSのプラン選び、サービスのコース案内など

向かないケース

  • 立場や相談内容を1つ選べば、行き先が決まる(入口分岐型が向きます)
  • 読み手が、探したい条件を決めて来ることが多い(目的入力型が向きます)
  • 選べるコースやプランが1〜2つしかない(質問に答えるより、並べて比べたほうが早く決まります)

このワイヤーの特徴

自分に合うものが分からない人も、最初の画面から選び始められる

コースやプランがいくつもあると、どれが自分に合うのか分からず、比べる前に離れてしまう人がいます。最初の画面に質問の1問目を置き、答えていくだけで合うものにたどり着けるようにしています。

質問の数と、今どこまで進んだかが分かる

質問の数や終わりが分からないと、どこまで続くのか判断しにくくなります。見出しで「3つの質問」と数を示し、質問の上に「質問 1 / 3」と進み具合の表示を置いています。

前の質問に戻って、選び直せる

選んだあとで別の答えにしたくなることもあります。2問目以降は「前の質問に戻る」を置き、結果のあとも「選び直す」で最初からやり直せるようにしています。

結果に、回答とのつながりが分かる理由が添えられる

結果だけが表示されると、なぜそれが合うのかが分からず、納得しにくくなります。結果には、どの回答がどの条件に合ったのかを短い文で示し、その下に選んだ回答(目的・レベル・時間)を並べています。
回答をそのまま並べるだけでなく、結果とのつながりが分かるようにするためです。

診断をしない人にも、行き先がある

すでに比べたいコースが決まっている人にとって、質問は遠回りになります。「診断せずにコース一覧を見る」を見出しの近くに置き、結果の画面にも「ほかのコースと比べる」を用意しています。

制作時のよくある失敗

質問がいくつあるか分からず、終わりが見えない

何問続くのか分からないと、どこまで続くのか判断しにくくなります。
質問の数が決まっている場合は最初に数を示し、進み具合を表示します。
回答によって質問の数が変わる場合は、実際と違う総数を出さず、今どこにいるかが分かる表示にします。

結果を見る前に、メールアドレスや電話番号を求める

結果を見るために個人情報の入力が必要だと、多くの人がそこでやめてしまい、診断への信頼も損ないます。
結果はその場で表示し、資料の送付や相談の申し込みは、結果のあとに任意で案内します。

結果の理由が分からない、または高いものばかり勧める

理由のない結果や、どの答えでも上位のプランが出る診断は、読み手に見抜かれます。
どの回答がどの条件に合ったためにこの結果になったのかを短く示し、回答に合ったものを案内します。

前の質問に戻れない

戻れない診断では、答えを間違えたときに最初からやり直すしかありません。
前の質問に戻れるようにし、戻ったときは前に選んだ答えを分かるようにします。

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

選択肢が読み手の状況に合わないと、無理に近い答えを選ぶか、そこで離れるしかありません。
必要な質問では「まだ決めていない」「分からない」「どちらでもよい」など、無理に選ばなくてよい選択肢を用意します。

よくある質問

質問はいくつにすればよいですか?

質問は、結果を決めるために必要な数に絞ります。
このワイヤーでは3問を例にしています。
質問を増やす場合も、結果に影響しない質問は入れないようにします。

プラン診断型の料金表や、ステップ案内型のFAQとは何が違いますか?

考え方は近く、質問に答えて合うものを案内する点は共通しています。
この型は、最初の画面から診断を始めてもらうことに重点を置いています。
料金表の中でプランを選んでもらう場合はプラン診断型の料金表、よくある質問を絞り込む場合はステップ案内型のFAQが向きます。

結果を見るときに、メールアドレスの登録を求めてもよいですか?

結果を見るための条件にするのは避けたほうが安全です。
結果はその場で表示し、詳しい資料の送付や無料体験の申し込みを、結果のあとに任意で案内します。
個人情報を受け取る場合は、利用目的を送信前に分かるように示します。

質問が切り替わったときの読み上げは、どうすればよいですか?

同じ画面の中で質問が切り替わる場合は、新しい質問の見出しへフォーカスを移し、「質問 2 / 3」のように進み具合も伝わるようにします。
結果を表示したときは、結果の見出しへフォーカスを移します。

同じパーツのPattern

ファーストビューの型の選び方と一覧を見る

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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