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/