カーニング（文字詰め）

デザイナーならこだわりたいカーニング（文字詰め）

PhotoshopやIllustrator、Fireworks等グラフィックソフトで文字をデザインするとき、プロと一般の人とで差が出てくるのがカーニング（文字詰め）です。DTP業界出身の方には当然なこのカーニングですが、未経験の方や、最初からWeb業界に入った方には、なじみがないという場合も多いようです。ここでは、文字を美しく見せるためのカーニングに関する知識についてご紹介します。

カーニングってなに？

まずは、カーニングについてご存じない方の為に、カーニングとはどのような事なのかについてご紹介しましょう。

カーニングとは、文字と文字の間隔が開きすぎている時に、適切に詰める処置のことを言います。

「あれ、でも普通にIllustratorやFirewoks上で文字を入力すれば、適切に文字の間は調節されているのでは？」と思われた方がいれば、このページを作ったかいがあるというものです。文字で説明するよりも、現物を見た方が早いと思いますので、下記に例を挙げますね。

わかりやすいように極端な例を挙げましたがいかがですか？上にある文字と、下にある文字に違いを感じませんか？実は、上の例が、あるフォントでただ打ち込んだだけの状態の文字、下の例が、それにカーニングを施した文字です。個別に見るとなかなか気がつかないかもしれませんが、両方を比べてみると一目瞭然。カーニングを施した方が自然に見えることがよくわかることでしょう。

カーニングが必要な時とは！？

文字間の空きは、フォントやそのサイズによってはあまり気にならない事もあります。特に、小さめの文字ではあまり気にならないことも多いです。ですから、必ずしも全ての文字にカーニング処理を施す必要はありません。（そんなことをしたら制作コストがかかりすぎてしまいますしね。）

カーニングが必要なシーンで代表的なものをあげると、キャッチコピーなどがあげられます。キャッチコピーは、読ませながらも目立つのでデザイン的に美しくあるべきなのと、必然的にフォントサイズが大きい場合が多いので、文字間の空きが目立つケースがあるんですね。そういった時に、このカーニング処理をおこなって、適切に文字を詰めるのがデザイナーの役目というわけです。

とはいっても、カーニングの概念自体を知らなければ、文字間に空きがあったとしても、なかなか気がつかないものなんですよね。私も学習途中はカーニングを知らなかった訳ですが、当時作ったデザインをみて、「なんでこんなに文字が空いていたのに気がつかなかったんだろう」と不思議に思うほど空いていたものもありました。

もしこれを読んで「初めてカーニングという言葉を知った」という方は、これからはそういった点にも注目してデザインしてみてください。

なれてくると、カーニングが必要なケースがなんとなくわかるようになってきます。グラフィックスソフトで文字を打ったら、なんだか違和感を感じる……という感じがそれです。最初は意識する必要がありますが、なれると明らかにおかしい部分は気がづくようになりますので、慣れるまで意識し続けることが大事かもしれませんね。

カーニングの設定方法

それでは、具体的なカーニングの行い方をご紹介します。（なお、CS3上での設定方法になります）

Adobe Illustrator

上部メニュー内「ウィンドウ」→「書式」→「文字」ウィンドウの下記の部分を調整する事で、カーニングを調整することができます。

Adobe Photoshop

上部メニュー内「ウィンドウ」→「文字」ウィンドウの下記の赤丸部分を調整する事で、カーニングを調整することができます。

Adobe Fireworks

上部メニュー内「ウィンドウ」→「プロパティ」ウィンドウから下記の赤丸部分を調整する事で、カーニングを調整することができます。ただし、テキストオブジェクト全体を選択した状態で調整すると、カーニングではなく、トラッキング（全体のアキ）の調整になってしまいます。指定の位置にカーソルを合わせた状態で設定してください。

Web制作Tips

デザイン

├フリーの写真素材を有効活用しよう

├デザイナーならこだわりたいカーニング（文字詰め）

├文字のジャンプ率で適切なサイトイメージを演出する

├TPOを考えてハズさないフォントを選ぶ

└失敗しない配色の基本

ユーザビリティ

├そのフォントサイズ、適切ですか？

├リンクテキストをわかりやすくする

├フォームのリセットボタンを考える

├リンク切れ時に適切な404ページを表示をする

└フォームの確定ボタンは右?左?

コーディング

├文法チェッカーで正しい(X)HTML/CSSを書こう

└インデントで読みやすいソースコードを

その他

├ディレクトリ構造は適切に

└絶対パス?相対パス?ファイルの指定方法いろいろ