診断チャートを作ろう
診断コンテンツとは
用意された質問に答えることで特定、または不特定の結果を出すユーザー参加型コンテンツのこと。
代表的なもので性格診断、キャラクター診断、適職診断など
認知目的だけでなく理解促進や購買誘導など様々な課題を解決できるツール
メリット・デメリット
ユーザーにとって最適な商品を紹介できる、ユーザーが自発的にSNSへシェアをすることが期待でき、商品やサービスの認知拡大が見込める
「自分を知りたい」という欲求をトよく刺激するため参加率が高くなる。また自己表現欲求も満たせるので拡散率が上がる
ブランドや商品の理解促進、購買誘導、またターゲットを理解できるといったマーケティングリサーチとしても活用できる。
コンテンツの種類
大きくわけると3種類
-
一問一画面形式
画面の中に一つの質問が表示。テンポよく回答できるため離脱率が少ない。
参考サイト
キャリタス就活と話題のディグラム・ラボがコラボした、自己診断コンテンツ https://quest.career-tasu.jp/
株式会社ポケモンセンターの採用サイトです https://recruit.pokemon.co.jp/pokemoncenter/special/
-
チェックシート形式
設問を一覧で掲示し、yes/noや当てはまる/当てはまらない/わからないなどの選択肢にチェックしてもらう形式。設問が多いときに活用される。
参考サイト
リクナビネクスト適職診断 https://next.rikunabi.com/01/tenshokushindan/sp/tenshokushindan_01.html
-
ステップ形式
一つの質問に答えると下に次の質問が表示される。回答の変更が可能。
参考サイト
16Personalities性格診断テスト https://www.16personalities.com/ja
結果の出し方は2種類
- フローチャート形式:回答に合わせて内容・結果が変わる
- 得点形式:固定の質問結果に点数をつけ、合計点から結果を出す
demoページ
実際に簡易ページを作成してみた
-
ステップ形式/得点式
demo 今すぐコーヒーを飲んだ方がいい? -
ステップ形式・一問一画面形式/得点式
demo コーヒー性格診断 -
一問一画面開式/フローチャート形式
demo あなたにオススメのコーヒー豆は?
参考サイト
-
jQuery入門
https://www.jquerystudy.info/sample/check/radio1.html -
YesNo診断のjQuery使ったテンプレート作った
https://blog.codelink.co.jp/entry/20170725/1500975079 - 選択させて結果的に答えが出る『心理テスト』型JS組んでみました
-
川野さんのTwitterより
https://twitter.com/yuma_lightup/status/1455888051922554886 -
SNSシェアボタンをオリジナルスタイルで設置する方法
https://tech.arms-soft.co.jp/entry/2021/01/27/090000 -
Chart.jsでレーダーチャートを作成する方法
https://tamatuf.net/tips/chart-js-radar/ -
css見出しデザイン21選
https://pulpxstyle.com/heading-design/ -
Pa-Tu | WEBパーツをカスタマイズしてコピペできる
https://pa-tu.work/ - amazonちょっとブラックなコーヒーの教科書/岩田リョウコ