飽き性な男のムダ話

飽き性な男のムダ話

飽き性な男のムダ話

ご依頼募集サイト

デザイン・イラレ

【Illustrator・文字装飾】魅せる文字は縁で決まる!?袋文字の効果と作り方を徹底解説

こんにちは~Taku(@takumuda_1093)です。
皆さんは「袋文字」という言葉を知っていますか?「袋文字」は文字のデザインをする上で欠かせない装飾の一つです。今回はその「袋文字」の効果と作り方についてまとめていきます。

1.文字を目立たせたいなら袋文字にしよう

「文字を強調したデザインにしたいけどうまくいかない…」「タイトルと文章を区別して、メリハリを付けたいけどどうすれば良いか分からない…」そんな風に思ったことはないでしょうか?

自分も初めはそう思っていました。仕事でバナー広告やチラシを作成していますが、いくらフォントサイズを上げて太字にしても、「なんかイマイチだなぁ」と思うことが良くありました。
そこで会社の人に何か良い方法はないかと相談をしたら「袋文字を使うと良いよ」と教えてくれました。

やり方を教えてもらってやってみると、簡単に「強調した活き活きしたデザイン」にすることができて驚いたのを覚えています。

リュウイチ
リュウイチ
その「袋文字」ってなんだ?初耳だな。
聞いたことがある人は少ないかもしれないね!おすすめの文字装飾だから、「袋文字とは何か」詳しく説明していくね!
Taku
Taku

2.袋文字とは

袋文字とは文字装飾の一つで、文字の周りに輪郭線(縁)があるデザインのことをいいます。
以下の画像のように「白抜きの文字」「白の輪郭線」「二重の輪郭線」などのように色々な輪郭線を表現をすることができます。

リュウイチ
リュウイチ
あーこういう文字のことなんだな。
本や商品のパッケージなんかでよく使われているから、デザインに詳しくない人でも見たことはあるはず!
次は実際に「袋文字」を取り入れたデザインの一例を紹介するよ!
Taku
Taku

3.袋文字の効果

この「袋文字」の輪郭線ですが、あるかないかで視覚的に大きく印象が変わってきます。
まずはスーパーなどの特売チラシの文字を再現してみたのでご覧下さい。
画像左が通常の打ち文字。右が袋文字を取り入れた文字になっています。
どちらのが目立ち、お得感を感じるでしょうか。

リュウイチ
リュウイチ
どう見ても右だな。
そうだよね!ただの打ち文字と並べてみると一目瞭然だよね!バナー広告やチラシでもお得感を出すために袋文字を使うことがよくあるよ!
Taku
Taku

このように文字を強調するためには袋文字が有効だということを知っていただけたかと思います。

4.ブログデザインにも袋文字を取り入れてみた

ブログのデザインをリニューアルした際に、実際に袋文字を取り入れてデザインしたのでご紹介します。

①メインビジュアルのタイトルロゴ

まずはメインビジュアルから。タイトルロゴに袋文字を取り入れてみました。
旧デザインは以下の画像になります。見て分かる通り文字の強弱は付けていますが、輪郭線はないデザインになっています。

リュウイチ
リュウイチ
俺にとっては見慣れたデザインだが、袋文字の存在を知ってから見ると微妙に見えるかもな。
そうだよね…。タイトルロゴが強調されていないし、縁取りもされていないから、背景と重なって見づらいし…。
Taku
Taku

と、いうことで早速タイトルロゴに袋文字を取り入れてみました。どんな感じの出来になったかというと…

リュウイチ
リュウイチ
おー。こう見ると全然違うな。確かに強調されているな。
でしょ!輪郭線を付けただけでメリハリが出て、「アニメのロゴ」のようなデザインになったと思う!
Taku
Taku

②バナーのデザイン

自作LINEスタンプのバナー広告を作成したときも、袋文字を多く取り入れてみました。
袋文字は強調する目的だけではなく「文字と背景に境目を付けて読みやすくする目的」でも使用することができます。

リュウイチ
リュウイチ
色んな用途で使えるんだな。読んでいる人は、これの作り方が知りたいんじゃあないのか?これから説明していくのか?
もちろん!Illustratorで簡単に作れる手順を説明していくね!
Taku
Taku

5.袋文字の作り方

ここまで「袋文字」についてまとめてきました。
「じゃあその袋文字の作り方を教えて欲しい!」と思っているかと思うので、ここからは袋文字の作り方を紹介していきます。
過去に公開した「オリジナルのアイキャッチを作ろう」という記事でも軽く紹介しましたが、今回はもう少し詳しく解説していきます。

すごく簡単な手順で作ることができるよ!Illustratorさえあれば誰でも作れるので、絶対に覚えておこう!
Taku
Taku

①文字ツールで打つ

[文字ツール]で任意の文字を打っていきます。この時文字を太字(Bold)にしておくと良いでしょう。

②アピアランスで線を追加する

ツールバーから[ウィンドウ]→[アピアランス]で「アピアランスウィンドウ」を開きます。
右上にあるハンバーガーメニュー(3本線)をクリックし、[新規線を追加]から線を追加します。

③[線]を[文字]の下に移動させる

②の状態では線が塗りの上に重なってしまい、文字が潰れてしまいます。
なので、新規追加した[線]を文字の下にドラッグ&ドロップして移動させます。

④色・太さを整える

追加した線の色と太さを整えてます。
太さは文字の塗りよりも太くなるように調整して下さい。

リュウイチ
リュウイチ
これで完成か?
ぱっと見これで完成に見えるけど、もっと見栄えを良くする作業が残っているよ!
Taku
Taku



⑤線の角を丸めて完成

最後に線の角を丸めます。
角を丸めないと、線の太さによってはいびつな形になってしまいます。
なので[線端]を「丸型線端」に、[角の形状]を「ラウンド結合」にして角を丸めます。

割とこの作業をしていない袋文字を見かけることがあるよ。細かいことだけど、綺麗なデザインにするためにも角を丸めることを強くおすすめするよ!
Taku
Taku

⑥さらにアレンジを加えるのも◎

①〜⑤と同じ要領で2重の輪郭線をつけたり、ドロップシャドウ(影)を付けると立体感が生まれ、さらに目立つ文字にすることができます。
やってみたい方は以下画像を参考に作成してみて下さい。

リュウイチ
リュウイチ
確かに俺でも出来そうなくらい簡単な作業だったな。
でしょ!すぐに覚えられる手順だよね!ここまで読んでくれた方もぜひ覚えていっ欲しいな!
Taku
Taku

6.多用しすぎに注意

ここまで袋文字の効果と作り方を説明しましたが、多用しすぎには注意が必要です。
縁取った文字をたくさん使うと「全体的に安っぽいデザイン」になってしまう可能性があります。

高級感を出したり、落ち着いたデザインをしたい場合は基本的に使わないのが無難でしょう。
使う場合でも、本当に目立たせて強調させたい所だけに使うのが効果的です。

リュウイチ
リュウイチ
確かに多く使っているとダサくなりそうだな。
そうなんだよだから全体のバランスを見ながら程よく使っていくのが一番だね。
Taku
Taku

7.最後に

いかがだったでしょうか?「袋文字」を使用するだけで、文字のデザインの幅を大きく広げることができることが分かって頂けたと思います。
簡単な作業で目を引く素敵な文字にすることができるので、是非デザインの中に取り入れてみて下さいね。
最後まで読んでいただきありがとうございました!


この記事へコメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


PROFILE

プロフィール

プロフィール画像

Taku

創作中心のフリーイラストレーター。

専門学校でWebやグラフィックの技術を2年間学び、
印刷会社のグラフィックデザイナーとして就職。

Web技術のスキルアップを目指して
半年で退職し、Web制作会社でデザイナーとして2年間奮闘。

現在はフリーのイラストレーターとして
日々活動している。

現在イラスト・画像作成のご依頼を募集しております。
ご興味がある方はご依頼募集サイトから詳細をご覧下さい。