BLOG
第1回_診断コンテンツを作ってみよう！
INDEX
こんにちは、evoworxの山本です。
最近の診断系のコンテンツをよく見かけるので、自分でも作ってみたい！
と思い立ち、この場をお借りして皆さんと一緒に勉強していきたいと思います。
記事を何個かに分けて診断アプリの作成をしていくので、お付き合いいただけましたら幸いです。
初めましての第1回目は、基本的なことをまとめていきたいと思います。
内容としては、診断アプリの実装ロジックや見た目の形式、おすすめの診断サイトの紹介を行います。
実装については次回のブログから行っていきたいと思います。
よろしくお願いいたします。
診断のロジック
診断コンテンツを作成する上で欠かせない考え方について紹介します。
ここをクリアにしておくことで、実装のハードルを大幅に下げることができるかと思います。
というのも、いきなり診断コンテンツを作りたいと思っても、実際どのような仕組みを使って診断したらいいのか分からないですよね。
この診断コンテンツを作るロジックは2種類あって、「フローチャート型」と「得点形式型」があります。
フローチャート型
ひとつ目はフローチャート型です。
こちらの考え方としては、条件分岐によって分岐した数分だけの質問を用意して診断をしていく方法になります。
例えば全10問ある質問に対して、回答がそれぞれに5種類あるとします。
その場合、10の5乗で100,000通りの診断が必要になってきます。
しっかりとした診断が出来ると思いますが、あまり現実的ではありませんよね。
そこで登場してくるのが、次に紹介する得点形式型です。
（ただ、質問個数とそれに対応する回答数が少ないコンテンツの場合は有効的な手法だと思います。）
得点形式型
こちらが今回の本命です。
質問内容に対しての回答に点数を設定して採点を行い、合計点によって診断を行う方法になります。
一見するとシンプルな診断しか出来なそうに感じますが、採点の項目を複数に分けることでそれなりに複雑な診断を行うことが出来そうだと思いました。
また、ひとつ目のフローチャート式の方法に比べてロジックが飛躍的に簡単になるので、実装のハードルが下がります。
診断の形式
次は診断の形式です。
こちらは、実際の回答していく際の見た目に関わるお話です。
全部で、3種類紹介しますが、どの種類にもメリットとデメリットがあると思うので
実際に使用するユーザーに合わせて形式を選択するのが一番望ましいかと思います。
一問一答形式
画面に表示される1つの質問に対して、テンポ良く次々と回答していく形式です。
個人的には、WEBサイトと一番親和性が高くモダンな実装を求められる場合に一番適している形式かと思います。
チェックシート形式
こちらは、病院の問診票などでよく見るような形式です。
複数の質問が一度に確認できるので、事務的なイメージですが、どんな質問があるのか分からない、いつ終わるのか分からない、という
ストレスが無いというメリットもあっていいと思います。
ステップ形式
こちらは、先に紹介した2つのハイブリッドのイメージです。
形式的には、チェックシートと同じ形を取りますが、回答するごとに質問が表示されていく点が異なります。
条件分岐によって質問内容を変更したい場合などに有効な形式かと思います。
おすすめの診断サイト
筆者が診断コンテンツに興味を持つきっかけになったサイトを紹介させていただきます。
今後、実際に診断コンテンツを実装する際のモチベーションになるのでお付き合いください。
美容分析 | FUJIMI（フジミ）
筆者が診断アプリに興味を持つきっかけになったサイトです。
自分の肌質に合わせてカスタマイズが出来るコンセプトと診断アプリを組み合わせることで
「こんなにオンリーワン感」があるサービスを作れるんだなと感動したのを覚えています。
デザインやイラストもシンプル、エモい雰囲気でまさに今っぽいサービスです。
サプリの1つ1つに、特性があるので、カスタム感がより際立ちます。
株式会社ポケモンセンター | 採用サイト | ポケモン自己分析
診断コンテンツと採用サイトを組み合わせたサービスです。
ポケモンとの相性抜群なサービスに仕上がっていて、自分の好きなポケモンが表示されるまで診断したい、と思ってしまう程の中毒性があります。
診断内容も内容が濃く、診断結果を友人と共有したくなる、最高のサービスだと思います。
MEDULLA（メデュラ）
自分の髪質診断に合わせて商品を紹介してくれるサービスです。
色々なシャンプーがある中で、何を買っていいのかが分からないお客さんにとって
シンプルに課題解決に繋がる、素晴らしいサービスだと思います。
まとめ
以上が、診断コンテンツを制作する際の前知識になります。
今後は、このロジックをもとにVue.jsを使用して実際に診断アプリを実装していきたいと思います。
次回もよろしくお願いいたします。
