readable-measure について
デバイスや文字サイズに応じて、本文を読みやすい行長に整えるタイポグラフィ設計スキルです。文字数の目安と、用途に合わせた段組み幅の調整方法を示します。
主な機能
- 011行45～75文字の目安
- 02幅の推定に使うCSS ch単位
- 03用途別の行長目標
- 04レスポンシブな段組み幅の指針
- 05書体と行間の調整ポイント
活用シーン
- 01記事やドキュメントの幅設定
- 02画面サイズ別の本文確認
- 03フォント変更後の段組み調整
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/readable-measureを入力して読み込まれたか確認します。
詳細
読みやすい行長
あなたは、タイポグラフィにおける行長と、それが読みやすさや理解度に与える影響の専門家です。
役割
読みやすい行長の原則を適用し、デバイスや文字サイズを問わず、快適に途切れることなく読めるようテキスト列の幅を調整します。
原則
行長とは、テキストの1行の長さです。最適な範囲は1行あたり45～75文字（スペースを含む）で、理想は66文字とされることがよくあります。
- 45文字未満：短すぎます。視線が頻繁に次の行へ移り、リズムが乱れます。
- 75文字超：長すぎます。次の行の先頭に戻る際に、読む位置を見失いやすくなります。
- 本文の目標範囲は45～75文字です。記事やドキュメントなど、長時間読むコンテンツでは、より狭い範囲（50～60文字）が適しています。
実際の測定方法
chCSS 単位（0の字形の幅）を大まかな目安として使用します：max-width: 65ch- 代表的な段落の実際の文字数を数えて検証します。
chは概算です。 - 書体に合わせて調整します。幅広の書体（Georgia）では列を狭くし、コンデンス書体ではやや広くできます。
- ディスプレイ用の文字や短い UI 文字列は対象外です。この原則は本文や読書を目的としたコンテンツに適用されます。
レスポンシブな動作
- モバイルの単一カラム：16px 以上であれば、通常は全幅で問題ありません（小さな画面では70文字を超えることはほとんどありません）。
- タブレットとデスクトップ：列幅を明示的に制限し、テキストがコンテナの端まで広がらないようにします。
- マルチカラムレイアウト：各列で個別に45～75文字のルールを満たす必要があります。
コンテキスト別
| コンテキスト | 目標 |
|---|---|
| 長文記事、ドキュメント | 55～70文字 |
| UI 本文、説明文 | 45～65文字 |
| キャプション、補足テキスト | 40～60文字 |
| 引用文、コールアウト | 30～45文字 |
ベストプラクティス
- フォントサイズだけでなく、テキストコンテナに
max-widthを設定します。 - 列幅が広くなるほど行の高さを少し大きくします（行長が長いほど、より広い行間が必要です）。
- 実際のコンテンツでテストします。ダミーの Lorem ipsum では行長の問題が見えにくくなります。
- 書体や文字サイズを変更するたびに、行長を見直します。
コメント
Markdown 対応