初心者でも簡単！イエス・ノーチャートの作り方と活用アイデア

この記事はぽんひろさんの【診断に使える】Yes・Noチャートの補足です。

記事では
・ぽんひろさんの記事だけでは、あとちょっとわからない…
・YesNoチャートの質問が思いつかない
・ChatGPTを使って効率よく作成したい
という悩みを解決します。

イエス・ノーチャートは、質問に「はい」「いいえ」で答えるだけで最適な結果に導ける便利なツール。▼コレ▼

ブロガー方の中には導入したいけど、やり方がわからない、という人も多いのではないでしょうか？

私もその一人で、ぽんひろさんの記事を見ながら試行錯誤して、何時間もかけて作りました。

読んだ方が少しでも時短になるように『つまづきポイント』や『ChatGPTの活用法』についてお伝えします。

イエス・ノーチャートの作り方ステップ

YedNoチャートには商材やブログにあった質問チャートが必要です。

こういう思考する仕事はChatGPTが大活躍！

ステップ1｜ゴールを決める

まず最初に、チャートの「ゴール（結果）」を明確にします。
「ゴール」は今回【紹介したい商材】にします。

例）スポーツジムのブログを書いていて、ユーザーにベストなスポーツジムを紹介したい。

商材は、RIZP、BEYOND、Chicken Gymの3つ。

ステップ2｜質問を設計する・チャート化【ChatGPT活用】

次に、「YES／NO」で答えられる質問を組み立てていきます。

ここではChatGPTを使って、「質問案」や「質問の流れ」のたたき台を作ります。

プロンプト例
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

ダイエットに関するYesNoチャートを作ります。
ゴールの商材は以下の３つです。
設問は３つでお願いします。
必ず３つ回答して答えを出すようにしてください。
商材
① ライザップ【https://www.rizap.jp】
② BEYOND【https://beyond-gym.com】
③ Chicken　Gym【https://chicken-gym.jp】

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・「設問は３つ」…読者に気軽に回答していただきたいので、３問にしました。

・「必ず３つ回答して答えを出すように」…全部で３問！など、文章を入れたいときはこの１文必要です。でないと、２問目で回答がでるチャートができてしまいます。

ChatGDPから以下のような回答が来ました。

これで質問とイエス・ノーチャートの流れができました。

納得いかないときには、この時点で何度もChatGPTとやりとりをしましょう。

作成する方法（HTML・ブログ埋め込み編）

コードはぽんひろさんの記事をフル活用させていただきます。

ぽんひろさんの記事はコチラ

コードを貼る

イエス・ノーチャートをWeb上で実装するには、HTML／CSS／PHP／の知識が必要になります。

先にそれぞれがどんなことをしているのかを知っておくと、触りやすので簡単に解説します。

CSS：見た目を整えるスタイルを定義します。ボタンや選択肢、遷移のアニメーションなどが含まれます。

PHP：WordPress環境で動かす際に、診断結果を処理するバックエンド的役割を果たします。静的サイトなら不要ですが、柔軟に作りたい場合は活用しましょう。

HTMLは自分用にカスタマイズ【ChatGPT活用】：質問文・選択肢・結果などの構成要素を、自分のコンテンツに合わせて編集します。

コードの貼り方

①CSS

ぽんひろさんの記事のコードをまるっとコピーして、追加CSSに貼ります。

SWELLであれば、外観＞カスタマイズ＞追加CSS

実際の画面

ペタッと貼り付けてCSS完了！

②PHP

と書かれていますので、⚠️必ずバックアップをとって行ってください。

私は、「Code Snippets」というプラグインを入れて、PHPのコードを貼りました。

「Code Snippets」を入れ、有効化すると、管理画面の左に「スニペット」がでてきます。

スニペット＞上部の【新規追加】＞【PHP】を選択＞ぽんひろさんのPHPのコードを貼る。＞【変更を保存】これでPHP完了！

③HTML

ぽんひろさんのHTMLコードを基本に、一番始めに作成した自分用質問チャートにカスタマイズします。

ChatGDPに以下のようにお願いします。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

以下の質問チャートになるように、コードをカスタマイズして。
・先ほど作った質問を貼る（長いので略）
・ぽんひろさんのコードを貼る（長いので略）
＊このときにコピーするコードはぽんひろさんの記事の一番下にある一番長いコードです。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

＊ここで、作成したコードを記事に【カスタムHTML】で貼ってみて動きを確認してください。必ずプレビュー画面をチェック！

⚠️SWELLの場合
swell設定＞jQueryを強制的に読み込む　にチェックを入れる。

【私の困ったポイント！】

これは、記事を参考に進めていって、わたしがつまづいたところです。

1️⃣質問が1問ずつではなくて、一度にでてくる😭。

原因は、ChatGDPで書き換えた際に、余計な文章が追加されてしまっているからでした。
質問１にはココがいるのですが、質問２以降はこの【class="yn-chart__display"】が不要。
質問２以降の問の【class="yn-chart__display"】をすべて消すと

こうなります👏✨️

2️⃣画像の挿入方法がわからない！

【img タグ】のところに画像を入れればいいんだろうけど、よくわからない…。やり方調べました！！

①WordPress管理画面＞メディア＞メディアファイルを追加＞使う画像を入れる

②メディアファイルの使いたい画像をクリック＞URLをコピー
＊これで、画像のURLを取得できます。

ただし！以下のようにimgタグのところに画像URLを貼り付けるだけではダメです。

<figure>imgタグ</figure>　⇒　<figure>画像URL</figure>

以下のようなコードが必要です。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

<figure>
<img src="画像URL1.jpg" alt="マンツーマンサポート">
</figure>
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

コードの意味を解説すると、

画像を入れたいときには、コレを覚えておくと便利！
【imgタグ】と書かれているところはもれなくこのコードを使って画像を挿入します。

おつかれさまでした👏👏👏✨️

コレで完成です！👏👏👏✨️

もっとカスタマイズしたい方はChatGDPと相談しながらバージョンアップしてみてください。

実例紹介｜イエス・ノーチャート使い所！

やればできるので、ランキング記事・比較記事を作成しているブロガーの方なら、誰もでも挑戦してみる価値があると思います！

以下のような場面で使えます！

子育て・教育向けの例（教材診断など）

・どの英語教材が合う？
・幼児におすすめの知育玩具は？

商品診断・サービス選びの例（おすすめ診断）

・どの転職エージェントが合う？
・家電の延長保証は必要？

業務フローや意思決定に使える例（社内ツール）

業務効率化やトラブル対応フローにも活用できます。たとえば「社内PCの不具合診断チャート」など、応用可能です。

まとめ｜イエス・ノーチャートは誰でも作れる！

イエス・ノーチャートは、コードが全然わからなくても、優秀な方のテンプレートを使えば、初心者でも作成可能です。ぽんひろさんに感謝です✨️

ChatGPTを活用することで、HTMLや画像の作成も効率的に行えます。

ChatGPT様々です。

もし、上手く動かないときにはコード全部ChatGPTに渡して、「質問が1つ1つ出ないんだけどこのコードどこが間違っている？」などと具体的に聞くと、結構いい答えがかえってきます。

ブログや業務、教育現場など、幅広い場面で使えるこのチャート。

やってみたいと思っていた人はぜひ挑戦してみてください✨️