• TOP
  • ブログ
  • デザインに欠かせない「カーニング」の大切さと方法にスポットをあててみた

ブログ

デザインに欠かせない「カーニング」の大切さと方法にスポットをあててみた

こんにちは。最近「ソイレント」という飲み物が気になっているデザイナーの松田です。 今回はカーニング(文字詰め)についてお話したいと思います。 デザインの基本であり、私たちデザイナーにとってはとても大切な作業です。この工程をするとしないとではデザインに大きな差がでてきます。ただ非常に地味な作業ですので、ふだんあまり表立って話題になりません。 そこで今回はこの作業にスポットを当て、企業のWEB担当の皆さんに少しでも苦労をわかっていただく...いや、ノンデザイナーの方が社内で作業しなければならない時などの参考にしていただければと思います。作業環境はPhotoshopです。


■目次■

1.カーニングとは

2.文字の特徴を知りましょう。

3.photoshopでのカーニング方法

4.カーニングとトラッキングについて

5.カーニングの自動設定

6.カーニングの練習ができるサイト


■カーニングとは

カーニング(文字詰め)とは、見た目にスペースが空きすぎていたり、狭くなりすぎていたり 違和感のある文字間隔を改善・調整することを技法のことを指します。 illustratorやphotoshopなどで通常文字を打っただけでは「ベタ組み」と呼ばれ、理想的な文字組みとは言えず、基本的に文字と文字の間が空きすぎています。それをカーニングでデザインのバランスを調整します。01.png


■文字の特徴を知りましょう。

文字は1文字1文、字形が違うのでカーニングするにも注意が必要です。 文字の配列で気をつけなければならない組み合わせも出てきます。 例えば「W」「A」など斜めのラインが特徴の文字や、細い縦長の「I」など。 少し多く詰めてあげると、バランスが良くなります。02.png日本語になると、「ひらがな」「カタカナ」「漢字」と三種類の文字を使って構成になるので、とても複雑になりますのでさらに注意いていかなければなりません。 「ひらがな」「カタカナ」は「漢字」と違い間隔が空く傾向にあります。原則詰めるよう心がけましょう。特に「っ」「と」など小文字との間は特に空いて違和感が出てきてしまいますので、注意して間隔を調整しましょう。

03.png


■photoshopでのカーニング方法

カーニングについて長くなりましたが、ここからがphotoshopで実際にどのようにカーニングしていくか説明していきます。 主に使っていくのが「カーニング設定」と「トラッキング設定」です。

■カーニング設定とトラッキング設定について

文字の固まり全体に間隔のアキを調整と「トラッキング設定」と 特定の文字の組み合わせに対して文字間のアキをを調整する「カーニング設定」があります。 カーニング・トラッキングともに、数値を増減させることで、文字間隔のアキ・詰めが調整できます。

04.png ショートカットもあり、動かしたい文字の間にカーソルがある状態で Windowsは「Alt」を押しながら「←」「→」 Macは「option」を押しながら「←」「→」で調整することができます。 この操作はIllustrator・photoshopも同じす。これを知ってると知らないとでは作業のスピードが全然違ってくるので覚えておきましょう。

05.png


■カーニングの自動設定

さらに、便利な機能としてカーニングのオプションにある「メトリクス」と「オプティカル」というものがあります。どちらも文字組みに対して、自動で文字間を調整してくれる設定なのです。

06.png

【二つの違い】

メトリクス:英文フォントのほとんどに含まれているペアカーニング情報に基づいて調整されます。 オプティカル:隣り合った文字間のアキを文字の形に基づいて調節することができます。

07.png 基本的な文字詰めはカンタンに設定することが出来ます。初心者の方はまずオプティカルで設定してから気になるところを調整という方法をおすすめします。 いずれは自分で設定できるようになるよう心がけましょう。


■カーニングの練習ができるサイト

カーニングのことはわかったけど、何が正しいかわからないという方もいらっしゃると思います。 そこで練習するサイトがあるのはご存知でしょうか。 ここである程度の感覚を覚えられるのではないでしょうか。 初心者でない方でも、カーニングの大切さを再認識できるゲームです。 とても楽しいので是非、やってみてください。 カーニングゲーム『Kern Type, the kerning game』はこちら

08.png 操作は簡単です。 マウスで選択して所定の位置まで持っていけば開始されます。 開始されると、位置がずれた状態のフォントが並んでいるので、マウスでフォントを選択し動かすか、キーボードの矢印ボタンで操作できます。

09.png編集が終わったら"Compare"ボタンを押しましょう。 すると、点数とともにカーニグの位置が表示され、自分で編集したカーニングと正解のカーニングと比較することができます。

10.pngいかがでしたでしょうか。 カーニングはデザインの基本です。ですが、結構難しいです。 いろんなデザインを見て感じて、私もまだまだ学んでいくつもりです。 今後もいろんなデザイン技術を紹介していくつもりですので、興味があればそちらもよろしくお願いいたします。 それでは、よいPhotoshopライフを! ※冒頭でお話した「ソイレント」という飲み物とは、人間が生存に必要な栄養素がすべて含まれたものらしいです。なのでそれを飲んでいれば、実質人間は生きていけるそうです。半年「ソイレント」だけを飲んで過ごしている超人もいるみたいです。 <デザイングループ 松田 嶺>


<関連記事>

■デザインの前に入れておきたいPhotoshopプラグイン/第1回:GuideGuide

■デザインの前に入れておきたいPhotoshopプラグイン/第2回:Ink

■WEBデザイン作業の前にやっておきたいPhotoshop初期設定

■Webデザイン作業で 覚えておきたいPhotoshop/画像の切り抜き