コピペOK！簡単診断ツールを導入してサイトのコンテンツを充実化（HTML/JS）

2025年3月3日

当サイトには広告が含まれています。

こんにちは。今回はHTMLとJSで、比較的簡単に導入できる診断ツールの作り方を紹介します。診断ツールとは、いくつかの設問に対してはい、いいえなど簡単な回答をして、最後に診断ボタンを押すと、その回答に応じて結果が分岐、表示されるというものです。

どういったことに活用できるかというと、

性格タイプ診断
お仕事適正チェック
占い、可能性チェック
あなたにおすすめの商品はこちら（どれを選んだらいいか迷ってる見込み客に対して）

など、サイトのコンテンツに彩りを添えてくれる楽しいツールです。

採用専門ページなどに組み込んだりして、はいが多い人はうちにぴったりだよ！応募してね！的な使い方ができますよ。ぜひ活用してみてください。

この仕組みでは回答をサーバーに送信して統計を取ったりは出来ません。あくまでお楽しみコンテンツの一つです。

サンプル

実際のサンプルは別ページでご覧ください

質問が8問、選択肢は3つ、分岐パターン4つでサンプルを作ってみましたので一度ご覧ください。

コード紹介

HTMLとJSで作ります。CSSはお好みで。

使用するコード: HTML

HTML

<form id="personalityTestForm">
    <!-- 質問リスト -->
    <div class="question">
        <p>1. 新しい環境にすぐ慣れるほうだ</p>
        <input type="radio" id="q1_yes" name="q1" value="2">
        <label for="q1_yes">はい</label>

        <input type="radio" id="q1_no" name="q1" value="0">
        <label for="q1_no">いいえ</label>

        <input type="radio" id="q1_neutral" name="q1" value="1">
        <label for="q1_neutral">どちらでもない</label>

        <p class="error-message"></p>
    </div>

    <div class="question">
        <p>2. 人と話すのが好きだ</p>
        <input type="radio" id="q2_yes" name="q2" value="2">
        <label for="q2_yes">はい</label>

        <input type="radio" id="q2_no" name="q2" value="0">
        <label for="q2_no">いいえ</label>

        <input type="radio" id="q2_neutral" name="q2" value="1">
        <label for="q2_neutral">どちらでもない</label>

        <p class="error-message"></p>
    </div>

    <div class="question">
        <p>3. 一人でいるのが好きだ</p>
        <input type="radio" id="q3_yes" name="q3" value="0">
        <label for="q3_yes">はい</label>

        <input type="radio" id="q3_no" name="q3" value="2">
        <label for="q3_no">いいえ</label>

        <input type="radio" id="q3_neutral" name="q3" value="1">
        <label for="q3_neutral">どちらでもない</label>

        <p class="error-message"></p>
    </div>

    <!-- 追加の質問 -->
    <div class="question">
        <p>4. グループでの活動が好きだ</p>
        <input type="radio" id="q4_yes" name="q4" value="2">
        <label for="q4_yes">はい</label>

        <input type="radio" id="q4_no" name="q4" value="0">
        <label for="q4_no">いいえ</label>

        <input type="radio" id="q4_neutral" name="q4" value="1">
        <label for="q4_neutral">どちらでもない</label>

        <p class="error-message"></p>
    </div>

    <div class="question">
        <p>5. 計画を立てて行動するのが得意だ</p>
        <input type="radio" id="q5_yes" name="q5" value="2">
        <label for="q5_yes">はい</label>

        <input type="radio" id="q5_no" name="q5" value="0">
        <label for="q5_no">いいえ</label>

        <input type="radio" id="q5_neutral" name="q5" value="1">
        <label for="q5_neutral">どちらでもない</label>

        <p class="error-message"></p>
    </div>

    <div class="question">
        <p>6. 突発的な出来事に柔軟に対応できる</p>
        <input type="radio" id="q6_yes" name="q6" value="2">
        <label for="q6_yes">はい</label>

        <input type="radio" id="q6_no" name="q6" value="0">
        <label for="q6_no">いいえ</label>

        <input type="radio" id="q6_neutral" name="q6" value="1">
        <label for="q6_neutral">どちらでもない</label>

        <p class="error-message"></p>
    </div>

    <div class="question">
        <p>7. 創造的なことが好きだ</p>
        <input type="radio" id="q7_yes" name="q7" value="2">
        <label for="q7_yes">はい</label>

        <input type="radio" id="q7_no" name="q7" value="0">
        <label for="q7_no">いいえ</label>

        <input type="radio" id="q7_neutral" name="q7" value="1">
        <label for="q7_neutral">どちらでもない</label>

        <p class="error-message"></p>
    </div>

    <div class="question">
        <p>8. 他人の気持ちをよく考える</p>
        <input type="radio" id="q8_yes" name="q8" value="2">
        <label for="q8_yes">はい</label>

        <input type="radio" id="q8_no" name="q8" value="0">
        <label for="q8_no">いいえ</label>

        <input type="radio" id="q8_neutral" name="q8" value="1">
        <label for="q8_neutral">どちらでもない</label>

        <p class="error-message"></p>
    </div>

    <button type="button" onclick="calculateResult()">診断する</button>
</form>

<h2 id="resultTtl">診断結果</h2>
<p id="resultText"></p>
<img id="resultImage" src="" alt="">

使用するコード：Java Script

個別に表示させたい画像は絶対パスで入力してください（https://から始まる）

PHP

function calculateResult() {
    const form = document.getElementById('personalityTestForm');
    let totalScore = 0;
    let allAnswered = true; // 全て選択されたかチェック
    const questions = form.querySelectorAll('.question');

    questions.forEach((question, index) => {
        const selectedAnswer = question.querySelector(`input[name="q${index + 1}"]:checked`);
        const errorMessage = question.querySelector('.error-message');

        if (!selectedAnswer) {
            errorMessage.textContent = '選択してね！';
            errorMessage.style.color = 'red';
            allAnswered = false;
        } else {
            errorMessage.textContent = '';
            totalScore += parseFloat(selectedAnswer.value);
        }
    });

    if (!allAnswered) {
        return; // 未選択の質問がある場合、診断を実行しない
    }

    // 結果の分岐（スコアに応じて）
    let resultText = '';
    let imagePath = '';

    if (totalScore <= 3) {
        resultText = 'あなたは内向的な性格タイプです。';
        imagePath = '●●●ここに表示させたい画像のパスを入力●●●';
    } else if (totalScore <= 5) {
        resultText = 'あなたはバランスの取れた性格タイプです。';
        imagePath = '●●●ここに表示させたい画像のパスを入力●●●';
    } else if (totalScore <= 7) {
        resultText = 'あなたは外向的な性格タイプです。';
        imagePath = '●●●ここに表示させたい画像のパスを入力●●●';
    } else {
        resultText = 'あなたは非常に社交的な性格タイプです。';
        imagePath = '●●●ここに表示させたい画像のパスを入力●●●';
    }

    // 結果表示
    document.getElementById('resultText').textContent = resultText;

    // 画像表示
    const resultImage = document.getElementById('resultImage');
    resultImage.src = imagePath;
    resultImage.alt = resultText;
    resultImage.style.display = 'block';

    // 診断結果のエリアまでスクロール
    document.getElementById('resultTtl').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

おまけCSS

CSS

#personalityTestForm .question p {
    font-weight: bold;
    font-size: 18px;
    margin: 22px 0 5px 0 !important;
}

#personalityTestForm button {
    margin: 1.5rem auto;
    background: #e0048c;
    color: #FFF;
    border-radius: 10px;
}

#personalityTestForm p#resultText {
    font-weight: bold;
    font-size: 20px;
    color: #044ae0;
}

#personalityTestForm img#resultImage {
    width: 30%;
    margin: 1.5rem 0;
}

#personalityTestForm .question input[type="radio"] {
    opacity: 0;
    position: absolute;
}

#personalityTestForm .question label {
    margin-right: 20px;
    display: inline-block;
    padding: 5px 10px;
    border: 2px solid #fad1ff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    background-color: #fff;
    transition: all 0.3s;
}

#personalityTestForm .question input:checked + label {
    background-color: #f2c9ff;
}