カーニングとは？文字詰めの基礎とIllustrator実践術

公開日：2026-08-05

グラフィックデザインやWebデザインの勉強を始めると、必ずと言っていいほど耳にするのが「カーニング」という言葉です。文字と文字の間隔を整えるこの技術は、地味に見えて実はデザインの完成度を大きく左右します。この記事では、カーニングの基本的な意味からトラッキングとの違い、IllustratorとPhotoshopでの具体的な操作方法、そして初心者が陥りやすい失敗と上達のコツまで、順を追って解説します。

カーニングとは？文字詰めの意味をやさしく解説

「カーニング（Kerning）」とは、隣り合う2つの文字の間隔を個別に調整することを指すデザイン用語です。IllustratorやPhotoshopなどのソフトウェアで文字を入力すると、文字と文字の間の余白（アキ）にはどうしてもバラつきが生じます。そのままにしておくと、文章全体が間延びして見えたり、部分的に窮屈に詰まって見えたりして、読み手に散漫な印象を与えてしまいます。

カーニングは、この文字ごとの余白の見え方をひとつずつ調整し、視覚的に均等な間隔に整えていく作業です。単に見た目を整えるだけでなく、読みやすさそのものにも影響するため、ロゴデザイン・見出し・広告コピー・グラフィックデザイン講座で扱うような制作物全般において欠かせない技術のひとつとされています。

もともとカーニングという考え方は、活版印刷の時代に金属活字を組んでいた頃から存在していました。文字によっては隣の活字の枠にわずかに食い込ませる加工を施すことで、より自然な字間を実現していたとされ、そこから転じて、現代のデジタルデザインにおける文字間調整全般を指す用語として定着しています。

なぜカーニングがデザインの質を左右するのか

文字サイズが大きくなるほど、余白のバラつきは目立ちやすくなります。名刺やロゴ、Webサイトのキービジュアルのように、少ない文字数を大きく見せるデザインでは特にカーニングの精度が問われます。細部まで丁寧に整えられた文字組みは、受け手に質の高い制作物という印象を与え、企業やブランドへの信頼感の醸成にもつながると考えられます。

カーニングとトラッキング・リーディング（行送り）の違い

カーニングとあわせて理解しておきたいのが「トラッキング（Tracking）」と「リーディング（Leading、行送り）」です。この3つは似た用語として混同されやすいものの、それぞれ調整する対象がまったく異なります。

カーニングは、隣り合う2​文字ぶんのペア単位で余白を調整する技術です。一方トラッキングは、選択した文字列全体、あるいは単語や文章全体に対して、字間を均一に一括調整する機能を指します。トラッキングで全体のゆとりを大づかみに整えたあと、カーニングで個別の文字ペアの余白を微調整する、という流れで使い分けるのが一般的です（出典：デジタルハリウッド公式サイト）。

リーディングは、行と行の間隔（行送り）を指す用語です。横方向の字間を扱うカーニング・トラッキングに対し、リーディングは縦方向（横組みの場合）の余白を扱う点が異なります。この3つはいずれもクリエイティブ用語辞典で扱われるような文字組みの基本用語であり、セットで理解しておくと文字組み全体の設計がしやすくなります。

カーニング・トラッキング・リーディングの関係

見出し全体の詰まり具合が気になる場合はトラッキングを、特定の2​文字だけが不自然に空いて見える場合はカーニングを使う、という判断の指針になります。

紙媒体とWebデザインでのカーニングの扱い方の違い

カーニングの扱い方は、成果物が紙媒体かWebサイトかによっても変わってきます。名刺やロゴ、パンフレットのような印刷物として書き出すデザインの場合は、IllustratorやPhotoshopの文字パネル上でカーニングとトラッキングを自由に使い、細部まで美しく文字を組んだうえで印刷データとして書き出します。

一方、Webサイト上でHTMLとCSSによって表示されるテキストについては、閲覧環境やフォントの表示状態によって見え方が変わってしまうため、Illustratorのような細かいペア単位のカーニングを適用することが難しいという特性があります（出典：デジタルハリウッド公式サイト）。このため、Web上のテキストでは主にCSSのletter-spacingプロパティなどを使ったトラッキング的な調整で、文字間の読みやすさを整えるのが一般的です。

ただし、バナー画像やOGP画像のように、テキストを含めて画像として書き出すパーツについては話が別です。画像として固定されるため、IllustratorやWebデザイナー専攻のカリキュラムで学ぶような画像編集ソフト上でカーニングを丁寧に適用し、印刷物と同じ水準の美しい文字組みを実現することができます。

メトリクスカーニングとオプティカルカーニングの違い

IllustratorやInDesignの文字パネルには、カーニングの自動調整モードとして「メトリクス」と「オプティカル」という2つの選択肢が用意されています。

メトリクスカーニングは、フォントファイルにあらかじめ組み込まれているカーニング情報（カーニングペア）を使って自動調整する方法です。フォントデザイナーが設定した情報に基づいて字間が決まるため、そのフォント本来の設計意図に沿った自然な仕上がりになりやすい一方、カーニングペアの情報を持たない文字の組み合わせには調整が働かない場合があります。

オプティカルカーニングは、フォントに組み込まれた情報を使わず、実際の文字の輪郭を解析して視覚的に均等な間隔になるよう自動調整する方法です。カーニングペア情報を持たないフォントや、複数の異なるフォントが混在する文章など、メトリクスでは対応しきれない場面で有効とされています（出典：専門メディアの解説記事）。

どちらが正解というわけではなく、フォントの特性や制作物の性質に応じて使い分けることが推奨されています。まず自動カーニング機能を有効にして全体の土台を整え、そのうえで気になる箇所だけを手動で調整する、という進め方が効率的です。

和文（日本語）と欧文でのカーニングの考え方の違い

カーニングという概念は、もともと欧文（アルファベット）の活版印刷の世界から生まれた考え方です。アルファベットの各文字は文字ごとの横幅や形状が大きく異なるため、あらかじめ文字ごとの間隔を個別に調整する仕組みが古くから発達してきました。

一方、日本語の組版は歴史的に「等幅」、つまりすべての文字を同じ正方形の枠（仮想ボディ）に収める考え方を基本としてきました。日本語の行組版に関する技術要件は、JIS X 4051を踏まえた「日本語組版処理の要件（jlreq）」としてW3Cにも文書化されており、句読点や括弧類の前後に生じる「アキ」の扱いなど、和文特有のルールが体系的に整理されています（出典：W3C日本語組版処理の要件）。

近年は和文フォントにも文字ごとに幅が異なる「プロポーショナルメトリクス」を持つものが増えてきました。見出しやロゴなど和文と欧文が混在するデザインでは、文字パネルの設定を切り替えたうえで、気になる箇所だけを手動カーニングで整えるという進め方が実務でもよく使われています。

Illustratorでのカーニングの具体的な操作方法

Illustratorで文字を入力したら、まず「ウィンドウ」メニューから「書式」→「文字」を選択し、文字パネルを表示します。カーニングを調整したい2​文字の間にテキストカーソルを置き、カーニングの数値欄に直接数値を入力するか、プルダウンから自動モードを選択します。

※複数のIllustrator専門解説サイトで確認された仕様値です（2026年7月時点）。

文字パネルでの数値調整とショートカット

カーニングをしたい2​文字の間にカーソルを置いた状態で、Macの場合は「option＋左右矢印キー」、Windowsの場合は「Alt＋左右矢印キー」を押すと、カーニングの数値を細かく増減できます（出典：デジタルハリウッド公式サイト）。さらに「command（Windowsはctrl）」キーを同時に押すことで、一度により大きな幅で数値を調整することも可能です。

なお、同じショートカット操作でも、2​文字間ではなく複数の文字や文章全体を選択した状態で行うとトラッキングとして機能する点には注意が必要です。

自動カーニング（メトリクス/オプティカル）の切り替え手順

自動カーニングのモードを切り替えるには、文字を選択した状態で文字パネルのカーニング欄のプルダウンメニューを開き、目的のモードを選びます。まず自動調整で全体の土台を整えてから、気になる箇所だけをピンポイントで手直しする進め方を意識すると、作業時間を抑えながら仕上がりの質を高めやすくなります。

Photoshopでのカーニング・トラッキングの設定方法

Photoshopでも、Illustratorと同様の考え方でカーニングとトラッキングを設定できます。ツールバーから文字ツール（Tのアイコン）を選択し、対象のテキストレイヤーをクリックします。次に「ウィンドウ」メニューから「文字」を選択して文字パネルを表示すると、フォントサイズとあわせてカーニング・トラッキングの数値入力欄が表示されます。

ショートカットで素早く字間を詰める

Photoshopでカーニングを行う場合、2​文字の間にカーソルを置いた状態で「Alt（Macの場合はOption）＋左右矢印キー」を押すと、字間を素早く調整できます。1回の操作で調整される数値の目安は20単位とされています（出典：Adobe公式サイト／Web制作会社の実践解説）。複数の文字をまとめて選択した状態で同じショートカットを使うと、トラッキングとして一括調整が行われます。

Photoshopはピクセル単位のビジュアル表現を重視するツールという性質上、数値の正確さよりも「実際にどう見えるか」を確認しながら微調整していく進め方が向いています。

初心者がやりがちなカーニングの失敗と上達のコツ

カーニングは慣れないうちは判断基準がつかみにくく、初心者がつまずきやすいポイントがいくつかあります。

三角形の余白ができてしまう典型パターン

よくある失敗のひとつが、文字と文字の間に「三角形」に見える余白ができてしまうケースです。カーニングの基本的な考え方は、隣り合う文字同士の余白が「等間隔に感じられる」ように整えることであり、数値上の距離をそろえることが目的ではありません。文字の形状によって、大きく詰められる組み合わせと、あまり詰められない組み合わせがあることを意識しておくとよいでしょう。

目を鍛えるトレーニング方法

カーニングの感覚は、数値のルールを覚えるだけでは身につきにくく、実際に手を動かしながら「目を鍛える」ことが上達の近道です。

ロゴ・バナー・印刷物でカーニングを実践に活かす

ロゴデザインでは、文字数が少なく、かつ大きく表示されることが多いため、わずかな余白のズレも目立ちやすくなります。フォントを決めたあとに必ずカーニングを個別調整し、社名やブランド名がひとつのまとまりとして美しく見えるように整えることが重要です。

バナー制作では、限られたスペースの中にキャッチコピーや価格、CTA文言などを詰め込むことが多く、文字が窮屈に見えると訴求力が下がってしまいます。トラッキングで全体の密度を整えたあと、キャッチコピーの主要な単語だけカーニングで丁寧に仕上げると、限られた面積でも読みやすく訴求力のあるデザインに仕上がります。

印刷物のレイアウトでは、パンフレットやチラシの見出し・タイトル部分に特にカーニングの効果が表れやすいと言えます。タイトル部分だけでもカーニングを丁寧に行う習慣をつけておくと、全体の完成度が底上げされます。

こうした実践的な感覚は、グラフィックデザイン講座やUI/UXデザイン専攻のような、ツールの操作方法だけでなく文字組みの考え方そのものを体系的に学べる環境で身につけていくと、独学よりも短い期間で実務レベルの感覚を養いやすくなります。個人差はありますが、基礎を体系的に学んだうえで数多くの制作を重ねることで、カーニングの判断スピードと精度は着実に上がっていくと考えられます。

説明会無料・全国36校舎・オンライン参加可・個別相談OK

よくある質問