WEB制作

Photoshopの文字間を調整する時の不思議「文字間を調整」という機能

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Photoshopを使うようになってウン十年(いや20年くらい)と経つが、よく使う機能の割りに未だに不可解なのが、文字というかテキスト周りの調整。

具体的には、バナーを作ったり、画像に文字をそれなりの量を打ったりする時に、文字間に妙な違和感が出る場合がある。

Photoshopはフォトレタッチ系の作業はもちろん、プロのデザイナーが使う業務用のデファクトスタンダードなデザインツールなので、WordとかPowerPointとかより文字周りがショボイなんてこと有り得ないのだが、意外と文字周りの設定はややこしかったりする。

文字間を調整するには基本的に「トラッキング」

Photoshopの文字パネルには、何やら文字を調整するためのパラメーターが色々ある。文字間を調整するには調整したい文字列を選択した状態で、VAと書かれた「トラッキング」の値を調整する。

あくまで文字間(文字と文字の左右の隙間)を調整するので、行間(複数行の時の上下の隙間)を調整するには、VAの上にある「A」が上下に並んでいる所を使う。

トラッキングの罠!? どうやっても違和感が消えない場合がある

基本的にWordとかパワポで作るビジネス資料と違って、デザイン物というのは1ミリとか1ピクセルとかの非常に繊細な調整が重要になる場合が時としてある。プロの仕事の場合は、むしろそれが普通だ。

しかし、Photoshopというソフトは根本的問題としてアメリカのソフトのため、日本語の処理はそんなに得意ではない。あまりIllustratorやInDesignなどのDTP向けソフトを詳しく知らないけども、おそらくそれらのソフトよりPhotoshopの文字周りの処理はショボいはず。

下記のAdobe公式の解説を見てもトラッキングは日本語にも使えるけども、通常は英文向け・・・みたいな、お茶を濁した感じの説明となっている。そういったこともあり、Photoshopの日本語処理は違和感が出るものだと諦めていた。

試す価値あり、「文字間を調整」のオン/オフ

実をいうと、文字パネルにこのオプションがあるのは認識していなかった。

Adobe公式の解説を見るとバッチリ解説されているものの、どういった処理をしているという細かなことまでは説明されていない。だから、どういった理由かよくわからないが、オンにするとPhotoshopが自動的に何らかの基準で文字幅を調整してくれる。

標準では自動的にオンになっているが、特に小さめの文字サイズの場合はオフにした方が文字間のバランスが良い場合がある。

Photoshopで日本語の文字をデザインに組み込む時に、文字間が「どうもしっくりこないなぁ~」という時は、まずはこの設定を試してみよう。

最終手段はカーニングとかでチマチマ調整する

本文みたいな文字量だと無理だが、見出しやバナーなど文字量が少ない時は、トラッキングの左にあるV/Aという機能を使う。これはカーニングと言う機能で、隣り合った2文字の隙間を調整する。

チマチマした職人みたいな作業だが、文字量が少ない場合はこれを使って体育会的に直す方法になる。

どちらにしろ、Photoshopの日本語周りの機能はそれほど優秀ではないと思って良いだろう。かといって、Photoshopより優秀なバナーやWeb用画像を作るツールは存在しないのだが。

文字パネルのオプションも注意

Photoshopの文字パネルの右上あたりに、横線が並んだハンバーガーメニューのようなものがあるが、そこをクリックするとオプションが多量に出てくる。

タブが「文字」の時と「段落」の時でも出てくるオプションは違う。

この記事での検証のために初めて見た気がするが「段落」タブのオプションには「日本語基準の行送り」や「欧米基準の行送り」という重要そうなものがあった。この選択によって複数行のデザイン具合が大きく変わることから、重要なものなのだろう(焦)

それ以外にも「東アジアの言語」というのをチェック入れると、Illustratorとかみたいに禁則処理が使えたりする。禁則処理は「、」とか「。」だとか変な所で改行されるのを防いだりするDTP系ソフトでは一般的な機能。PhotoshopでLP的な長文をデザインに組み込んだりする場合は必須の機能だろう。

追伸:ここに書いてある方法より、もっと良いやり方や、根本解決できるような知識のある方がいたら、こっそり教えて下さい。紹介させて頂く?かもしれません。