AI文字数カウンターをJavaScriptで作る方法【読みやすさスコア・SEO分析付き】

2026年6月5日

Codex / Claude Code

前回の記事で公開した「AI文字数カウンター」は、テキストを入力するだけで文字数・読了時間・文字種別・読みやすさスコア・SEO分析・SNS制限チェックまでリアルタイムで一括分析するツールだ。

この記事では、そのAI文字数カウンターをHTML・CSS・JavaScriptの単一ファイルで作る方法を解説する。外部ライブラリなし、コピペで動く実装コード付き。

目次 [ close ]

完成イメージと機能一覧

完成したツールは以下の機能を持つ。

リアルタイム文字数カウント：総文字数、スペース除く、改行除く、UTF-8バイト数
単語数・段落数・行数・文数：日本語・英語両対応
読了時間推定：日本語（400字/分）、英語（200語/分）
文字種別の内訳：ひらがな・カタカナ・漢字・英字・数字・記号をプログレスバーで可視化
読みやすさスコア：平均文長と漢字比率から100点満点で採点
SEO分析：タイトル文字数、メタディスクリプション、キーワード密度チェック
SNS文字数チェック：X（140文字）、Instagram（2200文字）、YouTube説明（5000文字）
コピー＆クリア：ワンクリック操作

すべてクライアントサイドのJavaScriptで動作し、サーバーにデータを送信しない。プライバシーに配慮した設計だ。

設計方針

このツールの設計方針は3つだ。

単一ファイル：HTML・CSS・JavaScriptを1つのHTMLファイルに収める。外部依存なし
リアルタイム更新：textareaのinputイベントで即座に全カウントを更新する
ダークテーマ＋ガラスモーフィズム：背景色 #0f0f23、backdrop-filter で透明感を演出

HTML構造

HTMLの構造はシンプルだ。大きく分けて4つのセクションで構成する。

ヘッダー：ツール名とサブタイトル
テキスト入力エリア：textareaとコピー・クリアボタン
クイック統計バー：文字数・単語数・読了時間などの主要数値
分析カードグリッド：文字種別、読みやすさスコア、SEO分析、SNS制限の4カード

全体を.acc-wrapで囲むことで、WordPressに埋め込む際のCSSスコープを限定し、既存テーマとの競合を防ぐ。

CSSデザイン：ダークテーマとガラスモーフィズム

UIはダークテーマ（#0f0f23）にガラスモーフィズムを組み合わせた。カード要素にはbackdrop-filter: blur(20px)と半透明背景を適用する。CSS変数でカラーパレットを定義し、各要素で参照する。プログレスバーの色分け（ひらがな＝シアン、カタカナ＝パープル、漢字＝グリーンなど）にも変数を使うことで、一貫性のあるデザインを実現した。

.acc-wrap {
  --bg: #0f0f23;
  --cyan: #00d4ff;
  --green: #51cf66;
  --purple: #845ef7;
  background: var(--bg);
  color: #e0e0e0;
  border-radius: 8px;
}

.acc-wrap .glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(20px);
}

JavaScript：リアルタイム分析エンジン

JavaScript部分が最も重要だ。textareaのinputイベントにanalyze関数をバインドし、入力のたびに全分析をリアルタイムで実行する。

文字種別の判定

Unicode範囲を使って各文字の種類を判定する。ひらがなはU+3040〜U+309F、カタカナはU+30A0〜U+30FF、漢字はCJK統合漢字（U+4E00〜U+9FFF）とCJK統合漢字拡張A（U+3400〜U+4DBF）の範囲で判定する。

function isHiragana(c) {
  var code = c.codePointAt(0);
  return code >= 0x3040 && code <= 0x309F;
}
function isKatakana(c) {
  var code = c.codePointAt(0);
  return code >= 0x30A0 && code <= 0x30FF;
}
function isKanji(c) {
  var code = c.codePointAt(0);
  return (code >= 0x4E00 && code <= 0x9FFF)
      || (code >= 0x3400 && code <= 0x4DBF);
}

読みやすさスコアの算出

読みやすさスコアは2つの指標から100点満点で算出する。平均文長スコア（50点満点）は一文の平均文字数が20〜50文字なら満点、80文字を超えると大幅減点。漢字比率スコア（50点満点）は漢字の割合が20〜30%なら満点で、高すぎても低すぎても減点する。

SEO分析とSNS文字数チェック

SEO分析ではタイトル文字数（32文字以内推奨）、メタディスクリプション文字数（80〜120文字推奨）、キーワード密度（1〜5%推奨）をチェックする。SNS文字数チェックでは各SNSの文字制限に対する消費率をプログレスバーで表示し、90%で黄色、100%超で赤に切り替わる。

WordPressへの埋め込み方

WordPressのブロックエディタで「カスタムHTML」ブロックを追加し、ツールのHTML・CSS・JavaScriptをそのまま貼り付ける。CSSセレクタをすべて.acc-wrapでスコープし、キーフレームアニメーション名も固有のプレフィックスを付けて、WordPressテーマとの競合を防ぐ。