読みやすい列幅と1行の文字数を確認するツール
文字サイズ16 px、列幅560 pxなら1行は約70文字となり、長文を快適に読める45〜75文字の範囲に収まります。画面サイズごとに確認してからレイアウトを決められます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 文字サイズ
- 16
- 段の幅
- 560
- 1行あたりの文字数
- 70
- 評価
- recommended
- 推奨の最小値
- 45
- 推奨の最大値
- 75
読みやすい組版は、魅力的なフォントを選ぶだけでは実現できません。列が広すぎると次の行へ視線を移す際に読んでいた位置を見失いやすくなり、狭すぎると頻繁な改行で文章の流れが途切れます。このツールはフォントサイズと列幅から1行当たりの文字数を推定し、一般的に推奨される45から75の範囲内かを示します。記事、ドキュメント、ニュースレター、ダッシュボードなど、長く読む画面の設計を素早く検討するためにご利用いただけます。
組版の寸法を入力する方法
本文のフォントサイズと、実際に文章が配置される列の幅をCSSピクセルで入力してください。コンテナー全体ではなく、内側の余白、境界線、欄外注、隣接する操作領域を差し引いた後の幅をご使用ください。たとえば幅640ピクセルのカードに左右32ピクセルずつの余白がある場合、段落に使える幅は576ピクセルです。
フォントサイズには、ズーム率、見出しのサイズ、デザイントークン名ではなく、本文に適用された計算済みの値を指定します。どちらも正の有限数である必要があり、読み取り可能な文字を表さないため、0以下のフォントサイズは拒否されます。remを使用している場合はルートのフォントサイズで換算するか、ブラウザーの開発者ツールで計算済み値をご確認ください。
レスポンシブな列はフォントが同じでも判定が変わるため、デスクトップ、タブレット、モバイルを個別にお調べください。結果には入力値も表示されるので、各条件を明確に記録できます。
1行の文字数の推定結果を読む方法
この計算では、平均的な1文字の幅を0.5 em、つまり指定されたフォントサイズの半分と仮定します。列幅をその平均幅で割り、1行当たりの推定文字数を小数第1位まで表示します。これは意図的な概算です。
実際の字形の幅は書体、ウェイト、言語、句読点、字間、文章中の語によって異なります。細身の書体では推定より多く、幅広の書体では少なくなる場合があります。そのため、初期のレイアウト判断や一貫したデザインレビューには役立ちますが、最終フォントで代表的な文章を測る作業の代わりにはなりません。
判定には丸め前の値を使い、45未満を狭すぎる、75を超える場合を広すぎる、両端を含む範囲を推奨とします。結果には0.5 emという仮定と上下限も明記されます。境界に近い場合は実際の文章をご確認いただき、厳格なアクセシビリティ規則ではなく、目視確認のきっかけとしてお使いください。
結果をレイアウト改善へ生かす方法
推奨判定は、継続して読むための文字サイズと行長の関係が適切であることを示しますが、快適な組版を保証する要素はほかにもあります。行の高さ、段落間隔、コントラスト、フォントの描画、対象読者の要望もあわせてご確認ください。広すぎる場合は本文コンテナーの最大幅を小さくする、適切であれば文字を大きくする、または読む順序が明確な場合のみ複数列にします。
狭すぎる場合は横幅を増やす、過剰な内側余白を減らす、コンポーネントに対して文字が大きすぎないか見直します。特に小さな画面では、合格させるためだけに本文を縮小しないでください。設計時にコンテナーと組版のトークンを比較し、グリッドや入れ子の余白で実効幅が変わるため実装後にも再確認します。
多言語サイトでは各文字体系の実例もお試しください。
活用例
記事の最大幅を決める
デスクトップの最大幅を決定する前に、候補となる本文幅とフォントサイズを比較できます。
レスポンシブ境界を監査する
デスクトップ、タブレット、モバイルで狭すぎる列や広すぎる列を検出できます。
デザインシステムのトークンを見直す
組版とコンテナーのトークンを組み合わせ、読みやすさの共通基準を整えられます。
よくある質問
推奨される範囲はいくつですか?
両端を含む45から75の推定文字数を、1行当たりの推奨範囲として判定します。
1行の文字数はどのように計算しますか?
平均文字幅を0.5 emと仮定し、列幅をフォントサイズの半分で割ります。
使用中のフォントを正確に測れますか?
いいえ。 書体、ウェイト、言語、字間、文章で字形の幅が変わるため、結果は概算です。
16 pxの本文に560 pxの列幅は広すぎますか?
広すぎません。16 pxでは1文字を8 pxと見積もるため、560 pxには1行約70文字が入り、推奨範囲の45〜75文字に収まります。
余白のあるボックスでは、どの幅を入力すればよいですか?
段落が実際に使う幅だけを入力してください。幅640 pxのカードで左右に32 pxずつ余白がある場合、確認すべき幅は576 pxです。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/doc/reading-column-width-check \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"column_width":560}'const res = await fetch("https://api.kit.forhosting.com/doc/reading-column-width-check", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"column_width": 560
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/reading-column-width-check",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"column_width": 560
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/reading-column-width-check", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"column_width":560}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"column_width":560}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/reading-column-width-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"font_size": 16,
"column_width": 560
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.reading_column_width_check",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_mb | 25 |
max_pages | 200 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
結果をレイアウト改善へ生かす方法
ブラウザー版は無料で、APIによる自動リクエストは1回$0.002です。
技術的な質問
フォントサイズが0以下の場合はどうなりますか?
フォントサイズは正でなければならないため、invalid_inputエラーになります。
APIリクエストの料金はいくらですか?
APIリクエストは1回$0.002で、ブラウザーでの対話利用は無料です。