イラレで文字を縁取りしてお洒落で見やすい袋文字の作り方を紹介

文字を見やすくするための工夫として文字を縁取りして袋文字にする方法があります。

背景の柄や色に関係なく、文字を目立たせることが出来て視認性を上げられるため、デザインに頻繁に活用されている見せ方の1つです。

しかし、正しい方法で作らないと扱いが面倒になり作業効率を下げかねません。

Renton

実際に僕はデザイナーとして働きはじめの頃は間違った方法で袋文字を作っていて先輩に指摘されたことがあります。

この記事ではプロがイラレで正しく文字を縁取りして、かつお洒落で見やすい袋文字の作り方とポイントを解説していきます。

IllustratorやPhotoshopをまだ持っていない方はAdobeソフトが使い放題になるAdobe CCがおすすめです!こちらのAdobe CCを安く購入する方法を参考にしてください。

目次

袋文字とはどういうもの?

袋文字とは文字に縁取りして、背景と文字の境を作ることで、文字の視認性をあげたものです。

文字が見にくかったり、文字の視認性が低い時は、背景と文字の同化が原因の場合が多いです。この問題を解決する最も有効な手段として、文字に縁取りした袋文字が生まれました。

袋文字は簡単に視認性を上がられるため、これまで多くのデザインで多用されてきたため、最近の流行的に、逆にデザイナーは安易にこの袋文字を使わない傾向があるように思えます。

Renton

最近は背景と文字に差を出して視認性を上げたり、スペースを利用したレイアウトなどで、誰でもできる袋文字に頼らなくなってきました。

その理由として、

  • これまで多くのデザインで多用され続けてきて、差別化が計れない
  • 文字に縁取りしてあるため、スッキリとした抜け感が表現しずらく、チープな印象になりやすい

このような理由から単純な縁取りした袋文字はあまり使われなくなってきました。ただし、袋文字の効力は強力なので、よりお洒落に見えるように縁取りの仕方やデザインが改良されていっています。

イラレで文字に縁取りして袋文字を正しく作る方法

adobe Illustrator(イラレ)で文字に縁取りして袋文字を作る場合はアピアランスの“線”を使います。まず袋文字にしたいテキストを用意したら、アピアランスパネルを使います。

  1. メニューバー
  2. ウインドウ
  3. アピアランス
  4. アピアランスパネルの右上のオプションアイコンをクリックして新規線を追加を選ぶ

線が追加されたら、わかりやすいように色を白に変換しておきます。この状態では追加された線が文字の上に乗っているだけです。

Point

線の位置を文字の後ろに移動させます。

線のレイヤーをドラッグしながら文字のレイヤーの下にドロップします。

追加した線が文字の下に入れ替わりました。あとは線の太さを調整して完了です。

今回はわかりやすいように文字は黒、縁取りの線は白でおこないましたが、文字と線の色の関係性も考える必要があります。

Point

メインの文字と縁取りの線の色は差をつけることが袋文字にする場合の基本

メインの文字と縁取りした線の色味に差がないと、袋文字にする意味がありません。文字と線の境目がわかりづらくなり、逆効果になりかねませんので、充分注意してください。

なぜ袋文字を作るのにアピアランス効果を使うのか

なぜ文字に縁取りして袋文字を作る場合はアピアランス効果を使うのかというと、理由は2つあります。

  • アピアランス効果だと文字の打ち替えをした際に袋文字を作り直す必要がない
  • アピアランス効果だとズレなどのミスがなくなり管理しやすくなる

初心者がやりがちな袋文字

かつて私もやってしまった文字と縁取りした(線を付けた)文字を別々に作って重ねる方法です。この方法では見え方は同じですがおすすめの方法ではありません。

この方法だと文字を打ち替える際はメインの文字と、縁取りした(線を付けた)文字の両方を打ち替える必要があり、単純に2倍の時間と労力がかかります。

Renton

何かの拍子にずらしてしまっても気付きにくいといったデメリットもあります。

文字は打ち替えや差替えが発生する場合が非常に高く、その際、アピアランス効果を使っていないと、文字の打ち替えの度に無駄な手間がかかります。

さらに、文字と縁取りをバラバラに作っていると、カーニングなどの文字間隔の調整などをした場合は文字と縁取りがズレてしまいます。

Renton

アピアランス効果を使って袋文字を作っていれば、文字を差替えても、カーニングをおこなっても、常に設定した縁取りを修正することなくキープすることが出来ます。

お洒落に見えるひと工夫された袋文字

縁取りをぼかして世界観に溶け込ませる

文字に縁取りをして、背景との差を出せることが袋文字のメリットですが、チープに見えがちな点を改善するために縁取りをぼかすことで、文字の視認性を失わない程度に背景に馴染ませるテクニックです。

Renton

高級感を出したい場合や、柔らかい印象を与えたい場合などにおすすめです。

色味のバランスで控えめにアクセントをつける

文字と縁取りと背景の3点がバラバラすぎると、チグハグで主張が激しいだけで品のない袋文字になってしまいがちです。

背景と縁取りの色味は同系色で文字の色だけを離すことで、文字と背景の間にさりげないアクセントをつけるテクニックです。

Renton

目立たせすぎたくないけど、文字の視認性は保ちたい場合などにおすすめです。

縁取りを何重も重ねて差別化を計る

アピアランス効果を追加して線を何重にも重ねることで、文字の視認性を保ちつつ、単純な袋文字からデザイン性を高めるテクニックです。

アピアランス効果で縁取りしていれば、編集色や太さなども簡単に調整可能で、線のさらに下に線をつけるなどの複雑な表現も可能です。ちなみに線だけではなくドロップシャドウなどの別の効果と組み合わせることでさらにデザイン性を高めることが出来ます。

Point

あまりたくさんの色を使用するとうるさくなるので、2〜3色の同系色でまとめるのがポイント

Renton

文字を強調させたい場合や、デザイン性を高めたい場合におすすめです。

お洒落で見やすい袋文字の作り方まとめ

adobe Illustratorで文字を縁取りしてお洒落に見える袋文字の作り方をご紹介しました。

袋文字は文字をみやすくする効果的なテクニックです。

文字の視認性に困った時は是非活用してみてください。ただし、袋文字のデメリットも考えて上手くデザインとの調和を保てるように、デザインしてください。

この記事のまとめ
  • 袋文字とは縁取りして背景と文字の境を作ることで文字の視認性をあげたもの
  • イラレで文字に縁取りして袋文字を作る場合はアピアランスの“線”を使う
  • アピアランス効果だと文字の打ち替えをした際に袋文字を作り直す必要がない
  • アピアランス効果だとズレなどのミスがなくなり管理しやすくなる

IllustratorやPhotoshopを今より格安で利用できるお得情報

Adobe IllustratorやPhotoshopって値段が高いですよね?

Adobe Creative Cloudは通常価格で72,336円(年間)もしますが、Adobe公認スクールである「デジハリ」が提供する「Adobeマスター講座(Adobe CC付き)」なら3万円以上もお得にIllustratorやPhotoshopが使い放題になります。

どれくらい安くなるのか
  • Adobe CC 通常購入 → 72,336円(年間)
  • Adobeマスター講座 → 39,990円(年間)

なんとAdobeマスター講座だと30,000円以上も安くAdobe CCが使い放題なだけでなくデジハリのオンライン講座(動画閲覧)も受ける事ができる超お得プランです。

この39,990円は通常購入版と使えるソフトや内容は一切変わらないAdobe CC1年分とオンライン講座の受講料、消費税までも含んでの値段です。

Renton

僕もAdobeマスター講座を毎年利用していますし、もし通常版を利用している方は、確実にこちらの方がお得です!

Adobeマスター講座の詳細や特長、購入方法などを詳しくまとめた記事がありますので参考にしてください。

Photoshopだけを最安で利用し続けたい方は「フォトプラン」

Illustratorなど他のAdobeソフトはいらないからPhotoshopだけをお得に利用したいという方は今なら最新のAdobe Photoshopが月額1,078円(税込)で使い放題のお得プランがあるのでおすすめです。

通常Photoshop単体なら月額2,728円(税込)かかってしまいますが、この「フォトプラン」はPhotoshopが使い放題なだけでなく、写真編集ソフトのLightroomまでセット(しかも初回は7日間の無料体験付き)になるという太っ腹プランです。

Renton

まさに画像編集に特化したプランです

単体Photoshop購入時よりLightroomまで付いて何故か半額以下で試せる「フォトプラン」はPhotoshopしか使わない方にとっては最高のプランなので是非お試しください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次