デザインを始めたばかりの頃、プロの作品を見て「自分の作ったものと何かが違う…」と感じたことはありませんか？
その違和感の正体、実は「文字と文字の間（ま）」にあるかもしれません。
タイポグラフィにおいて、文字の間隔をコントロールする技術は、プロと素人を分ける境界線とも言われます。
今回は、その基本となる「トラッキング」と「カーニング」について徹底解説します。
Contents
なぜ「文字間隔」をいじるのか？
PCで文字を打ち込んだだけの状態を「ベタ打ち」と呼びます。
フォントは一文字ずつ美しく設計されていますが、文字を並べたときに「隣り合う文字の組み合わせ」まで完璧に予測することはできません。
- 素人の仕事： ソフトが配置したまま（ベタ打ち）で終わる。
- プロの仕事： 自分の目で「視覚的な等間隔」を作り出す。
この「ひと手間」が、情報の読みやすさ（可読性）と、デザインの品格を決定づけます。
トラッキング（Tracking）：全体の「密度」を操る
トラッキングとは、単語や文章全体に対して、一律に文字間隔を設定することです。
役割
全体の「空気感」を作ります。
- 広げる： ゆったりとした高級感、清潔感、モダンな印象。
- 詰める： 密度が高く、力強い、スピード感、緊迫した印象。
👉 Tips：
まずはトラッキングで、そのデザインが持つべき「温度感」を決めましょう。
長文の本文では、ほんの少し（数パーセント）広げるだけで、グッと読みやすくなります。
カーニング（Kerning）：個別の「隙間」を埋める職人芸
トラッキングで全体を整えても、特定の文字の組み合わせによって「スカスカに見える場所」や「詰まりすぎて見える場所」が必ず発生します。
これを個別に調整するのがカーニングです。
なぜカーニングが必要か？
文字には「形」の個性があるからです。
- 「H」や「M」： 四角いので、並んだときに間隔が安定する。
- 「A」「V」「W」： 斜めのラインがあるため、隣の文字との間に大きな空白ができる。
- 「T」「P」「L」： 上下に大きな空きスペースがある。
ターゲットにすべき「要注意ペア」
以下の組み合わせは、ベタ打ちだとほぼ確実に「間が抜けて」見えます。
- AV / VA（斜め同士の隙間）
- To / Te / Ty（Tの傘の下の空き）
- L’ / Ly（Lの右側の空き）
👉 Tips：
数値で測るのではなく、文字の間の「空白の面積（水の量）」がすべて均等になるイメージで調整します。
【比較】トラッキング とカーニング違い
| 項目 | トラッキング | カーニング |
| 操作対象 | 文章全体・選択範囲全体 | 特定の2文字の間 |
| イメージ | アコーディオンを伸縮させる | 歯の隙間を埋める |
| 順番 | 最初（全体のキャラ設定） | 最後（最後の磨き上げ） |
トラッキングで『全体の雰囲気』を決め、カーニングで『視覚的なムラ』を潰す。
この2段構えが美しいタイポグラフィの鉄則です。
「トラッキングは『集団の距離感』を、カーニングは『隣の人との相性』を整える作業です。」と考えると覚えやすいでしょう。
プロが実践する「違和感」の見つけ方
初心者にとって、どこを直せばいいか判断するのは難しいものです。
そんな時はこの3つを試してください。
- 逆さまにして見る：
文字を「意味」として読めなくすることで、純粋な「図形と空白のバランス」として認識できるようになります。 - 目を細めて見る：
細部をぼかすと、全体の「グレーの濃淡」が見えてきます。一箇所だけ白っぽく見えるところが、間隔が広すぎる場所です。 - 3文字ずつ見る：
「ABCDE」という単語なら、まず「ABC」のバランスを見、次に「BCD」を見る。この繰り返しでムラを潰していきます。
ツール別で文字間隔の設定場所とショートカット（イラレやfigma、cssなど）
1. Adobe系ツール（Illustrator / Photoshop / InDesign）
Adobe製品では「文字パネル」が司令塔です。
- トラッキング： 「VA」に左右矢印がついたアイコン。選択範囲全体の密度を変えます。
- カーニング： 「V/A」の間に
スラッシュが入ったアイコン。- メトリクス： フォント開発者が設定したペアカーニングを適用。
- オプティカル： AdobeのAIが形を見て自動調整。
- 数値入力： 手動で微調整。
🚀 プロの爆速ショートカット：
文字間（または選択範囲）にカーソルを置いて、
Alt (Win) / Option (Mac) + ← or →
これだけで5/1000 emずつ調整できます。
マウスを使うより10倍速いです。
2. Figma
UIデザインに特化したFigmaでは、よりシンプルな表記になっています。
- トラッキング： テキスト選択時、右サイドバーの「Letter spacing」で調整。パーセント（%）またはピクセル（px）で指定します。
- カーニング： 実はFigmaには「手動カーニング（特定の2文字間だけの数値指定）」という概念が直接的にはありません。基本は「Letter spacing」を部分的に適用する。
🚀 Figmaのショートカット：
Alt (Win) / Option (Mac) + < or >
選択した範囲の文字間を一瞬で調整できます。
3. Web実装（CSS）
エンジニアにデザインを渡す際や、コーディング時に使用します。
- トラッキング ＝
letter-spacing- 例：
letter-spacing: 0.05em;（文字サイズ基準で調整するのが一般的）
- 例：
- カーニング ＝
font-kerning- 例：
font-kerning: normal;（フォントが持つカーニング情報を有効にする）
- 例：
/* プロっぽく見せるCSS設定の例 */
.heading {
font-kerning: normal; /* カーニングを有効化 */
letter-spacing: -0.02em; /* 見出しは少し詰めると締まって見える */
}
4. ツールを使い分けるポイント
| ツール | 特徴 |
| Illustrator | ロゴやキャッチコピー向き。 一文字単位のカーニングが最もやりやすい。 |
| Figma | UI/Webデザイン向き。 全体のトラッキング（Letter spacing）管理がメイン。 |
| CSS | 実装用。 1文字ずつのカーニングは難しいため、フォント自体の機能を活かす設定にする。 |
日本語特有の「文字詰め」事情
日本語は英語と異なり、一文字が正方形（仮想ボディ）の中に収まるように設計されています。
そのため、ひらがなや句読点が並ぶと、どうしてもスカスカに見えてしまいます。
- プロポーショナルメトリクス（palt）：
日本語フォントが持つ「文字ごとの本来の幅」を活かして、自動で間隔を詰める機能です。 - CSSでの書き方：
font-feature-settings: "palt";を指定することで、ブラウザ上でも日本語の「ベタ打ち感」を一瞬で解消できます。 - 手動調整の優先順位：
日本語は文字数が多いため、まずは「全体のトラッキング」と「palt」で整え、キャッチコピーなどの目立つ場所だけをカーニングするのが効率的です。
英語と日本語での数値感覚の違い
数値の感覚は英語と日本語で大きく異なります。
同じ数値（例えば -50）を設定しても、アルファベットと漢字・ひらがなでは視覚的な変化の度合いが違うため、使い分けが必要です。
1. 英語（欧文）の場合
アルファベットは一文字ずつの形状がバラバラ（細い i や横に広い W など）なため、数値に対して非常に敏感です。
- 傾向： 日本語よりも控えめな数値で劇的に印象が変わります。
- 見出し：
-20程度でもかなり締まって見えます。-100を超えると文字同士がぶつかり始めることが多いです。
2. 日本語（和文）の場合
漢字・ひらがなは、もともと正方形の枠（仮想ボディ）の中にゆったり収まっているため、英語よりも大胆に数値をいじらないと変化が分かりにくい傾向があります。
- 傾向： 英語の 2倍〜3倍 くらいの数値を設定しても違和感がないことが多いです。
- 見出し： キャッチコピーなどで「塊感」を出したい場合、
-50〜-100くらいまでガッツリ詰めることも珍しくありません。
言語別・トラッキング設定の目安（Adobe基準）
数値はAdobe系の 1/1000 em 単位を基準にしています。
| デザインの目的 | 英語（欧文） | 日本語（和文） | 理由 |
| 高級感・モダン | +50 〜 +100 | +100 〜 +200 | 日本語は余白を大きく取らないと「高級感」が出にくいため。 |
| 標準（本文） | 0 〜 +20 | -10 〜 0 | 日本語はデフォルトが広めなので、少し詰め気味の方が読みやすい。 |
| 力強い見出し | -20 〜 -40 | -50 〜 -80 | 日本語は仮想ボディの余白を殺すために強めのマイナスが必要。 |
まとめ：一文字一文字に「意思」を込める
プロのデザインが美しく見えるのは、フォントが良いからだけではありません。
「文字が最も心地よく居られる場所」を、デザイナーが一点ずつ探り当てているからです。
今日からキャッチコピーやロゴを作る時は、打ちっぱなしで満足せず、一文字ずつ「お隣さんとの距離は大丈夫？」と問いかけてみてください。
そのこだわりが、あなたのデザインをプロの域へと押し上げます。
