2026年5月19日更新

📌 この記事のポイント

• カーニングは「距離（ピクセル数）」ではなく「明るさ（白地のカタチと面積）」で判断する

• 文字によって輪郭が違うため、同じ距離でも見た目の余白は変わる

• 欧文は「縦ライン同士の距離を揃える」、和文は「文字種別の密度を均す」が指針

• Figmaも Option + < Option + > で個別カーニング可能（自動カーニングはなし）

• 上達は「良い例＋悪い例」を両方見て言語化する練習が最短ルート

カーニングは「距離（何ピクセル空けるか）」ではなく「明るさ（白地のカタチと面積）」で判断するスキルです。何ピクセルが正解という値は存在せず、書体・文字ペア・サイズ・媒体で全て変わります。

グラフィック歴31年の山津さんのウェビナーをベースに、駆け出しデザイナーが今日から実践できる「明るさで見る」カーニング思考法を、欧文・和文・Figma/Illustrator実装まで含めて体系化しました。

参考動画：
□△◯（カタチ）で捉える文字組み 〜「なんとなく」が「意識的」に変わる〜【前編】【後編】

カーニングとは｜「距離」で見ると失敗する理由

カーニングとは、隣り合う2文字同士の間隔を視覚的に均等にする調整作業です（Canva｜カーニングとは）。基本はトラッキング（全体字間調整）で整えてから、必要箇所だけカーニングで個別調整する流れになります。

ただし駆け出しが詰まる本質は 「どこまで詰めればいいか」の判断基準 が分からないこと。ここで陥るのが、文字と文字の距離（ピクセル数）で揃えようとする失敗です。

距離で見ると失敗する3つの理由

業界で「カーニングが必要になる代表ペア」とされるのが、「WA」「AV」「To」「Ta」などです（コリス｜カーニングのガイド）。

たとえば「HHOHH」を全て同じ距離で並べると、HH間の白地（平行な縦線）とHO間の白地（縦線とカーブ）でカタチも面積も違うため、H-Oの間が広く見える錯覚が起きます。これが「距離で揃えても視覚的に均等にならない」典型例です。

参考：Wikipedia｜カーニング / ART PEACE BLOG｜初心者デザイナーのカーニングのコツ でも、視覚的な均等性の重要性が解説されています。

「明るさ」で見る文字詰めの思考法

「明るさで見る」とは、文字と文字の間にある白い空間を、明るさを持った塊として認識する思考法です。それぞれの塊が「同じ明るさ」に見えるかどうかが、カーニング判断の基準になります。

ウェビナーで山津さんが語った核心の言葉：

「ここ最近の中で言うとしっくり来る言葉としては『明るさ』という言葉が今のところ1番伝わりやすいし感じやすい」

「明るさ」とは何を見ているのか

「距離」と「明るさ」の比較

明るさで見る練習法（3つの即効テク）

1. 目を細める：文字をぼかして見ると、白地の塊が認識しやすくなる

2. 画面から離れて見る：1m離れて全体の明るさバランスを確認

3. 逆さまにして見る：上下反転すると文字としてではなく図形として見える（プロが使うテク）

参考：321web｜カーニングのコツと考え方 でも、視覚的な均等性を見抜く練習法が紹介されています。

文字詰めで何を見ているか｜目線の使い分け

文字詰め中、目は3つのレベルを行き来します。

ウェビナーで山津さんは「手は1箇所を触りながら、目は全体を見る」と表現していました。個と全体、フォーカスを変えながら作業する、という意識が肝心です。

プロが使う「3文字ずつ確認」テク

ベテランデザイナーは、文字を1文字ずつではなく3文字単位でチェックする人もいます（クリエイターズファクトリー｜カーニングのコツ）。

例：「DESIGN」なら「DES」「ESI」「SIG」「IGN」と3文字ずつスライドさせて、それぞれのトリオで均等性を確認。1文字単位だと部分最適に陥り、全体単位だと細部を見落とすため、3文字単位が判断のスイートスポットになります。

欧文カーニングの実践指針｜縦ライン同士の距離を揃える

欧文カーニングの判断基準は、「縦ライン同士の距離を視覚的に揃える」ことです。

ウェビナーでの山津さんのアドバイス：

「欧文に限ってはちょっとヒント的なところをお伝えすると、それぞれの文字のそれぞれの縦のラインを揃える」

これらの縦ラインから縦ラインまでの距離を、目で見て均等にするだけで、欧文カーニングの精度が一段上がります。

欧文カーニング練習に使える無料ツール

• KernType：ゲーム感覚でカーニング練習ができる無料Webサービス。文字を動かして「正解」と比較・スコアリングできる

• Adobeカーニングクイズ：Adobe公式の文字詰めセンスを磨くクイズ

1日5分のKernType習慣で、欧文カーニングの感覚は3ヶ月で大きく育つと、もちには見えています。

和文カーニングの実践指針｜文字種別の密度を均す

和文カーニングは、文字種ごとの密度差を補正する作業です。漢字・ひらがな・カタカナ・記号で密度が大きく違うため、欧文より複雑になります。

和文で特に詰めたい組み合わせ

参考：321web｜カーニングのコツと考え方 でも和文の詰めパターンが整理されています。

IllustratorとFigmaの実装差

Figmaは個別カーニング可能ですが、書体メタデータをベースにした自動カーニングがないため、大量のタイトル・見出しを詰める案件はIllustratorが効率的です。逆に少数のKV見出しならFigmaだけでも完結します（Figmaで文字をカーニングする方法｜WOWN）。

いい文字詰めを見抜く目を養う3段階

文字詰めの判断軸は、たくさん見ることでしか養えません。ウェビナーで山津さんが整理していた上達プロセスは3段階に分かれます。

山津さんの言葉を引用すると、「いいものをたくさん見るだけでは身につかない。悪いものも見て、なぜ悪いのか言語化できるようになって初めて、上達する」というのが核心です。

日次トレーニングのおすすめ媒体

校長の見解｜カーニングの上達で大事にしている3視点

NOT DESIGN SCHOOL校長のもちが、カーニング上達で日々大事にしていることを3つの視点で語ります。

視点1｜Webデザイナーこそカーニングの感度が強みになる

Webデザイナーがカーニングに苦手意識を持つのは、紙媒体に比べて文字詰めに触る時間が構造的に少ないだけです。能力の問題ではないと、もちは思っています。

ただし、見方を変えると、これは強みに変えられる領域でもある。多くのWebデザイナーが「自分には関係ない」と諦めて手を出さない中で、LP・KV・OGPでカーニングを丁寧に詰めるだけで、明確に頭一つ抜けられます。

AIで誰でも一定水準のLPが作れる時代になったからこそ、最後の差はこういう細部のクオリティに集約される。「苦手な領域だから諦める」ではなく「苦手な領域だからこそ踏み込んで強みにする」という発想転換が、もちには見えています。

視点2｜最後は自分の目を信じて調整する

Adobe Fontsのメトリクスカーニング、Figmaのオートカーニング、AIの提案。便利な機能・ツールは増え続けていますが、最後の0.1pxは自分の目でしか判断できないと、もちは考えています。

特に「数値的には整っているのに違和感がある」という感覚を無視しないことが肝心です。それは経験を積んだ自分の目が拾った大事なシグナル。数値上は均等でも、目が違和感を覚えるなら、その違和感を信じて微調整する勇気を持ってほしいと感じます。

ベテランほど「自動値に最後の手を入れる」習慣が身についている、という共通点があります。

視点3｜見るだけじゃなくてトレースもしてみる

「目を養う」インプットだけでは、判断軸は育っても手が動くようにはなりません。だから、もちのおすすめはプロの仕事をFigmaやIllustratorでトレース（再現）してみることです。

雑誌のタイトル、有名ブランドのロゴ、好きなLPのKVを、同じ書体・同じサイズでトレースしてみる。完コピを目指すうちに、「ここは2px詰めてるのか」「Oの両側は0.5px広げてるのか」と、プロの判断が手の感覚として残ります。

月に1個でも、トレース→自分のカーニングと比較→言語化、を繰り返し、半年も続けていれば目と手の両方が大きく育つでしょう。

限界と注意点

限界1｜全タイトルを手詰めする時間はない

LP1本で見出し・タイトルが10-20個ある場合、全部を手詰めするのは非現実的です。

時間配分も含めて、優先度を決めましょう。なんでもかんでもカーニングにこだわりすぎると、時間が足りなくなります。

限界2｜Webテキスト（HTML/CSS）では個別カーニング不可

CSSのletter-spacingはトラッキング相当で、個別ペアカーニングはできません。特にロゴや厳密な詰めが必要な箇所は、画像書き出しが現実解です。

限界3｜やりすぎは可読性を下げる

詰めすぎは可読性を逆に下げます。「整っているが読みづらい」は本末転倒。読みやすさが最優先です。

FAQ

Q1｜Figmaで個別カーニングはできますか？

できます。Figmaは文字間にカーソルを置いた状態で Option + < / Option + >（Mac）または Alt + < / Alt + >（Windows）のショートカットで、その位置の字間を1文字単位で詰めたり広げたりできます。右パネルの「Letter Spacing」もカーソル位置に効くので、数値指定での個別調整も可能です。

ただしIllustratorのメトリクスカーニング（書体メタデータベースの自動詰め）やオプティカルカーニング（自動詰め）に相当する機能はないため、すべて手動調整になります。大量の見出しを詰める案件ではIllustrator、Web中心の制作ではFigma、と使い分けるのが現実的です。

参考：Figmaで文字をカーニングする方法｜WOWN

Q2｜「明るさで見る」の感覚を掴むコツは？

Q3｜カーニングを楽しく練習できる無料ツールはありますか？

1日5分のKernType習慣で、欧文カーニングの感覚は3ヶ月で目に見えて変わります。

Q4｜カーニングの良い例を学べるおすすめソースは？

毎日10分のインプットを習慣化するだけで、半年後に大きな差になります。

まとめ｜カーニング上達の流れ

カーニング上達の核心は、シンプルです。

そして、ツールには得意・不得意があります。Figmaの強み・弱みを知って、適材適所でIllustratorと使い分けるのがプロの判断です。AI時代こそ、最後の仕上げを担う人間の「目」が価値を持ちます。

合わせて読みたい：

• デザインのセンスは磨ける｜形容詞起点の3ステップ完全ガイド

• デザインセンスを後天的に身につける方法｜「分解→再現」サイクル

• 駆け出しデザイナーのためのClaude入門