【覚えておいて損は無い！】Webデザイナーとして文字のアンチエイアリス調整を身につけておこう！

こんにちは。
coffeebreakの中の人です。

またまたここの記事にやってきましたね。
ということは、photoshop（フォトショップ）をもっと勉強したい！と思い次は「文字をしっかり見せる」にはどうしたらいいか悩んでいるのではないでしょうか？

テキストのサイズ変更以外で表現する場合フォントの太さを変更したり、斜体やアンダーラインを付けたりします。

それでも、

「なんかパッとしないな」とか

「ちょっとフォントがぼやけてるな」とか、

フォント自体にくっきりとした強さを感じないのではないでしょうか？

それを解決する方法がアンチエアリスです。
こいつを効かせると、文字がシャキッとクッキリと見えてくるのです。

アンチエイアリスはWebデザインを勉強している人におすすめです。
見落としがちなデザインノウハウだから早めに身につけてね。

ご注意

独学出身という事もあり私のデザインノウハウはセオリーと違う場合が多々あります。
そんな時は、やっぱり変な人だなと思いながら記事を読んでいただければ幸いです。

1 アンチエイアリスを身につけておくべき理由
2 それぞれのアンチエイアリスについて
3 フォントのボールド調整と併用する事で微妙な太さを再現
- 3.1 さらに文字ツールの太さを掛け合わせてより太い文字を表現
- 3.2 ボールド調整の注意点

アンチエイアリスを身につけておくべき理由

文字がシャキッとクッキリとするのはお伝えしました。
文字調整の知識はWebデザイナーなら絶対身につけておいた方がいいスキルです！
太い赤文字で強調する位、現場で頻繁に使っています。

極端に言いいますが、裏を返すと身につけていないと「本当に何も知らないのね」と先輩デザイナーや同僚に印象付けされてしまいます。

キツい言葉で書いたけど勉強したらすぐ身に付くスキルだから！大丈夫だよ！

それぞれのアンチエイアリスについて

フォトショップのオプションバーから調整ができます。
さっそく文字がどのように変化するのか見ていきましょう。

ご注意

ここからは、それぞれのアンチエイアリスを効かせて比較していきますが、微妙な変化の文字もあるので目をこらして見ていただくか、スマホで拡大して違いを確認する事をおすすめします。

滑らかに

通常の状態はこの「滑らかに」です。

拡大してみると、文字が滑らかできれいに表示されていますね。

シャープ

シャープを加えたフォントです。

拡大した文字を比べてみるとピシッとした印象がありますね。「滑らかさ」でちょっとぼやけてる場合は「シャープ」でちょうどいいかもしれません。

鮮明

鮮やかを加えたフォントです。

通常の文字と見分けがつかないかもです。なので鮮やかの出番は少ないと思う人も多いかもしれません。

強く

強くを加えたフォントです。

見た目の変化もよくわかるので、アンチエイアリスの調整で使う頻度が一番高いのではないでしょうか？
拡大した文字はくっきりとした印象をうけますね。より力強さを感じますがこれ以上小さくすると太すぎな文字になりそうです。

基本的には、文字が弱いと感じたらまず「強く」を加えて徐々に太さをおさえる調整をすればバランスが取れると思います。

なし

なしを加えてみました。

なぜこの機能があるのか分からないくらいドット風の文字に変化します。
でも、MSフォントで16ptに変更してみるとこうなります。

どうでしょうか。実は、一昔前のPCサイトにアンチエイアリスのなしを活用してテキスト打ちの部分をデザインしてました。
今はスマホデザインが増えドット文字でデザインカンプを用意する事が減っているので、優先して身につける技ではないですが、頭の隅っこに記憶しておき、年上のデザイナーさんと話すネタとして活用するといいですよ！

他にも、小さいサイズのバナーに無理矢理テキストを打ち込む時にも活躍します！
もしかしたら「お！昔やっていた技術を知ってるだ！」みたいに思ってくれるかもしれません。多分。