カーニングとは？やり方とポイントをはじめからわかりやすく解説
デザインにおける「カーニング」の調整は、文字間のバランスを整える重要な作業です。小さな調整ではありますが、作品全体の印象を大きく左右する要素でもあります。
この記事ではカーニングの基礎知識から、実際のデザイン業務に役立つ具体的な調整方法、カーニングのポイントまでを「Adobe Photoshop」を使ってわかりやすく解説します。カーニングのスキルを身につければ、デザインの完成度がより一層高まるはずです。
カーニングとPhotoshopの操作をマスターしたい方は、ぜひ最後までご覧ください。
目次
「カーニング」とは、文字間隔を調整する技術
「カーニング（英語：Kerning）」とは、文字同士の間隔を調整し、文章やデザインの見た目を美しく整える技術のことです。
デザインの現場において、Adobe PhotoshopやAdobe Illustratorなどのデザインツールで、隣り合う文字間を調整する機能や作業そのものを指して呼ばれるケースもあります。
以下の画像は、カーニングをしていないデザインと、カーニングを調整したデザインの例です。
文字間を整えたことで、より読みやすく、視点が散りにくくなったことがわかるでしょう。
続いて、以下の例もご覧ください。
文字間が広いものは間延びした印象を、文字間隔が狭いものはやや緊迫した印象を受ける方が多いのではないでしょうか。
このように、カーニングは単に見た目を整えるだけでなく読む人の印象にも作用し、ストレスなく内容を追えるようにする効果もあるのです。
ちなみにこうした調整は、文字を「ただ読むもの」ではなく「見せるもの」として扱うタイポグラフィの一環としても行われます。
タイポグラフィとは、以下のポスターのように、文字そのものや文字の配置を工夫して、視覚的な美しさやメッセージ性を高める技術のことです。
カーニングは、デザインのあらゆる場面で役立ちますが、特に効果を発揮する場面があります。
では、具体的にどのような場面で、カーニングの技術が重要視されるのでしょうか。
次に、その例を見ていきましょう。
カーニングが特に重要な場面
カーニングは、ロゴや見出し、広告コピー、webデザインのヘッダーやキービジュアルなど、大きな文字が目立つ箇所で特に重要になります。
なぜなら、文字サイズが大きければ大きいほど、わずかな間隔のズレが視覚的な違和感として際立ちやすいためです。
第一印象を左右する箇所でカーニングをおろそかにしてしまうと、他のビジュアル要素がどれほど魅力的でも、雑然とした印象を与えてしまい、全体のクオリティを損なってしまう可能性があります。
このように、文字間を調整することでデザインの完成度を高めるカーニングですが、このカーニングと似た言葉に「トラッキング」というものがあります。どちらも文字間を調整する技術ですが、役割は異なります。では、両者の違いは一体何なのでしょうか。各手法の違いについて確認していきましょう。
カーニングとトラッキングの違い
カーニングは「特定の文字ペア」のみを個別に詰めたり、広げたりして調整する方法です。
対して、トラッキングは「選択したテキスト全体」に対して、均一に文字間隔を変更する方法を指します。
例えば、英単語の中に斜め線が交わるような文字「A」と「V」が隣り合う場合、カーニングを使うことでその二文字間だけを詰めることができます。
一方で段落全体をゆったりと見せたい場合はトラッキングで字間を均等に広げ、まとめて印象を変えていくのがよいでしょう。
このように、双方の違いをよく理解して使い分けることが大切です。
カーニングを行う3つのメリット
ここまでのおさらいもかねて、改めてカーニングを行う目的を整理しました。
カーニングを行うメリットは、大きく以下の3つです。
- 読みやすさを高められる
- 洗練された印象を演出できる
- デザインのコンセプトや狙いを明確に伝えられる
まず第一に「読みやすさを高められる」点が挙げられます。
例えば、文字同士の間隔が不揃いだと、読み手の注意が削がれやすくなります。
一方で、すっきりと整った文字間は視線の誘導を滑らかにし、内容の理解や集中を妨げません。
また、文字同士のぶつかりや空きすぎによる違和感をなくすことで、全体的に洗練された印象を与えられる点も、カーニングを行うメリットです。
意図したメッセージを正しく伝えられるように間隔を微調整することで、デザイン全体のコンセプトや狙いも、より明確に伝えられるようになります。
カーニングの重要性や効果について理解したところで、実際にどのようにカーニングを調整すればよいのか気になる方も多いのではないでしょうか。
特にPhotoshopを使えば、直感的な操作でカンタンに文字間を調整することができます。
次に、Photoshopを用いた具体的なカーニング手順を解説していきます。
Photoshopでの具体的なカーニング手順
ここでは、Photoshopを使って文字間を調整する「カーニング」と「トラッキング」の具体的な方法を、実際のデザイナーがよく使用する手順に基づいて解説します。
まずは、画面左側にあるツールバーから「文字ツール」（Tのアイコン）をクリックし、文字を選択します。最初に全体の文字間を調整したいので、ドラッグして文字全体を選択しましょう。
選択がうまくいかない場合は、右下のレイヤーパネルから、文字レイヤーの「T」のサムネイルをダブルクリックして選択します。
次に、上部メニューから「ウィンドウ」＞「文字」を選択して、文字パネルを表示させます。
文字パネルには、選択しているテキストのフォントサイズやカーニング・トラッキングなどの情報が表示されます。
「文字」パネル内で、まず「カーニング」の自動調整を行います。
文字全体を選択した状態で、「メトリクス」または「オプティカル」を選択すると、自動的に文字間を調整してくれます。
- メトリクス：フォントが持っているカーニング情報を反映します
- オプティカル：Photoshopが文字の形状を基に自動で調整します
多くの場合は「メトリクス」の使用が適していますが、カーニング情報がなかったり、異なるフォントの組み合わせなど、綺麗に見えない時は「オプティカル」を使用します。
次に、デザインに合わせて全体の文字間を広めたり狭めたりするために「トラッキング」を調整します。文字全体を再度選択し、「トラッキング」の数値を変更しましょう。
数値を大きくすると文字間が広がり、小さくすると狭まります。数値は直接入力するか、プルダウンの選択、もしくはアイコンの横にカーソルを合わせて左右にドラッグすることで調整が可能です。
最後に、特定の文字間を細かく調整します。
例えば「麗」と「な」の間隔を調整したい場合は、「文字ツール」を選択している状態で、2文字の間にカーソルを置きます。
選択した文字間に対して「カーニング」を使用して微調整を行いましょう。
ちなみに、カーニングとトラッキングはショートカットを使用することで、より効率的に作業を進められます。
2文字の間にカーソル置いている状態もしくは、複数文字をドラッグして選択している状態で、Windowの場合は「Alt＋左右矢印キー」、Macの場合は「Option＋左右矢印キー」で、文字間の調整ができます。
以上の手順で、詰まって見えがちな漢字の文字間を広げ、広く見えがちなカタカナの文字間を詰めることで、全体の文字間を整えました。
最初は難しく感じるかもしれませんが、Photoshopでのカーニングは、デザインの質を高めるうえでとても効果的です。
ぜひ、この手順を参考に、色々な文字で試してみてくださいね。
基本的なカーニングの手順を押さえたところで、続いてはカーニングをより上手に行うためのポイントをチェックしていきましょう。
カーニングをする際の4つのコツ
カーニングを行う際、多くの人が感覚で調整しているかもしれませんが、要点を押さえるだけで、仕上がりが格段によくなります。
それでは具体的なコツをご紹介します。
【コツ1】シーンに応じたカーニングをする
カーニングは文字同士の余白を微調整して、可読性やデザイン性を高めるために行われます。
見出しやロゴなど、文字が大きくなるほど微妙な隙間が気になりやすくなるため、特に大きなサイズの文字組では、丁寧な調整が求められます。
一方で本文のような長文テキストでは、ソフトウェアやフォントに備わっている自動カーニングをベースに、必要最小限の手動調整にとどめることが一般的です。
以下では媒体ごとに、調整の方向（広げる／詰める／揃える）をまとめましたので、ぜひ参考にしてみてください。
■店頭ポスター（A1〜B1など大型））／オススメの字間調整：広げる（＋20〜＋60）
店頭ポスターは遠くから瞬時に内容を読み取ってもらう必要があります。そのため、カタカナと漢字の組み合わせや『』内の文字など、空きが目立ちやすい部分を中心に、字間をおおむね＋20〜＋60程度広げるとバランスが整います。ただし、広げすぎると文字列が散漫になるため、デザイン全体を確認しながら段階的に数値を調整しましょう。
■店内POP（A4前後）／オススメの字間調整：やや広げる（＋10〜＋30）
店内POPは閲覧距離が近いため大幅な調整は不要ですが、長くなりやすいカタカナ語や縦線が続く英字（TやEなど）が並ぶと字間のリズムが崩れがちです。該当部分を＋10〜＋30程度まで軽く広げると、読みやすさと勢いを両立できます。テキスト量が多い場合は自動カーニングを基準にし、気になる箇所のみ手動で微調整するのが効率的です。
■デジタルサイネージ／オススメの字間調整：詰める（−20〜−60）
動画やアニメーションを用いるサイネージでは、文字が動くたびに余白が強調されて視認性が落ちやすくなります。特に斜めのラインが交差するV-AやW-A、数字と記号が並ぶ「7 %」などは空きが目立つため、−20〜−60程度を目安に詰めてください。字間をタイトに整えることで、映像の動きがあっても文字列がブレず、引き締まった印象を与えられます。
■プレゼン資料（スライド全体）／オススメの字間調整：揃える（基準値を決めて固定）
統一感が大事なプレゼン資料では、基準値を決めて固定するのがオススメです。
始めに見出しと本文で共通の基準値（例として＋20）を決め、全スライドとロゴをその値に固定してください。途中で書体やサイズを変更しても、カーニング値を統一しておけば各ページの文字幅が変わらず、資料全体が整然とした印象にまとまります。
■webバナー／オススメの字間調整：詰める（−10〜−40）
webバナーは限られた面積で視線を引く見出しと、クリックを誘引したいCTAボタンが混在するため、それぞれに合ったカーニングを設定しましょう。
見出しは−10〜−40程度まで詰めて文字の密度を高め、スクロール中のユーザーの目を素早く引き付けましょう。対して、CTAボタン内のテキストは±0〜＋10程度の字間にとどめ、可読性を最優先にします。
【コツ2】文字ペアの特徴と全体のバランスを意識する
カーニングは特定の文字ペア、例えばアルファベットでは「A」と「V」や数字と記号の組み合わせなどで不自然な空きや詰まりが生じやすい傾向があります。
ただし、局所的に調整しすぎると全体の流れを損なう恐れがあるため、文章全体のバランスと読みやすさを常に意識することが重要です。また、日本語の場合は漢字の密度が高いため、過度に詰めすぎないよう注意する必要があります。
なお、英語で組まれた文字において、どうしてもバランスを取りづらい場合には、「合字（リガチャ）」を活用するのも効果的です。
リガチャは、複数の文字をひとつの形にまとめてデザインの一体感を向上させる方法で、「ff」「fi」といった英字で使用されるケースが一般的です。
【コツ3】自動設定を活用し、必要に応じて微調整する
Adobe IllustratorやInDesignといったDTPソフトには、文字の組み合わせに応じて自動的に文字間を調整する「自動カーニング機能」が備わっています。
この機能をまず有効にして基本の調整を行い、その後、気になる部分だけを手動で微調整すると、効率的に仕上げられます。
なお、フォントによっては組み込まれているカーニング情報が異なるため、書体を変更した際には文字の見え方を再確認し、改めて微調整しましょう。
【コツ4】最終出力を想定してチェックする
実際の使用サイズや印刷物・webなどの媒体特性によって、カーニングが適切かどうかの印象は変わります。特に印刷物の場合は実寸サイズで試し刷りを行い、離れて眺めたり、色々な人に見てもらったりして、文字間に不自然な部分がないかを確かめることが大切です。
そうした最終チェックを行うことで、デザイン性と視認性のバランスを損なわない、美しい文字組を完成させられます。
以上がカーニングを行う際に押さえておきたいポイントでした。
なお、今回カーニングの調整に使ったPhotoshopには、写真・画像の編集やデザイン制作を強力にサポートする、様々な機能が備わっています。
最後に、Photoshopのさらなる魅力についてご紹介しましょう。
Photoshopがあれば、どんな画像編集も思いのままに。
Photoshopは、プロのフォトグラファーやデザイナーから趣味で写真を楽しむ人まで、幅広いユーザーに支持されているPC向けの画像編集アプリです。画像の補正やエフェクトの追加はもちろん、合成や生成AIを使った画像生成など多彩な画像編集が可能で、プロフェッショナルな仕上がりを実現できます。
高度な写真補正ができる
Photoshopなら、写真の明るさや色味の微調整はもちろん、不要な要素の消去や高度な合成もカンタンです。例えば、写真の中で色あせてしまった空を鮮やかな青に置き換えたり、商品のカラーバリエーションをカンタンに試したりと、思い描いた色彩を瞬時に再現できます。
多彩なデザイン制作に役立つ
SNS用のバナー、ポスター、webグラフィックなど、Photoshopにはクリエイティブを形にするための機能が多数備わっています。写真やテキストを自由に組み合わせ、プロ仕様のデザインが誰でも手軽に作成できます。
リアルなイラスト作成にも使える
Photoshopのブラシツールは、使う人の感性をそのままに表現します。水彩画や油絵のような繊細なタッチ、筆圧感知や傾きに反応するリアルな描画で、手描きの風合いをそのまま再現できます。
魅力的な写真・画像をシンプルに共有
Photoshopで仕上げた写真は、最適なサイズや形式で出力でき、SNSやウェブでの共有もスムーズです。プロフィール写真からカバー画像まで、思い通りにカスタマイズできます。
Photoshopがあれば、今回ご紹介した方法や豊富な機能を使って、画像をイメージ通りに仕上げられます。この機会にぜひPhotoshopを使って、想像を超えた新しいクリエイティブの世界をお楽しみください。
Photoshopを7日間無料で試してみる
関連記事
Photoshop＆Illustratorで立体文字を作る方法を解説
立体文字を作る方法を3パターン解説。Adobe PhotoshopやIllustratorを使えば、飛び出すような立体文字やぷっくりした立体文字などをカンタンに作成できます。
フォント（日本語・英語）の種類・選び方と定番フォントを紹介
フォントには様々な種類があるため、特徴を把握し、目的に応じた使い分けが必要です。フォントの基礎知識やフォント選びのコツの解説に加え、ビジネスでの利用にオススメのフォントをご紹介します。
caas:content-type/article,
caas:business-unit/creative-cloud,
caas:country/jp,
caas:product-categories/photo,
caas:products/photoshop,
caas:features/edit-photos