WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >フォント

今回は、地味なようで結構重要な「文字詰め（カーニング）」の注意点などをご紹介したいと思います。
おそらく、ネットで探しているといろいろな難しい用語が出てくると思いますが、用語よりも目と手で覚えていったほうが早くつかめると思うので、今回はなるべく誰でも分かる言葉で説明するつもりです。

基本的なカーニングの仕方

カーニングは、文字の固まり全体にかける場合と1文字1文字を動かす場合があります。
私は全体でかけても結局一部が気になってしまうので、1文字ごとにいじっています。
これはどちらでも良いと思います。

指定した文字を動かすには、動かしたい文字の左にカーソルがある状態で「Alt」を押しながら「←」「→」でできます。

この方法は、PhotoshopでもIllustratorでもどちらでも使えます。

文字の特性に注意して詰めよう

慣れてくると、綺麗に見える感覚が何となーくつかめてくるのですが、それまではチョコチョコいじっては「良いのかな？もっと詰めたほうがいいかな？あれ、バランス悪い…」と苦労すると思います。
私の場合、しばらくはシェイプでマスを作り、それを基準にして文字間を整えていました。（今でも時々やります）

これはちょっと極端にズラした例ですが、マスからずれていると、文字間もバラバラになっているのが分かりますよね。
一方、マスに合わせて調整したほうは、それぞれの文字間がそろっていて綺麗に見えると思います。

ただこの場合、注意しなければならないことがあります。
さっきの例のように、マスにきちんと収まる文字だけで構成された文ならスムーズなのですが、一部の文字はこの真四角のマスと合いません。
特に、かな文字やアルファベット。

かな文字やアルファベットは広がりやすく、クセもある

※言葉の意味は深く考えないで下さい（笑）

漢字と比べて、かな文字やアルファベットは小さかったり、真四角いっぱいに収まらない文字が多いため、漢字と同じ詰め方をすると、上のように広がりすぎになります。
まずは、全体に詰めましょう。

また、かな文字やアルファベットは、漢字と比べて輪郭にさまざまなパターンがあるので、それぞれの文字の特性に合わせた調整が必要になります。
例えば、

「W」や「A」などの斜めラインが含まれる文字

斜めラインが含まれる文字の横をきっちり空けてしまうと、空きすぎているように見えてしまいます。
特にこの「W」と「A」が隣り合った場合などは、斜めラインに合わせて少し多く詰めてあげると、バランスが良くなります。

「I」や「ト」などの縦長な文字

真四角に収まらない文字、つまり縦方向に極端に長い文字の場合も、きっちり空けてしまうとすき間が目立ちます。
こちらも、多めに詰めてあげましょう。
基準となるマスをあらかじめ縦に細長く作っておくと、感覚がつかみやすいです。

文字ごとに調整します

これで、上よりも収まりが良くなったと思います。
なお、斜めライン文字や細長文字の隣を詰めすぎてしまってもバランスが悪いので、ほどほどにしましょう。

なるべく文字がぼやけないように注意しよう

Illustratorではほとんどありませんが、Photoshopで作業していると起こる、「文字が何となくぼやける」困った現象についてです。

「Alt」＋「←」「→」でこまごまと調整していると気づくかと思いますが、文字がぼやけたりくっきりしたり、という変化をしますよね。
文字間ももちろん大切ですが、文字がなるべくぼやけずくっきりするポイントで収めるように気をつけてみましょう。

特に、例に挙げたように明朝体はゴシック体よりもぼやけやすいです。

微妙～な差なのですけどね・・・。
なお、横線はやむを得ないところがあるので、基本的には縦線を意識しましょう。

文字の詰め方で雰囲気を変えてみよう

基本的な文字の詰め方に慣れてきたら、デザインの雰囲気に合わせて詰め方を変えてみましょう。
いろいろなジャンルのWebサイトを巡っていると、どこも同じ詰め方をしているというわけではないことが分かります。

文字間を狭くすると、インパクトのある強い雰囲気になる

文字間をギュッと狭く詰めると、ぱっと見で文全体が目に飛び込んでくるせいか、インパクトが強くなります。
また、詰まっていることで密度が高いため、堅さや安定のイメージが浮かぶので、男性らしいカッコよさがあります。
（※私のイメージです）

製造系のサイトは男性らしくカッコいいデザインが多いので、文字は詰め気味にするといいのかな、と思います。
右のように、空き気味に作ってしまうとなんだか間が抜けていて、頼りない感じになってしまいます。

文字間を広くすると、余裕のある優しい雰囲気になる

文字間を広くすると、詰まっている時とは逆に文字をゆっくり読むことになるせいか、女性的で優しい感じになります。
また、ゆったりとした余裕が出るので、高級感やスタイリッシュ感も出そうです。

リゾート系は女性らしかったりエレガントなものが多いので、文字は余裕を持たせたほうが合うと思います。
左のようにギュッと詰めてしまうと、余裕がなくて「ゆったり」できなさそうです。

文字詰めって奥が深いです

文字詰め、カーニングはデザインの基本！
とはいえ、完璧に習得するのが意外と難しいものです。
いろいろなデザインを見て、練習したりチャレンジしてみましょう！