塾長 尾上こんにちは！ぬるま湯デザイン塾の尾上です。
メモりすこんにちは！Webデザイナーのメモりすです。
お手本と同じフォントを選んだのに、自分のバナーだけ素人っぽく見える…
文字のどこを直せばいいのか分からないまま、なんとなく完成にしている…
デザインの制作の際に、どこか「せっかち」な印象になったことはありませんか？フォントも色もお手本どおりなのに、なぜか自分の一枚だけ落ち着かない。
こういった違和感の原因は文字同士の左右の余白の調整が、まだ手つかずになっていることです。この記事で分かることは次の3つです。
- カーニングの意味と、トラッキング（文字間隔）との違い
- 詰めすぎ・空きすぎを自分で見分ける判断基準
- Photoshopの文字パネルでの具体的な操作
カーニングとは？文字同士の左右の余白を調整すること
メモりすカーニングって、文字を詰めることでいいのかな？
塾長 尾上そうそう。反対に詰まりすぎたところを広げるときもあるよ！
カーニングとは
文字同士の間隔を調整し、文章やデザインの見た目を美しく整える技術のこと。「2つの文字の間に存在するスペースの調整」です。
手を入れるのは、文字と文字のあいだにできるすき間。文字そのものの形は変えません。日本語では「文字詰め」とも呼ばれ、ほとんど同じ作業を指します。
Photoshopで実際に大きなフォントサイズで「トマト」というテキストを作ってみてください。最初の「ト」と「マ」が自然と広がってみてませんか？この間隔を詰める作業がカーニングです。
カーニングのコマンド
文字ツールで、調整したい2文字の間にカーソルを置いて操作します。
| 操作 | Windows | Mac |
|---|---|---|
| 文字間を詰める | Alt ＋ ← | Option ＋ ← |
| 文字間を広げる | Alt ＋ → | Option ＋ → |
詰めるだけではなく、詰まりすぎている箇所を広げるのもカーニングの仕事です。Webの制作で使われるのは、次のような場所です。
- 広告バナー・サイト用バナーのキャッチコピー
- LPのファーストビューの見出し
- メインビジュアルのタイトル
どれも文字を大きく見せる場所ですね。文字が大きいほど、すき間のばらつきはそのまま目に入ります。
無調整のままの一行と、あいだを整えた一行を並べてみると、下の行のほうが言葉の塊として読めます。文字の形は1つも変えていません。変えたのはあいだのすき間だけです。
カーニングとトラッキング（文字間隔）の違い
メモりすカーニングとトラッキング、どっちも文字の間隔を変えるんじゃないの？!
違いは「どこを変えるか」の範囲です。
カーニング
「特定の文字ペア」のみを個別に詰めたり広げたりして調整する方法
トラッキング
「選択したテキスト全体」に対して均一に文字間隔を変更する方法と書いています。
| 比べるポイント | カーニング | トラッキング |
|---|---|---|
| 変わる範囲 | 特定の文字ペアだけ | 選択したテキスト全体 |
| 指定のしかた | 2文字のあいだにカーソルを置く | 文字列を選択する |
| 向いている場面 | 気になる1か所を直す | 全体の密度を先に決める |
作業の順番は、範囲の広いほうから始めるとやりやすくなります。
- トラッキングで文字列全体の密度を決める
- そのあとカーニングで、気になるペアだけ直す
先に1か所ずつ直してしまうと、あとで全体を動かした時点でやり直しになります。操作する場所はどちらもPhotoshopの［文字］パネルなので、迷うのは選び方だけです。
文字を詰める作業は、関係のあるものを近づけて意味の塊を作る「近接」を、文字1つの単位でやっていることになります。近接を含む土台の考え方は「デザインの4原則とは？近接・整列・反復・対比をWebの例で解説」で整理しています。
詰めすぎ・空きすぎを見分ける判断基準
メモりす正解の数値を覚えれば済むと思ってた…
塾長 尾上むしろ覚える必要もないよ。文字の「あいだの面積」がそろってるかを確認するだけ！
数値の暗記より「あいだの面積」をそろえる
フォント・文字サイズ・隣り合う文字の形で、ちょうどいい位置は毎回変わります。同じ−20が、あるフォントでは詰まりすぎ、別のフォントではまだ空いて見えます。
特に同じ言葉でもひらがなとカタカナで、かなり印象は変わります。
重要な視点は、隣り合う文字のあいだにできるすき間の面積が、どのペアでも同じくらいに見えるかどうかです。数値だけそろえても、面積の見え方がばらついていれば直っていません。
面積で見る理由は、すき間の形が文字ごとに違うからです。
特に注意したいのが「ローマ字」を使用する際です。斜めの文字が並ぶと、上か下に三角形のすき間ができるためです。
1、斜め線が含まれるの文字（A、K、V、W、Y）
2、線が突き出ている文字（F、L、T）
また、日本語では句読点やカッコのまわりが空いて見えやすいほか、小さく見える「っ」「ー」の前後もばらつきやすいです。
どのペアも文字幅は規則どおりに並んでいます。それでも目にはすき間の広さが違って映るため面積で見る、という順番になります。
目を騙されないための3つの確認方法
学び方として重要なのは「見て、止めて、やってみる」を繰り返すことです。文字詰めでも、手を止めて見る時間をはさむと精度が上がります。
- 表示を小さくして俯瞰で見る。文字列が1つの塊として均一に見えるかを確かめる
- 左右を反転して見る。意味が読めなくなると、形の不均一に気づきやすい
- 時間を置いて見る。翌日に開くと、空きすぎた箇所が目につく
作業中の目は、直したい箇所に寄りすぎています。
カレーを一晩寝かせると味がより際立ちますよね。同じようにデザインも一度引いて見ると、詰めたつもりの1か所だけ浮いていることに気づけます。
詰めるほど良いわけではない
詰める調整が効くのは、大きく見せるキャッチコピーや見出しです。本文のような小さい文字を詰めると、単語の区切りが分からなくなって読みにくくなります。
「詰めれば上手く見える」と覚えてしまうと、本文まで詰めて読みづらいバナーになります。
読ませたい文字と、印象を作る文字を分けて考えてください。
判断が分かれるのは目的です。読ませたいのか、印象を作りたいのか。デザインは目的達成の手段であり、文字詰めもその手段の一つにすぎません。
詰めすぎ・ちょうど・空きすぎを3段に並べると、違いがはっきりします。詰めすぎた段はすき間が消えて言葉の区切りが読み取れません。空きすぎた段は文字が1つずつばらばらに立って、塊として見えなくなります。真ん中の段だけが、すき間の面積がそろっています。
Photoshopでカーニングを調整する方法
メモりす文字パネルのどこを触ればいいのか、そこが知りたい！
1、文字パネルを開く
- 画面左側のツールバーから「文字ツール」（Tのアイコン）をクリックする
- 上部メニューの「ウィンドウ」＞「文字」を選び、文字パネルを表示する
ここから先で触るのは3か所だけです。①カーニングの設定、②トラッキングの設定、③メトリクス／オプティカルの選択。この番号は、あとの図の番号と対応しています。
2、調整したい文字の間にカーソルを置く
カーニングは、調整したい2文字の間にカーソルを置いて行います。たとえば「トマト」の「ト」と「マ」の間を調整するなら、その間を文字ツールでクリックします。
文字列を選択すると、調整する範囲が変わります。
| 調整の種類 | 操作前にすること | 調整される範囲 |
|---|---|---|
| カーニング | 2文字の間にカーソルを置く | その2文字の間だけ |
| トラッキング | 調整したい文字列を選択する | 選択した文字列全体 |
カーソルを置いたら、［文字］パネルの［カーニング］の数値を変更します。数値を小さくすると文字間が詰まり、大きくすると広がります。先でも述べていますが、キーボードでも調整できますので再度掲載します。
| 操作 | Windows | Mac |
|---|---|---|
| 文字間を詰める | Alt ＋ ← | Option ＋ ← |
| 文字間を広げる | Alt ＋ → | Option ＋ → |
※横書きの場合の操作です。
まずは矢印キーで少しずつ動かしてみましょう。数値をそろえることよりも、文字と文字のすき間が、見た目でバランスよく並んでいるかを確認するのがポイントです。
3、メトリクスとオプティカルの使い分け
文字パネルのカーニング欄には、数値のほかに2つの選択肢があります。アドビの解説記事の説明では、メトリクスは「フォントが持っているカーニング情報を反映します」、オプティカルは「Photoshopが文字の形状を基に自動で調整します」。
同記事には「この機能を使うには、カーソルを文字と文字の間に置くのではなく、適用したいテキスト全体を選択しておき、「カーニング」の項目でいずれかを選択します」と書かれています。手で数値を入れるときとは、選び方が逆ですね。
進め方としては、まずメトリクスかオプティカルで全体の詰まりを作り、それでも気になるペアだけ手で直します。どちらが合うかはフォントによって変わるので、両方当てて見比べるのが早いです。
メトリクスはフォントが持っている情報を使う設定なので、フォントが変われば結果も変わります。お手本のフォントを突き止めたいときは「画像からフォントを調べる方法｜無料ツールと精度を上げるコツ」が役に立ちます。
［文字］パネルには［ベースラインシフトの調整］という項目もあります。アドビのPhotoshop入門記事は、日本語フォントで「時間や住所の番地などのように、数字と半角記号（コロンやハイフン）を組み合わせると、記号が数字に対して下がって見えることがあります」という場面で、ここを使うとよいと書いています。左右のすき間を扱うカーニングとは別の調整です。
Webデザインで文字詰めを扱うときの注意点
Photoshopで詰められるのは、バナーやメインビジュアルのように画像として書き出す文字です。
HTMLのテキストはブラウザが表示するため、Photoshopと同じようには詰まりません。
つまり、デザインデータで詰めた見た目を、そのままコーディングで再現できません。
CSSには font-kerning というプロパティがあります。MDN Web Docsは「フォントに存在するカーニング情報の使用を制御します」と説明しています。初期値は auto で、「カーニングを使用するかをブラウザーに任せます」。normal は適用の要求、none はフォントのカーニング情報を使わない指定です。
MDNは auto の説明にこう添えています。「フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう」。小さい文字で神経を使いすぎなくていい、という裏づけにもなりますね。
全体の間隔を変えたいときは letter-spacing という別のプロパティになります。CSSの深追いはここまでで十分です。バナーの文字はPhotoshopで詰める、という切り分けを覚えておけば実務では困りません。
まとめ
カーニングは特定の文字ペアの調整、トラッキングは選択した範囲全体の調整。Photoshopではどちらも［文字］パネルで設定します。
判断のしかたは数値の暗記ではありません。隣り合う文字のあいだにできるすき間の面積が、どのペアでも同じくらいに見えるか。ここだけを見ます。
1、カーニングはペア単位、トラッキングは選択範囲全体。
2、数値を覚えるより、あいだのすき間の面積をそろえる。
3、Photoshopは文字と文字のあいだにカーソルを置いてから数値を入れる。
手元にあるバナーを1枚開いて、キャッチコピーの1行だけ直してみてください。表示を小さくして見比べれば、直したほうが落ち着いて見えるはずです。
Webデザインの学び方に関する情報を受け取りたい方は、ぬるま湯デザイン塾のLINEにご登録ください。5日間チャレンジ（無料体験）も実施中です。
5日間チャレンジの内容や案内時期などの詳細については、LINEでご案内します。
＼ LINEのお友達登録はこちらから ／
参考にした情報源
- アドビ「カーニングとは？やり方とポイントをはじめからわかりやすく解説」https://www.adobe.com/jp/creativecloud/roc/blog/photography/kerning.html
- Adobe Blog「タイポグラフィを最適化するためのカーニングの基礎知識」https://blog.adobe.com/jp/publish/2022/02/14/cc-web-what-is-kerning-typography
- Adobe Blog「【Photoshop入門】Webデザインをはじめよう！第3回 Webデザインに文字を配置しよう」https://blog.adobe.com/jp/publish/2014/03/11/web-start-photoshop-web-design-03-add-text
- Adobe Blog「Photoshop ＆ Adobe Fontsで文字をもっときれいに見せる！｜もっとAdobe Fonts！06」https://blog.adobe.com/jp/publish/2024/08/21/cc-design-adobefonts-tips06
- MDN Web Docs「font-kerning」https://developer.mozilla.org/ja/docs/Web/CSS/font-kerning
※2026年9月時点の各ページの記載にもとづきます。本文の数値はアドビの解説記事が示すwebバナーの目安で、すべての案件に当てはまる正解の値ではありません。
塾長 尾上次のブログでもまたお会いしましょう！
メモりすバイバイ！またね！
