文字数カウンター

テキストを貼り付けると、文字数・単語数・行数などを打ち込みながらリアルタイムで集計するツールです。あわせて、Xやメタディスクリプションなど用途別の上限に対する残り文字数もその場で表示します。投稿を書き終えてから「あと何文字削ればいいのか」を数える手間をなくすために作りました。

こんなときに使う

• Xの投稿を書いていて、全角込みで上限に収まるか確かめたいとき
• 記事のメタディスクリプションを120文字前後に整えたいとき
• 原稿を渡す前に「400字詰め何枚ぶんか」をざっと知りたいとき
• APIやフォームのバイト数上限が気になり、UTF-8で何バイトか確認したいとき

使い方

1. 左側のテキストエリアに文章を入力するか貼り付けます。
2. 右側の8つのカードが打鍵と同時に更新されます。
3. 下の「SNS・用途別の残り文字数」で、目的の枠のバーと残り文字数を見ます。超過するとバーが赤に変わり、表示が「○○ 超過」に切り替わります。
4. 整え終わったら「コピー」を押します。別の文章に移るときは「クリア」で空にします。

仕様と機能

集計しているのは次の8項目です。

指標	数え方
文字数	コードポイント単位。絵文字などサロゲートペアも1文字として数えます
文字数（空白除く）	半角スペース・タブ・全角スペースを除いた数
単語数	前後を整えたうえで空白の並びで分割した個数
行数	改行で分割した個数（空欄のときは0）
段落数	空行で区切られたかたまりの数
原稿用紙（400字）	文字数を400で割って切り上げ
バイト数（UTF-8）	TextEncoder でエンコードした長さ
改行・空白除く	すべての空白文字を除いた数

用途別のプリセットは、X（旧Twitter）280、Instagramキャプション 2200、LinkedIn投稿 3000、YouTube説明欄 5000、メタディスクリプション 120 の5つです。Xのみ、漢字・かな・全角記号などの範囲に入る文字を2文字として重み付けして数えます。残りが上限の1割を切るとバーが黄色、超過すると赤になります。

入力内容は localStorage の char-counter:text:v1 に自動保存され、次に開いたときそのまま復元されます。ページ内で完結し、外部への送信はありません。

作るときに決めたこと

文字数を length ではなくコードポイント単位で数えるようにしたのが最初の判断です。素朴に長さを取ると絵文字が2文字と数えられ、SNS用のツールとしては現実と合いません。表示上の見た目に近づけるため、コードポイント単位に統一しました。

Xだけ全角2文字換算にしたのは、実際の投稿が弾かれるかどうかがこの数え方に左右されるからです。ここを素直な文字数にすると、日本語の投稿ではおよそ2倍の余裕があるように見えてしまいます。ただし、実際にはURLの短縮など他の要素もあるため、あくまで目安として扱っています。

プリセットは5つに絞りました。増やすほど画面が縦に伸びて、自分に関係する1つを探す時間が長くなります。日常的に上限を意識する枠だけを残し、それ以外は8つのカードから自分で判断してもらう形にしています。

自動保存を入れたのは、書きかけで別のタブに移り、戻ってきたら消えているという事故をなくすためです。そのかわり明示的な「クリア」ボタンを用意し、消すのは常に自分の操作で行えるようにしました。

注意点

• 各SNSの上限値は執筆時点の一般的な値です。仕様変更には自動で追従しないため、最終確認は投稿画面で行ってください。
• 単語数は空白で区切って数えるため、分かち書きをしない日本語では実態と合いません。英文向けの指標として見てください。
• 入力内容はこの端末のブラウザに保存されます。共用パソコンでは、使い終わったら「クリア」を押してから離れてください。