MENU
泉大津市 デザイン全般、SEOに強いホームページ制作のデザインは全てお任せ！
  1. ホーム
  2. サイト制作
  3. 【改良版】コピペOK！簡単診断ツールを導入してサイトのコンテンツを充実化（HTML/JS）

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

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

2026/05/29
結果発表のセクションに自由にHTMLを記述できるコードに改良しました！

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

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

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

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

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

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

目次

サンプル

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

クリックでサンプルページへ移動
サンプルページはこちら

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

エラー出てたの修正しました！今は使えるはず！

あわせて読みたい
シンプルな診断コンテンツのサンプルページです 2026/05/29結果発表セクションを自由にHTMLで記述できるコードに改良しました。 こちらは１ページで完結できるお手軽な診断コンテンツのサンプルページです。 選択肢に…

コード紹介

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

inputにあるvalueの数値が得点になっていて、選択された得点の合計数に応じて、表示させる回答を分岐させているという仕組みです。

使用するコード: 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>

<section id="resultArea">

    <h2>診断結果</h2>

    <div class="resultText"></div>

</section>

使用するコード：Java Script

jQueryは使っていません。純粋なバニラjsです。
個別に表示させたい画像は絶対パスで入力してください（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;
    }

    // 結果HTML
    let resultHTML = '';

    if (totalScore <= 3) {

        resultHTML = `
            <div class="result-box">
                <img src="〇〇.png" alt="">
                <h3>あなたは内向的タイプです。</h3>
                <p>
                    あなたは落ち着いた性格で、
                    一人の時間を大切にするタイプです。
                </p>
            </div>
        `;

    } else if (totalScore <= 5) {

        resultHTML = `
            <div class="result-box">
                <img src="〇〇.png" alt="">
                <h3>あなたはバランスタイプです。</h3>
                <p>
                    状況に応じて柔軟に対応できるタイプです。
                </p>
            </div>
        `;

    } else if (totalScore <= 7) {

        resultHTML = `
            <div class="result-box">
                <img src="〇〇.png" alt="">
                <h3>あなたは外向的タイプです！</h3>
                <p>
                    人との交流を楽しめるエネルギッシュなタイプです。
                </p>
            </div>
        `;

    } else {

        resultHTML = `
            <div class="result-box">
                <img src="〇〇.png" alt="">
                <h3>あなたは超社交的タイプです！</h3>
                <p>
                    周囲を巻き込むカリスマ性があります。
                </p>
            </div>
        `;
    }

    // HTMLとして出力
    document.querySelector('.resultText').innerHTML = resultHTML;

    // スクロール
    document.getElementById('resultArea').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;
}

.result-box{
    padding: 30px;
    border-radius: 20px;
    background: #fffcde;
}

いかがでしょうか？自分で作ってみると案外楽しいですよね。

結果の下にCTAエリアをつけたりして、問い合わせフォームやエントリーフォームに誘導する使い方もできそうです。

WordPressに組み込む場合

WordPressに組み込みたい場合は、HTMLは カスタムHTMLブロックを利用して挿入します。
最新のWordPressであればHTML/CSS/JSをまとめて1つのブロックに記述でき、プレビューも見ることができます。

また、コードはプラグインを利用してJSを追加する方法もあります。
たとえば私はいつもSimple Custom CSS and JSというプラグインを使用しています。
jsは、フッターの位置に入れるようにしてください。

コード追加におすすめのプラグイン

WordPress.org 日本語
Simple Custom CSS and JS 最高のエディタで、ウェブサイトに独自の CSS や JS を簡単に追加できます。

デザイン作るの難しい〜！と感じたら

デザイン・ホームページで

お困りのことがありましたら、
私たちクートスラボにご依頼ください！
実績多数の女性クリエイターチームが、
どんなお悩みも解決します。

＼ 見積もり・ご依頼はこちら！ ／

メールでお問い合わせ
LINEでご連絡はこちら
サイト制作
シェアお願いします！
  • URLをコピーしました！
目次