2015.11.02

カーニング［文字詰め］で、デザインをワンランクアップ！

こんにちは！
Maromaroのchieです。

私がデザインをはじめた頃、画像などのタイトルや見出しなどのカーニング（文字詰め）や行間に注意するように言われていました。

フォントひとつでもデザインのイメージが変わるように、文字の間隔ひとつでサイトの品がぐっと変わるので、フォントをより美しく見せるためのテクニックとしてカーニングはかかせません！

カーニングって？

カーニングとは文字と文字の間の隙間を調整することを言います。

それってそんなに重要？と思われる方もいるかもしれませんが、まずは下記ご覧ください。

上がカーニング前で、下がカーニング後となります。

一見同じように見えますが、Web Designは[W]と[e] の文字の間隔が広いです。
ウェブデザインは［ウェブ］の間隔が広くなっています。

その間隔を調整することにより、より自然な見え方になります。

フォントやフォントサイズによってはカーニングが必要ない場合もありますが、
タイトルやキャッチコピーなどでは、カーニングを行うことで、よりワンランクアップしたデザインに仕上がります。

また、英字と和文が混ざっていると同じフォントサイズでも和文が大きく見えたり、数字は文字が詰まったり見えたりすることもあるので、タイトルやキャッチコピー以外でも見づらかったりする場合は、カーニングが必要です。

カーニングには、手動で調整する他に自動で行うこともできます。
Photoshop、Illustrator、Fireworksそれぞれに機能があり、使い方は大体同じです。

赤い囲いがカーニングで青い囲いがトラッキングです。
カーニングは文字一つ一つの間を調整できますが、トラッキングは文字全体、選択した文字を等間隔で空ける機能です。

Photoshopのカーニングには、数値を入れる他にメトリクスとオプティカルを選択することができます。※右図
［メトリクス］フォント自体に含まれる情報を元に自動で調整
［オプティカル］アプリケーションが文字の形状に基づいて、隣接する文字の間隔を調整

カーニングにまだ慣れていない場合は、まずはメトリクスとオプティカルで
確認してみてから、手動で調整してみるのもオススメです！

赤い囲いがカーニングで青い囲いがトラッキングです。
Illustratorの場合、数字入力、自動、オプティカル、和文等幅の4種類のカーニングがあります。※右図

［自動］Photoshopでの［メトリクス］にあたるものです
［オプティカル］アプリケーションが文字の形状に基づいて、隣接する文字の間隔を調整
［和文等幅］和文に対して等幅で、欧文に対してはメトリクスで間隔を調整

左がカーニングで数値により間隔を調整します。
自動カーニングは右側のチェックを入れることで調整されます。

PhotoshopやIllustratorに比べて、FireworksはWeb特化のアプリケーションなので、
カーニングについての設定は少ないみたいですね。

では、実際にカーニングの調整などを行ってみたいと思います。

［カーニング前］

［］や「、」、「ッ」、英字と和文のバランス、100の文字間などツッコミどころ満載です（笑）

［自動カーニング（Fireworks）］

余計な空きがつまり、カーニング前に比べてスッキリして多少読みやすくなった気がします。
若干詰まり過ぎな気もしますが、メリハリがないため、デザインとしてはもう一工夫欲しいところです。
こちらも和文と英文、100の文字間が気になります。

［手動］

［］や「、」、「ッ」、などの空きを調整し、カーニングだけを設定しました。
手動だと大変ですが、自動よりもより細かく設定できるのが手動の良いところです！

実際は、カーニングだけでは完成と言えないので、更に調整してみました。

・英字と数字は和文フォントに合うフォントに変更
・英字と隣り合った和文「で」を「r」とフォントサイズを合わせることで自然な流れに
・「％」は記号なので、他のフォントサイズに合わせるとインパクトが強いため、フォントサイズダウン
・メインキャッチのフォントの太さを太くし、より印象的に

どうでしょうか？
メリハリが付き、全体的に読みやすくなったかと思います。

カーニングの勉強ができるゲームもあるので、まずはゲームで慣れてみるのいいかもですね！
★試されるあなたのスキル…Web制作系ゲームを集めました

ポイントとしては、隣り合う文字とのバランスが重要です。
実例でも挙げたように、濁点、句読点、英字、数字などが含まれる場合はカーニングを心掛けましょう！

また、今回は実例を載せるため、カーニングを先に行いましたが、実際はフォント、フォントサイズ、太さなどを決めた後がオススメです。
カーニングを行った後に、フォントなどを変更すると、せっかくカーニングしたのにバランスが崩れることがあるので、要注意です。

カーニングはちょっと手間ですが、これ一つでデザインもワンランクアップするので、デザインする際は是非実践してみてください！