readable-measure について
読みやすいテキスト列幅を設定するためのデザインスキルです。1行あたりの文字数の目安を、デバイスやコンテンツの種類に応じて適用できます。
主な機能
- 011行あたりの文字数範囲を適用
- 02CSS chで幅を概算
- 03書体に合わせて列幅を調整
- 04レイアウトごとに列幅を制限
- 05実際のテキストで検証
活用シーン
- 01記事やドキュメントの列幅設定
- 02UIテキストの幅調整
- 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 対応