こんにちは、走るとり（@hashirutori00）といいます。
現在、都内でWebデザイナーとして働いています。
DTP時代に「文字揃えを徹底したデータをつくるように」と口酸っぱく言われていたことがあります。
Adobeのデザインソフトの文字揃えには三つの種類があります。
（ほかにも均等配置・両端揃えなどありますが今回は省きます）
この三つの文字揃えを正しく使うことで、修正にも強くなれるし制作時間の短縮にもつながります。
今回は僕がPhotoshop・Illustrator・XDでやっている文字揃えについてご紹介します。
Contents
Illustrator・Photoshop・XDの文字揃え
PhotoshopもIllustratorも基本的には段落パネルから文字揃えを設定することができます。
Photoshop
Photoshopの段落パネルの表示方法は、メニューバーから「書式」→「パネル」→「段落パネル」を選択すると表示させることができます。
Illustrator
Illustratorの段落パネルの表示方法は、メニューバーから「ウィンドウ」→「書式」→「段落」で表示させることができます。
段落パネルの見え方はこんな感じです。
テキストを選択した上で、段落パネルの赤枠で囲んである部分を押すと、文字を揃えることができます。
文字揃えのショートカット【Photoshop・Illustrator】
段落パネルからではなく、ショートカットを使用して文字揃えをすることも可能です。
Command + Shift + L （左揃え）
Command + Shift + C （中央揃え）
Command + Shift + R（右揃え）
覚え方としては、Command + Shift は共通なので、
L = Left（左）
C = Center（中央）
R = Right（右）
と覚えるようにしましょう。
XD
XDの段落パネルの見た目はこんな感じです。
表示方法は文字を選択するだけで、右側のバーに表示されます。
いろいろ調べてみたんですが、現状ショートカットはないようです。
文字揃えの実践
実際に制作物を用意して文字揃えについて説明していきます。
僕が過去に作ったバナーをもとに文字揃えについて説明をしていきます。
どんな感じで文字揃えを設定しているかというと…
このバナーでは左揃え・中央揃え・右揃えの三つの文字揃えを全て使用しています。
もしこのバナーにタイトルの変更や日付・制作者の変更があった場合、文字の配置はどうなるでしょうか。
タイトルの変更や日付・制作者の文字数が変わりました。
正しい文字揃えができていると、こんな感じにある程度いい感じにレイアウトが整います。
（文字数によっては若干フォントサイズなどの調整をする必要があります）
一方、正しい文字揃えが設定されていないとこうなります。
文言修正をした結果、レイアウトがバラバラになったり、文字がはみ出てしまっています。
こうなると文字の位置を都度調整しなければいけなくなり、時間のロスになってしまいます。
駆け出しの頃ほど、「たかがそれくらい別によくね？」と思いがちなんですが…
これが一点だけのバナーであればまだいいんです。
しかしバナーのサイズ展開であったり、文言修正がほかの制作物にも影響していた場合、かなりの手間が発生します。
サイトのカンプ制作のときも文字揃えができていない箇所がいくつもあると、同じく時間がかかってしまいます。
塵も積もれば山となるので、１日のうちに何度も発生する手間はどんどん省いていきましょう。
雑に動画も作ってみました。
IllustratorでもPhotoshopでもXDでも、あとで修正が入ったときのために、しっかり文字揃えしてくれてるデータ見るとめちゃくちゃ紳士的だなって思うんですが、伝わりますか？ pic.twitter.com/5fLmiQCA4m
— 走るとり (@hashirutori00) May 27, 2020
いつでも紳士的なデータ作りを心がけたいものです。
まとめ
新人の頃によく「ここのフォント揃ってないね」「フォント揃ってないよ」「揃ってない」「揃えて！」と何度も言われていました。
そのときに身に付けたのが文字揃えを徹底することです。
時間短縮にもなりますし、時間短縮できれば周りのレイアウトを落ち着いて見直す時間も増えます。
あとでメンテナンスがしやすいデータが作ってあると、自分自身もそうですが、社内の人も助かりますし、丁寧なデータ作りは信頼感が高まります。
文字揃えは特別な技術ではないので、ぜひ明日からでも実践してみてください。
