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

2023.01.26
カーニング

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

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

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

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

そこで今回は

  • カーニングとはなんなのか
  • カーニングをおこなうポイント
  • ソフトごとのカーニング方法

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

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

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

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

文字を書く人

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

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

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

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

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

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


「お金の心配、人間関係のストレス、仕事への不満を抱えているあなたへ」

今の生活を変えるには、〇〇が必要です。

年収を上げたい
人間関係に囚われない生活を手に入れたい
やりがいに満ちた仕事を見つけたい

と思っているあなたへ向けて、
人生を変えるロードマップを無料でプレゼントします!

完全無料なので、悩む前に今すぐ下のバナーをクリックして資料を読んでみてください!

\簡単30秒/

下のバナーからLINE友だち追加をして、無料で限定資料をGET!

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

考える男女

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

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

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

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

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

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

会話する2人

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

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

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

  1. リーディングとトラッキングをおこなう
  2. ロゴや見出しに自動調整機能を使用しない
  3. 文字やフォントによって処理を変える
  4. 文字サイズに気をつける
  5. カーニングはやりすぎない

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 傾斜のある文字(A,V,W)
  • 交差する文字(F,L,T)
  • 文字同士の組み合わせ

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

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

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

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

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

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

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

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

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

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

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

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

  • oとlがくっついてdやbに見える
  • rとnがくっついてmに見える

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

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

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

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

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

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


「やばい、今月はもっと節約しないと...」
「はぁ、嫌いな上司の顔見たくないな....」
「やりがいのない仕事ばっかで将来が憂鬱...」

と思ったことはありませんか?

そんなあなたに向けて
「人生を変えるロードマップ」を無料でプレゼントします!

年収をUPさせる
人間関係に囚われない生活を手に入れる
やりがいに満ちた仕事を見つける

これらを達成するためには、正しい思考法を学ぶ必要があります!

完全無料なので、悩む前に今すぐ下のバナーをクリックして資料を読んでみてください!

\簡単30秒/

下のバナーからLINE友だち追加をして、無料で限定資料をGET!

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

パソコンを打つ男性

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

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

  • 見出し・タイトル
  • タイトル
  • バナー
  • ロゴ

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

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

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

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

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

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

OKサインの女性

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

  1. Illustrator
  2. Word
  3. Photoshop

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

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

1.Illustrator

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

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

  • 1.「文字パネル」を表示
  • 2.文字同士の間にカーソルを置く
  • 3.文字パネルの「カーニング」欄に数値を入力

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

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

2.Word

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

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

  • 文字を選択する
  • 「ホーム」タブを選択
  • 「フォント」グループのダイアログを開く
  • 「詳細設定」を選択
  • 「文字幅」と「間隔」で数値を入力して設定をおこなう

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

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

3.Photoshop

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

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

  • 文字ツール「T」を使用して、文字の範囲を選択
  • 文字の間隔を広くする場合は、「Alt+Ctrl+¥ キー」
  • 文字の間隔を狭くする場合は、「Alt+Ctrl+Backspace キー」

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

  • 文字ツール「T」を使用して、文字の範囲を選択
  • 文字の間隔を広くする場合は、「Option+Command+¥ キー」
  • 文字の間隔を狭くする場合は、「Option+Command+Delete キー」

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

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

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

  • カーニングとは文字の余白を詰めて見た目を整えること
  • 隣り合う文字を意識すること
  • ユーザーの目が届きやすい箇所はカーニングをこなう

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

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

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

エンジニア転職のプロがマンツーマンで悩みを解決! 累計卒業生数3,000人以上* 転職成功率98%* *2020年4月時点

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中

無料カウンセリングに申込む

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5