サイト上に診断チャートを設置する

設問にはい・いいえで答えていく診断チャートを作成する方法です。

上のような画像を貼りつける方法もありますが、これだとスマホで見た際に小さくなりすぎるのであまりよくありません。
設問が画面に1つずつ表示され、答えると次の設問へ…というような形にしたいです。
イメージ的にはこんな感じ。

ムーミンキャラクター診断

完成品はこちら

爬虫類分類チャート

割と良い感じにできたと思います。

作り方

WordPressであればYes/No Chartというプラグインを使って簡単に実装できます。
詳しい使い方はこちら。

Yes/Noチャート作成ツール：WordPressプラグイン｜ホームページ制作・札幌｜コーセイワークス【魅力発信で集客と売上アップ】

有料の拡張機能もありますが、今回作ったような簡単なチャートであれば無料版で十分です。
デザインはCSSでどうにでもなるので、ボタンスタイルやカラーバリエーションのために課金するのはもったいない。

こんな風に使おう！

占い・診断
まぁよくある感じのやつです。
コンテンツとしてはありふれているので、いかにテーマで個性が出せるかが重要。

顧客のニーズにあわせたおすすめ商品の提示
ECサイトであればこういう使い方もできそう。
デザイン性重視・実用性重視など。

トラブルシューティングに活用
問題の原因を探す・解決方法を提示する。
電源は入っていますか？○○にチェックは入っていますか？など。