カーニングとは？｜テキストを美しく見せるための5つのコツを解説

「カーニングってなに？」
「カーニングはした方がいいのかな」

と、思うことはありませんか？

カーニングをおこなえば、文字が読みやすくなり、見た目も良くなります。

ではカーニングとはどのようにおこなうのでしょうか？

そこで今回は

について解説していきます。

この記事を読めば、カーニングがなぜ重要視されているのかが理解できます。

せひ最後まで読んでみてください。

カーニングとは文字の間隔を調整すること

カーニングとは、ソフトウェアで入力した隣り合う二文字の間隔を調整することです。

入力した文字をそのままにしておくと、文字同士の余白が均等でないため、全体のバランスが崩れて見えてしまうのです。

つまり全体を美しく見せるために、余白の微調整・字詰めをおこないます。

作業に時間はかかりますが、カーニングをおこなうことでユーザーにとっては読みやすくなります。

WEBデザイナーを目指すなら必要なプログラミングスキル。
自分もプログラミングを学習してみたい！と思った方には、初心者でも確実にプログラミングスキルが身に付く【DMM WEBCAMP】がおすすめです。

97%以上の受講生がプログラミング初心者からのスタートであるため、ライフコーチによる手厚い学習サポートが受けられます。
また、プログラミングの基礎知識からしっかり身につけられるコースも用意されており、安心して学習を進めていくことが可能です。

---

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

カーニングとトラッキングの違い

カーニングとトラッキングは「文字の間隔を調整すること」は共通していますが、少し違う作業です。

カーニングは隣り合う二文字の余白の調整をおこないます。

一方、トラッキングはテキスト全体の間隔もしくは、複数の文字を調整することを指します。

つまり、カーニングは文字の組み合わせによって間隔を変えることができるのに対して、トラッキングは指定したテキストの文字間のスペースを等間隔に調整するものであるということです。

カーニングとトラッキングを使い分けながら調整をおこうことで、より見やすい文章が完成します。

カーニングで意識する5つのポイント

基本的にカーニングを行う際は隣り合う文字を意識することがポイントです。

なぜかというと、文字を意識することが文字のバランスを調整して、読みやすくなり、プロフェッショナルな仕上がりになるからです。

隣り合う文字を意識しながら、下記のポイントを取り入れてみてください。

ひとつずつこなせば、テキスト全体はスッキリとした印象に変わります。

1.リーディングとトラッキングをおこなう

カーニングをおこなう前に、リーディングとトラッキングしましょう。

リーディングとは、活字テキストの縦の行間スペースのことをいいます。

要するに、まずはテキスト全体の「横の間隔」と、「縦の間隔」を調整する必要があるということです。

全体の大まかな余白調整をおこなったあとに、カーニングをおこないます。

そうすれば、カーニングが必要である箇所もみつけやすくなります。

2.ロゴや見出しに自動調整機能を使用しない

ロゴや見出しは、コンテンツにとって重要な箇所なので手動で調整します。

Webサイト上の記事などは、どうしても膨大な時間がかかってしまうため自動調整機能をつかわなければなりません。

しかし、ロゴや見出しは企業をイメージしています。

なのでデザイナーの感覚で微調整をおこない、一番美しく見える間隔でデザインしましょう。

3.文字やフォントによって処理を変える

カーニングをおこなう際は、文字やフォントによって処理を変えるのがポイントです。

なぜなら、通常の均一に空けられた文字スペースでは理想的とはいえず、見た目を統一するためには調整する必要があります。

具体的にはアルファベットであれば

このような場合に、文字の間のスペースが空いているように見えてフィットしなくなるからです。

おしゃれなフォント30選を紹介！種類や選ぶポイントもわかりやすく解説

4.文字サイズに気をつける

文字のサイズは、カーニングに影響します。

具体的には設定した文字の大きさによって、異なる動きをするからです。

カーニングをせっかくおこなったのに、その後に文字の大きさを変更するとまたバランスが崩れてしまいます。

なので、文字サイズは、カーニングをおこなったあとに変更するようにしましょう。

5.カーニングはやりすぎない

カーニングのやりすぎは禁物です。

なぜなら、文字の間隔が狭くなりすぎてしまうとテキストはとても読みづらくなります。

さらに、二つの文字がくっついて違う文字に見えてしまうこともあるからです。

具体的には文字の間隔が狭いことによって

このようなことが起きる場合があります。

違う文字に見えてしまっては伝えたいことを正しく伝えることができません。

スキマ時間に効率よくプログラミングを学習したいという方には、プログラミングスクールがおすすめです。

受講料はかかってしまいますが、短期間で効率よくプログラミングスキルを習得することが可能です。
【DMM WEBCAMP】なら、初心者向けに開発された独自のカリキュラムと充実した学習サポートで、挫折することなくプログラミング学習を進めることができます。

また、学習を進めていく中で分からないことが出てきたときは、 チャットもしくはビデオ通話でメンター（講師）に好きなだけ質問をすることができます。

オンラインと教室受講のどちらも可能なので、あなたのライフスタイルに合わせて好きなコースを選択してみてください。

---

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

カーニングが必要な箇所を紹介

カーニングをおこなう箇所はテキストだけではありません。

具体的には以下のような箇所をカーニングする必要があります。

上記は、コンテンツを見た際に、ユーザーが目に入る場所です。

例えば、「人気居酒屋BSET10」という記事を掲載するとします。

タイトルを見たときに「人　気居酒　屋BES　T1 0」と、このようにタイトルのバランスが崩れている時点でユーザーは離れてしまいます。

これは少し大げさな例ではありますが、ユーザーに「記事を読みたい」と思わせるには、バランスを整えてあげることは非常に大事なのです。

目立つ箇所・興味を持ってもらいたい箇所は必ずカーニングをおこないましょう。

カーニングの方法をソフト別のそれぞれ3つ解説

カーニング機能があるソフトはいくつかありますが、代表的な3つのソフトでのカーニング方法を解説します。

どれもカーニング方法は簡単なので活用してみてください。

それぞれのやり方を解説していきます。

1.Illustrator

Illustratorは、図形の作成やロゴの作成に優れていて、カーニング機能も搭載されています。

Illustratorでカーニングをおこなう場合は、以下の手順になります。

文字同士の間隔を広くしたい場合は「プラスの数字」、間隔を狭くした場足は「マイナスの数字」を入力します。

Illustratorはこれだけでカーニングをおこなえます。

2.Word

事務作業など、一般の業務にも使用されているWordでも、簡単なカーニングができます。

Wordのカーニング方法は以下の手順になります。

この「詳細設定」を開いているときに、「カーニングを行う」にチェックされているか確認してください。

ロゴやイラストなどの本格的なカーニングはおこなえませんが、資料を読みやすくしたりなど簡単な余白調整は可能です。

3.Photoshop

Photoshopのカーニングは、ショートカットキーを使用できます。

Windowsの場合は以下の手順になります。

Macの場合は以下の手順になります。

このように、Photoshopはショートカットキーを使えば簡単にカーニングがおこなえます。

まとめ：カーニングは繰り返し練習が必要

本記事では、カーニングについて解説しました。

記事全体のテキストは自動調整のカーニングで十分ですが、ロゴ見出しは手動でカーニングをおこなう必要があります。

決められた余白はないので、デザイナーの感覚が重要です。

繰り返し練習をおこなって、間隔を掴んでいきましょう。