CEFR語彙力診断テストをHTML/CSS/JavaScriptで自作した話（A1〜C1+対応の20問クイズ）

英語学習サービスを運営する中で、
「語彙力をサッと測れる簡易テスト」があると便利だと思い、
HTML/CSS/JavaScriptだけでCEFRベースの語彙診断ツールを自作しました。

この記事では、

🎯 作ったものの概要
🏗 実装構成
🧠 クイズロジック
🎨 UIデザイン
🔊 効果音の実装
💡 作ってみてのポイント

をまとめています。

📌 作ったもの

👉 英語の語彙レベル（A1〜C1+）を20問の4択クイズで診断するWebアプリ

問題数：20問
- A1〜C1+（10レベル×2問ずつ）
内容：
英単語 → 日本語訳を4択で回答
制限時間：1問 5秒
結果：正答率からCEFR換算した推定レベルを表示
実装：完全フロントエンド（HTML/CSS/JSのみ）
スマホ最適化済み
正解/不正解で効果音も鳴る（correct.mp3 / wrong.mp3）

🚀 デモ（GitHub Pages / Netlify）

🗂 プロジェクト構成

├── index.html
├── style.css
├── script.js
├── correct.mp3
└── wrong.mp3

非常にシンプルな構成です。

🧠 実装ポイント

問題データはJSで定義

CEFRごとに10単語ずつ用意し、そこからランダムに2問ずつ出題します。

const wordList = {
  A1: [...10 words...],
  A1plus: [...],
  A2: [...],
  ...
  C1plus: [...],
};

問題生成：

function pickQuestions() {
  const levels = Object.keys(wordList);
  let result = [];

  levels.forEach(level => {
    const shuffled = [...wordList[level]].sort(() => Math.random() - 0.5);
    result.push(shuffled[0], shuffled[1]); // 2問ピック
  });

  return result.sort(() => Math.random() - 0.5); // 全体シャッフル
}

制限時間5秒のタイマー

let timer;
let timeLeft = 5;

function startTimer() {
  timeLeft = 5;
  timerValue.textContent = timeLeft;

  timer = setInterval(() => {
    timeLeft--;
    timerValue.textContent = timeLeft;

    if (timeLeft <= 0) {
      clearInterval(timer);
      handleTimeUp();
    }
  }, 1000);
}

効果音の追加

HTMLに追加：

<audio id="se-correct" src="correct.mp3" preload="auto"></audio>
<audio id="se-wrong" src="wrong.mp3" preload="auto"></audio>

JS側：

const seCorrect = document.getElementById("se-correct");
const seWrong = document.getElementById("se-wrong");

function playSE(audioElem) {
  audioElem.currentTime = 0;
  audioElem.play().catch(() => {});
}

使用例：

if (isCorrect) playSE(seCorrect);
else playSE(seWrong);

CSSは他の診断シリーズと共通デザイン

dictation-test（別の診断ツール）と同じ世界観になるように、
CSSの色・影・角丸・余白を統一しました。

例：

:root {
  --accent: #3B82F6;
  --accent-dark: #2563EB;
  --bg: #f7f9fc;
  --white: #fff;
  --border: #e2e8f0;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

ボタンも完全共通化：

.btn.primary {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
}

結果判定ロジック

正答率を CEFR にマッピング。

function judgeCEFR(scoreRatio) {
  if (scoreRatio <= 0.05) return "A1";
  if (scoreRatio <= 0.15) return "A1+";
  if (scoreRatio <= 0.30) return "A2";
  if (scoreRatio <= 0.45) return "A2+";
  if (scoreRatio <= 0.60) return "B1";
  if (scoreRatio <= 0.75) return "B1+";
  if (scoreRatio <= 0.85) return "B2";
  if (scoreRatio <= 0.92) return "B2+";
  if (scoreRatio <= 0.97) return "C1";
  return "C1+";
}

🔧 開発で意識したこと

◆ フロントだけで完結する

サーバー不要なので GitHub Pages / Netlify ですぐ公開できます。

◆ スマホでの可読性・操作性

学習者の多くがスマホで使うため、
ボタンサイズ、余白、タップ領域を最適化。

◆ 問題の順番や選択肢が毎回変わる

「覚えてしまう」問題が起きないようにシャッフル処理を徹底。

◆ 制限時間の緊張感

語彙力は「即時認識」が求められるため、
あえて1問5秒にしています。

🔮 今後のアップデート候補

GA4 でユーザーの回答傾向を可視化

問題データをさらに拡充

CEFR別の弱点分析

ユーザーの履歴を保存できるバージョン

ラーニングプラン自動提案

📝 まとめ

CEFRに基づく語彙力診断を完全フロントエンドで簡単に実装できました。

HTML/CSS/JS だけで作れる
スマホファースト
CEFRレベルも即判定
学習者へのフィードバックとして非常に便利

英語学習プロダクトを作っている人、教育系Webツールを作りたい人に参考になれば嬉しいです。
https://english-vocabulary-test.netlify.app/