トラッキング、字送りとは

「トラッキング（英：Tracking）」とは、「Adobe Illustrator（アドビ イラストレーター）」や「Adobe Photoshop（アドビ フォトショップ）」などのデザインソフトで文字を入力した際、テキスト全体や選択したテキストに対して等間隔のアキを調整すること、もしくはその機能を指します。日本語では「字送り」と呼ばれています。

トラッキングと似ている機能に「カーニング」がありますが、2つは異なる意味を持っています。トラッキングは『選択した文章全体の文字間隔』の調整を行い、テキストの右側の余白が調整されます。対してカーニングは、『隣り合う2つの文字の間の間隔』の調整を行います。この2つを上手く組み合わせて「文字組み」を行います。文字組みはデザインを行う際に必須となる『文字を美しく組む作業』のことで、何も手を入れていないベタ組みはバランスが悪く、綺麗に見えません。デザイナーはトラッキングとカーニングを行い、文字を美しく見せたり、文字同士の間隔を調整して見やすくしていきます。

デフォルトでの数値は『0』となっており、Illustrator及びPhotoshopの文字パネル上では『-100』～『200』までプルダウンで選択ができます。数値が大きくなるとアキが大きくゆったりとし、数値が小さくなるとアキが狭まり詰まります。また、手入力で数値指定すれば細かい数値指定やもっと大きな数値、小さな数値を指定できます。
トラッキングにはショートカットもあるため、覚えると作業が早くなります。

トラッキングのショートカット（Macの場合）

1. テキストの上で1回クリックし、『command + a』で文章全体を選択します（特定の文字が対象の場合はドラッグして選択します）。
2. 横組みの場合は『option + 矢印（← / →）』、縦組みの場合は『option + 矢印（↑ / ↓）』を押すことで数値の変更が可能です。

1回に増減する数値に関しては、Illustratorの場合は『環境設定 → テキスト』からカスタマイズができます。Photoshopの場合は20ずつ増減します。
加えて『option + 矢印（← / →）』と同時に『command』を押すことで、一度により多くの数値調整が行えます。
また、同じショートカットでも文字を選択せず、文字と文字の間にカーソルを当てた状態で行うとカーニングになります。

Web上では細かいカーニングを再現するには少々手間がかかるため、特別な理由がない限りはトラッキングを用いて文章全体の読みやすさの調整を行います。

Web上でトラッキングを表現するには、CSSで「letter-spacing」の指定をします。
数値の単位には「px」または「em」を使いますが、pxよりもemの方が計算が簡単なのでemを使うのがおすすめです。計算式は以下の通りです。

『PhotoshopやIllustratorなどのトラッキングの数値 ÷ 1000（em）』
トラッキングの数値が「100」だった場合は『100 ÷ 1000 （em）= 0.1（em）』となり、CSSの指定は「letter-spacing : 0.1em; 」というようになります。とても簡単なため、デザイナー、エンジニア共に覚えておきましょう。