カーニングのやり方｜文字詰めの手順とトラッキング・字間の違い

作ったバナーが、なんとなく素人っぽい。レイアウトも配色も悪くないのに締まって見えない。その原因、文字の間隔にあることが多いです。

文字と文字のすきまを整える作業を文字詰めと呼びます。プロが作ったタイトルとの差は、ここで一番はっきり出ます。しかも作業自体は数分で終わります。

このレッスンでは、カーニングとトラッキングの使い分け、詰める場所と詰めない場所、実際の手順、詰めすぎの見分け方を順に説明します。読み終えたら、自分のタイトルを見て「ここが空きすぎ」と指させるようになりますよ。

カーニング・トラッキング・字間の違い

まず言葉を整理します。3つとも文字の間隔の話ですが、動かす範囲が違います。

用語	動かす範囲	使う場面
カーニング	特定の2文字の間だけ	タイトル、ロゴ、キャッチコピー
トラッキング（字送り）	選んだ文字列の全体	本文、小見出し、英字の大文字組み
字間	文字と文字のすきまそのもの	2つをまとめて指す言い方

カーニングは1か所ずつ、トラッキングはまとめて。この違いだけ覚えれば大丈夫です。字間はカーニングとトラッキングの両方を含んだ、広い意味の言葉として使います。トラッキングは字送りとも呼びます。

順番も決まっています。先にトラッキングで全体を決めて、そのあとカーニングで気になる場所だけ直す。逆にやると、せっかく直した2文字が全体調整で崩れます。

なぜ間隔がバラついて見えるのか

フォントの文字には、それぞれ決まった幅の箱が割り当てられています。「あ」も「り」も「。」も、同じ幅の箱に入っています。日本語フォントはこの仕組みで作られているので、そのまま並べると細い文字のまわりだけすきまが目立ちます。

特に空いて見えるのは次の組み合わせです。

• 句読点・記号のまわり：「、」「。」「・」「！」「？」の前後
• カッコ：「（」「）」「「」「」」の内側と外側
• 小さい文字：「ャ」「ュ」「ョ」「っ」の後ろ
• ひらがなと漢字の境目：「り」「く」「し」など、線が少ない字の隣
• 欧文の斜めの字：AとV、TとA、Yと小文字の組み合わせ

この一覧を頭に入れておくと、直す場所を探す時間がなくなります。タイトルを見たとき、まず句読点とカッコから見ていけばいいわけです◎

詰める場所と、詰めない場所

全部の文字を詰めるわけではありません。手を入れる価値があるのは、大きく見せる文字だけです。

• 詰める：タイトル、キャッチコピー、ロゴ、バナーの主役の1行、大きな数字
• 少しだけ詰める：小見出し、ボタンの文字
• 詰めない：本文、注釈、長い説明文

本文を詰めないのは、読みにくくなるからです。文字が大きいほどすきまは目立ち、小さいほど目立ちません。本文サイズで詰めると、隣の文字とくっついて読み間違いが増えます。

長い本文は、字間より行間を優先してください。字間を触る前に行間を1.7〜1.9倍にするほうが、読みやすさへの効き目が大きいです。

文字詰めの手順

実際の作業は4ステップです。タイトル1行なら3分で終わります。

1. 全体を少し詰める：トラッキングを −25〜−50 くらいにする（日本語のタイトルの目安）
2. 目を細めて見る：ぼかして見ると、すきまの大きい場所だけが浮き上がります
3. 広い場所を1か所ずつ詰める：句読点、カッコ、小さい文字の後ろから手をつける
4. 逆さまにして確認する：画面を180度回すか、左右反転する。文字を読めなくすると、形とすきまだけが見えます

2番と4番が上達の分かれ目です。文字を読める状態で見ていると、意味が先に頭に入って、すきまの差に気づけません。読めなくして見るのがコツです💡

調整の基準は「すきまの面積を揃える」こと。距離ではありません。「り」と「ん」の間と、「ロ」と「ロ」の間では、同じ距離でも空いて見える量が違います。目で見て同じくらいに見える状態が正解です。

ツールごとの操作

使う道具でやり方が変わります。よく使うものだけ挙げます。

• Illustrator・Photoshop：2文字の間にカーソルを置いて Option（Windowsは Alt）＋左右キー。文字パネルの「オプティカル」を選ぶと自動で整います
• Canva：テキストを選んで「スペース」の「文字間隔」。全体調整だけなので、細かく直したいときは文字を分けて配置します
• Figma：右パネルの Letter spacing。パーセント指定ができます
• CSS：letter-spacing で全体を、font-feature-settings: "palt" で日本語の自動詰めを有効にできます

まず自動（オプティカル、palt）を当てて、残った気になる場所だけ手で直す。この順番だと作業量が減ります。自動だけで完璧にはなりませんが、8割は片づきます。

詰めすぎのサイン

文字詰めを覚えた直後は、たいてい詰めすぎます。次の3つが出たら戻してください。

• 隣の文字と線が接している、または重なっている
• 「い」が「り」に、「ロ」と「口」が別の字に見える
• 単語のかたまりが分からず、1行が1つの模様に見える

詰めるのは、すきまを均一にするためです。狭くするのが目的ではありません。ベタ組み（詰めない状態）より少し詰まって見えるくらいで止めるのがちょうどいいです。

逆に、あえて広げる場面もあります。高級感を出したい英字の大文字組みは、トラッキングを＋方向にすると落ち着きます。この場合も1文字ずつではなく、全体をまとめて広げます。

ミニ実践：タイトルの文字詰めだけを直す

5分の練習です。CanvaでもIllustratorでも、いま使えるツールで構いません。

1. 句読点とカッコを含む1行を打つ。例：「たった3分で、印象が変わる（保存版）」
2. 大きめのサイズ（60px以上）にする。小さいままだと差が見えません
3. この状態でスクリーンショットを撮る。これがBeforeです
4. 全体のトラッキングを −30 にする
5. 「、」の前後、「（」「）」の内側を1か所ずつ詰める
6. 画面を上下逆にして、すきまの広い場所が残っていないか確認する
7. BeforeとAfterを並べて見比べる

7番まで必ずやってください。並べないと、直した実感が残りません。差が分かると、次から自分の作品の粗が見えるようになります。

よくある質問

カーニングとトラッキングはどう使い分けますか？

トラッキングで文字列全体の間隔を決めて、カーニングで特定の2文字の間だけ直します。順番は必ずトラッキングが先です。カーニングを先にやると、あとの全体調整で消えてしまいます。

本文にも文字詰めをしたほうがいいですか？

本文はそのままで大丈夫です。小さい文字は、すきまの差がほとんど目立ちません。むしろ詰めると隣の文字とくっついて読みにくくなります。本文の読みやすさを上げたいときは、字間より行間を1.7〜1.9倍にするほうが効きます。

自動の文字詰め機能だけでは足りませんか？

8割は片づきます。IllustratorやPhotoshopの「オプティカル」、CSSの palt を当てるだけで、句読点まわりのすきまはかなり減ります。残るのは、そのフォントが想定していない組み合わせと、大きく見せる1行です。まず自動を当てて、残りを手で直してください。

詰めすぎかどうか、どこで判断しますか？

文字の線が隣とくっついたら詰めすぎです。「い」が「り」に見える、単語の切れ目が分からない、というのも同じサインです。目的はすきまを均一にすることで、狭くすることではありません。迷ったら1段階戻してください。

次に学ぶこと

整理します。トラッキングで全体、カーニングで1か所ずつ。詰めるのは大きく見せる文字だけ。目を細める、逆さまにする。すきまは距離ではなく面積を揃える。線がくっついたら詰めすぎ。

次は、その文字が「見えるか・読めるか・読み違えないか」の話です。視認性・可読性・判読性へ進むと、文字まわりの判断が3つの基準で言えるようになります。

そもそも使うフォントで迷っている方は、フォントの選び方を先に読んでください。全体の学ぶ順番はデザインの基本コースにまとめています。