和文の「タイトル・見出し」の字間の基本

字と字の間の余白がポイントです！

グラフィックデザイン・Webデザインにおいては、「タイトル・見出し」の字と字の間のスペースはとても重要なものとなっていて、文字組の基本的な要素でもあります。プロの現場では、字間（じかん）と呼ばれていますが、業界未経験者のデザイナー転職希望の方は、理解しておく必要のある知識・感覚になりますので、是非理解したらIllustratorやPhotoshopで実際手を動かして組んでみて組版の基本的なスキルを習得して下さい。

何故「字間」の調整が必要か？

文字のサイズを大きくしていくと字間の調整が必ず、必要になります。これは文字のサイズが大きくなっていくと、字と字の間の白い部分の面積も比例して大きくなってきて、視覚的に重要な要素になってくるからです。紙やモニターのサイズは一定ですが、文字のサイズ（級数）が上がるにつれて文字や、文字と文字の間の余白が見る人の目に与える影響が大きくなっているからです。

文字の「余白の面積」と「画数」がポイント！

下の例で赤い罫線が「仮想ボディ」です。画数が多い「18画」の「職」という漢字と、画数が「２画」の平仮名の「い」を比較すると、余白の面積の差が大きい事が分かります。

書体：リュウミン R-KL（モリサワ）

平仮名・片仮名や、画数が少ない漢字は、書体の「仮想ボディ」の中で余白の面積が多い文字になりますので、字間の調整が必要になっていきます。画数が多い漢字が続く部分は、黒みの面積が多いのでさほど気になりませんが、画数が少ない文字の部分は、字間の調整を行っていない組み方では、第一印象は文字がパラパラしている印象になります。それでは具体例を交えて、字間の基本を理解していきましょう。

組版の基本、字間の調整を理解する為には？

コツは「ベタ組み」を知ること！

ポイントは「ベタ組み」を知る事です。字間の調整の感覚を理解する為に具体例を用いて紹介しますので、余白や画数の感覚を理解して下さい。最初にIllustratorでベタ組みの状態のサンプル、文字と文字の間の余白を丁寧に見て下さい。今回の例で、書体はプロユースのフォント「リューミン Pro Regular（モリサワ）」の明朝体を使用しています。

ベタ組みとは？

字間を「0」と設定し、何も組版の調整を行っていない状態をいいます。この「ベタ組み」の状態ですと「見出し・タイトル」においては文字がパラパラして見えたりするので調整を必ず行います。

ベタ組みの例

書体：リュウミン R-KL（モリサワ）

余白が気になる部分に「グリーンの円」をレイアウトしました。「転職は求人情報」の字間の余白はさしあたって気になりませんが、「サイト」の文字から終わりまでは、片仮名とカギ括弧で構成されていますので、余白が気になり始めます。

「転職」の「転」と「職」の字間の余白と、「イ」と「ト」の字間の余白を比較すると一目瞭然です。この「グリーンの円」をレイアウトした白い余白が原因で、文字がパラパラして見える原因となっています。

それでは次にこの「余白」を詰めた状態の例を見てみましょう。

字間を「プロポーショナルメトリクス」で詰めます

Illustratorの「文字パネル」のタブに「Open Type」というタブがありますので、それをクリックして画面を切り替え「プロポーショナルメトリクス」のチェックボックスにチェックして下さい。タブが表示されていない方は、Illustratorのメニューバーから「ウィンドウ」→「書式」→「OpenType」をクリックすると表示されます。

チェックボックスにチェックしたら、自動で詰まります。下の例は片仮名の余白が詰まり文字と文字の字間は詰まります。約物のカギ括弧は別途、組版のルールの設定が必要ですので、現在は「起こしカギ括弧」の前に余白がある状態となっています。

「プロポーショナルメトリクス」で詰めた例

「ベタ組み」の状態と比較すると、詰まっている状態がはっきりと見てとれます。次に「見出し・タイトル」としてデザインに利用できるように、「起こしカギ括弧」の前を詰めていきます。Illustratorの場合は合成フォントの機能を使って詰めたりしますが、今回は手動で詰める方法を紹介します。

手動で詰める方法

詰めたい場所に文字ツールでカーソルを合わせる

Illustratorで「文字ツール」にしてから、詰めたい場所をクリックして下さい。カーソルがフォーカスされ点滅します。狙ったとこにいかなかったらキーボードの矢印キー（左右）を押すとカーソルが移動します。マウスよりキーボードの方がコントロールしやすく便利ですので覚えておいて下さい。

カーニングの数字を調整して詰めます

カーソルを合わせたら次に、詰める作業にうつります。ここでは「カーニング」と呼ばれている数字を設定して詰める量を決めていきます。下のキャプチャ画像の文字パレットの赤く罫線で囲った部分が「カーニング」の数値にあたります。もちろんキーボードで数字を入力しても構わないんですが、実際目で確認しながら詰める量をきめていきますので、キーボードの「option」キーを押しながら、詰める場合は矢印キーの「左」を押していきます。初期設定では、一回「矢印キー」を押すと「A/V」の値が「マイナス20」づつ追加されていきます。

詰める場合のショートカット：option+←

この例の場合はカーニングを「-420」で設定しました。片仮名の「ト」と「起こしカギ括弧」の実際の詰まり具合は下の例となります。全体的に詰まった印象になりました。ここで最初に紹介した「べた組み」の例と比較してみて下さい。文字の余白を詰めるだけで大きく印象が変わるのが見てとれます。

次は、全体的に字間を開ける調整を

このベタ組みから、詰めた状態では「見出し・タイトル」として使用するには若干窮屈な印象も受けますので、ここから再度、字間のの余白（スペーシング）を調整していきます。窮屈さを解消する為に、Illustratorの文字パレットの「トラッキング」という項目の数値をコントロールして全体の字間をあけていきます。

トラッキングの設定パネル

今回の例はトラッキングの数値は「60」で設定しました。

「トラッキング」であけた例

先程の詰めた状態の例と、最後の例を比較すると相当印象が変わっています。少し気持ちが落ち着いて文字を読める状態になりました。今回紹介した例は、あくまでも組み方の基本的な例です。プロのデザイナーさんはここから、カギ括弧の書体を変更したり、サイズ（級数）を調整したり平仮名・片仮名も書体やサイズを調整し、意図したデザインの印象にコントロールしていきます。これはデザイナーとして味わえる組版の仕事の醍醐味でもあります。

基本を理解したら応用して練習で組んでみて下さい！

ここで紹介した「タイトル・見出し」の文字の字間の基本を理解してから、色々な組版に挑戦して実際、手を動かして練習しながらスキルアップしていって下さい。手元にある書籍や雑誌・フライヤー等、デザイナーがデザインした実際、世の中に流通している印刷物やWebサイトの見出し・タイトルを見るのも勉強になりますので、是非挑戦してみて下さい。