Yes / No形式のチェックページを作る方法

この記事では、「ペットを飼う前に自分が本当に準備できているか」を簡単に診断できる Yes / No形式のチェックページをHTMLとJavaScriptだけで作る方法を紹介します。
クリックするだけで質問が進み、すべてYesなら「飼う準備が整っています！」と表示される仕組みです。

1 実装のポイント

質問文はJavaScript配列にまとめ、Yesを押すごとに次の質問に切り替わります。
すべてYesなら「飼う準備が整っています！」と表示され、Noを選ぶと「まだ準備が必要」とアドバイスされます。

2 functions.php にコードを追加

//-------------------------------------------
// Yes / No形式のチェックページ
//-------------------------------------------
function pet_diagnosis_shortcode() {
    ob_start(); ?>
    <div id="pet-diagnosis">
        <div class="question-box">
        <p id="question" class="question-text">あなたはペットを迎える準備ができていますか？</p>
        <button class="btn btn-yes" onclick="answer(true)">Yes</button>
        <button class="btn btn-no" onclick="answer(false)">No</button>
  </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('pet_diagnosis', 'pet_diagnosis_shortcode');

//-------------------------------------------
// 診断JSを読み込む
//-------------------------------------------
function enqueue_pet_diagnosis_script() {
    wp_enqueue_script(
        'pet-diagnosis',
        get_stylesheet_directory_uri() . '/js/yes-no-diagnosis.js',
        array(),
        false,
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_pet_diagnosis_script');

ウィジェット、記事内で表示する場合：

[pet_diagnosis]
  

3 javascript にコードを追加

ファイル名：yes-no-diagnosis.js
保存先：wp-content/themes/child-theme/js/yes-no-diagnosis.js

// --- 質問を配列で定義 ---
const questions = [
  "毎日きちんとお世話をする時間を取れますか？",
  "旅行などで家を空けるとき、世話を任せられる人がいますか？",
  "ペットの医療費や食費を継続して負担できますか？",
  "家族全員がペットを迎えることに賛成していますか？",
  "万が一、引っ越しや環境の変化があっても最後まで責任を持てますか？"
];

let current = 0; // 現在の質問番号

function answer(isYes) {
  const questionEl = document.getElementById("question");
  const box = document.querySelector(".question-box");

  if (isYes) {
    current++;
    if (current < questions.length) {
      questionEl.textContent = questions[current];
    } else {
      questionEl.textContent = "素晴らしいです！あなたはペットを迎える準備が整っています。";

      // すべてYes → ボタンを非表示
      document.querySelectorAll(".btn").forEach(btn => btn.style.display = "none");

      // 🐶 最後に「ペット用品を見る」ボタンを追加
      const shopBtn = document.createElement("a");
      shopBtn.href = "https://shopping.yahoo.co.jp/category/2509/recommend";
      shopBtn.textContent = "🐾 ペット用品を見る";
      shopBtn.target = "_blank"; // 新しいタブで開く
      shopBtn.rel = "noopener noreferrer";
      shopBtn.className = "btn btn-shop";

      // 質問ボックスの下に挿入
      box.appendChild(shopBtn);
    }
  } else {
    questionEl.textContent = "もう少し時間をかけて準備しましょう。ペットは家族です。";
    document.querySelectorAll(".btn").forEach(btn => btn.style.display = "none");
  }
}

3.1 ディレクトリ構造

4 汎用CSS

質問ボックスの背景色やボタンカラーを変えるだけで、犬用・猫用・うさぎ用などテーマに合わせた診断が作れます。

/* ------------------------------------------------
 * Yes / No形式のチェックページ
 * ---------------------------------------------- */

/* --- 質問ボックス --- */
.question-box { /* 質問全体を囲むボックス */
  max-width: 520px; /* 最大幅520pxに制限 */
  margin: 0 auto; /* ページ中央に配置 */
  border: 1px solid #e0c7a8; /* 枠線を淡いベージュに設定 */
  border-radius: 12px; /* 角を丸くして柔らかい印象に */
  padding: 35px; /* 内側の余白を広めに確保 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* ほんのり影をつけて立体感 */
  background: #fff; /* 背景を白に */
}

/* --- 質問文 --- */
.question-text { /* 質問文のテキスト部分 */
  font-size: 18px; /* 文字サイズを少し大きく */
  margin-bottom: 30px; /* 下に余白をつけて間隔を確保 */
  line-height: 1.6; /* 行間を少し広めにして読みやすく */
}

/* --- ボタン共通 --- */
.btn { /* Yes/Noボタン共通デザイン */
  display: inline-block; /* 横に並べて配置 */
  width: 140px; /* 幅を固定して統一感を出す */
  padding: 14px 0; /* ボタン高さを確保 */
  margin: 12px; /* ボタン間の余白 */
  font-size: 16px; /* 文字サイズを調整 */
  font-weight: bold; /* 太字で強調 */
  border: none; /* 枠線を消す */
  border-radius: 6px; /* 角を少し丸めて柔らかく */
  cursor: pointer; /* ホバー時にカーソルをポインターに */
  transition: 0.3s; /* ホバー時のアニメーションを滑らかに */
}

/* --- Yesボタン（グリーン） --- */
.btn-yes { /* Yesボタン用スタイル */
  background: #3cb371; /* ミントグリーンの背景色 */
  color: #fff; /* 白文字 */
}

.btn-yes:hover { /* ホバー時のYesボタン */
  background: #2e8b57; /* 濃い緑に変化 */
}

/* --- Noボタン（グレー） --- */
.btn-no { /* Noボタン用スタイル */
  background: #ccc; /* グレー背景 */
  color: #333; /* 文字色を濃いグレーに */
}

.btn-no:hover { /* ホバー時のNoボタン */
  background: #bbb; /* 少し濃いグレーに変化 */
}

/* --- 結果メッセージ --- */
.result { /* 判定結果テキスト */
  font-size: 20px; /* 大きめフォントで強調 */
  margin-top: 40px; /* 上に広めの余白 */
  font-weight: bold; /* 太字にして目立たせる */
  color: #3cb371; /* グリーン文字でポジティブに演出 */
}

/* --- ショップボタン（オレンジ・角丸控えめ） --- */
.btn-shop { /* 「ペット用品を見る」ボタン */
  display: inline-block; /* 横並びに対応 */
  background: #ff9800; /* オレンジ色の背景 */
  color: #fff; /* 白文字 */
  padding: 14px 30px; /* ボタン内余白をやや広めに */
  margin-top: 25px; /* 上の余白 */
  border-radius: 10px; /* 自然な角丸に修正（以前は30px） */
  text-decoration: none; /* 下線を消す */
  font-weight: bold; /* 太字で目立たせる */
  transition: 0.3s; /* ホバー時のアニメーション */
  box-shadow: 0 3px 8px rgba(0,0,0,0.15); /* ふんわり影を追加 */
}

.btn-shop:hover { /* ホバー時の変化 */
  background: #e68900; /* 少し濃いオレンジ */
  transform: translateY(-2px); /* 少し浮かせてクリック感を演出 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 影を強調 */
}

5 完成イメージ

6 代用プラグイン

プラグイン「HD Quiz」などでも作成可能ですが、HTML＋JSで作るとより軽く、表示も安定します。

7 まとめ

Yes/No診断は、ペットの飼育前チェック・家族の意識確認などに最適です。
WordPressの固定ページにこのHTMLを貼り付けるだけで、
すぐにインタラクティブな「ペット診断ページ」を公開できます🐾