文字のあしらい4種｜白抜き・袋文字・ひげ・スミカゲの使い分け

写真の上にタイトルを置いたら、文字が読めなくなった。逆に、装飾を足したらチープになった。どちらもよくある行き止まりです。

文字のあしらいは、飾りではなく読ませるための道具です。白抜き・袋文字・ひげ・スミカゲ。名前と使いどころを覚えると、迷わず選べるようになります。

このレッスンでは4つのあしらいを1つずつ、効く場面と数値の目安つきで説明します。最後に写真の上の文字を読ませる手順もまとめます。読み終えたら、バナーのタイトルで手が止まらなくなりますよ。

あしらいは読ませるために足す

あしらいは、主役を引き立てるために添える小さな要素をまとめて呼ぶ言葉です。線・囲み・図形・影などが入ります。そのうち文字に付けるものが、文字のあしらいです。

足す理由は2つしかありません。背景に負けて読めないからか、主役だと分からせたいから。どちらでもないなら、足さないほうがきれいに仕上がります。

あしらいを足す前に、文字を大きくする・置く場所を変えるを試してください。写真の暗い部分に移すだけで読めるようになるなら、装飾は要りません。

白抜き：背景が濃いときの第一手

白抜きは、濃い背景の上に白い文字を置く方法です。線を足さないので、いちばんすっきり仕上がります。読ませたいだけなら、まずこれを試します。

条件は背景が十分に濃いことです。中間の明るさのグレーや、明るい部分と暗い部分が混ざった写真の上では読めません。背景を暗くできないなら、別のあしらいに切り替えます。

実例はYouTubeのサムネイルです。何枚か並べて見ると、タイトルの文字はほとんどが白抜きか袋文字になっています。一覧の中で小さく表示されても、文字だけは残るからです。

袋文字：背景が読めないときの保険

袋文字は、文字のまわりに輪郭線をつけたものです。フチ文字とも呼びます。背景の明るさが場所で変わっても、線が文字の形を守ってくれます。

線の太さは文字サイズの5〜8％が目安です。60pxの文字なら3〜5px。太くしすぎると文字の中の空間がつぶれて、別の字に見えます。

Illustratorで作るときは、線を文字の外側に出してください。初期状態の線は文字の中心から内外に半分ずつ広がるので、そのままだと線の分だけ文字が細ります。アピアランス（見た目の設定をまとめたパネル）で塗りを上、線を下に置き替えると、線が外側だけに出ます。

身近な実例は地図アプリです。地名を拡大すると、白い文字に薄い輪郭線がついています。地図は場所ごとに背景の色が変わるので、白抜きだけでは足りません。背景が読めないときの保険、という使い方がそのまま見られます。

角が尖って刺さって見えるときは、線の角の処理をラウンドに変えます。それだけで印象がやわらかくなります。

ひげ：見出しを静かに立てる

ひげは、見出しの左右に添える短い線のことです。「― 本日限定 ―」のような形。文字を大きくせず、色も変えずに「ここが見出しです」と伝えられます。

書体の解説で出てくる「ひげ」は別のものです。あちらは明朝体の線の先にある小さな三角（うろこ）、欧文で言うセリフを指します。同じ言葉ですが、指しているものが違うので読み分けてください。

スミカゲ：影は薄く、小さく

スミカゲは文字に付ける黒い影です。ドロップシャドウと同じものを、印刷の現場ではこう呼びます。文字と背景の間にわずかな段差を作って、輪郭を浮かせます。

設定	目安	外すとどうなるか
不透明度	30〜50％	濃いと文字が汚れて見える
ぼかし	文字サイズの10％前後	くっきりだと影が図形に見える
距離	0〜2px	離すと浮きすぎて安っぽい
色	黒か背景の暗い色	純黒だけだと写真から浮く

距離0のぼかしだけの影は、文字のまわりに薄い暗がりを作ります。写真の上の文字にはこれが一番効きます。影を落としている感じがしないのに、読みやすさだけ上がります💡

写真の上の文字を読ませる順番

実際のバナー制作では、この順で試すと最短で決まります。上から順に効果が強く、上ほど仕上がりがすっきりします。

1と2で解決する場面がかなりあります。あしらいを増やす前に、写真側を調整できないか考えてください。

やりすぎのサイン

あしらいは重ねるほど効きが落ちます。次に当てはまったら、1つ外してください。

• 1つの文字列に、あしらいが3つ以上ついている
• 袋文字とスミカゲとグラデーションが全部乗っている
• 文字の中の空間（「ロ」の穴など）がつぶれている
• 3歩離れると、文字より輪郭線のほうが先に目に入る
• あしらいの色が、作品の中で4色目になっている

1つの文字列に足すあしらいは2つまで。白抜き＋スミカゲ、袋文字＋スミカゲ。この組み合わせでほとんど足ります。

ミニ実践：あしらいを1つ模写する

15分の練習です。Canvaでも、Illustratorでも、PowerPointでも構いません。

1. 好きなバナーやサムネイルを1枚選びます。文字が読みやすいものにしてください
2. タイトルの文字を拡大して、あしらいが何と何でできているか数えます。白抜きか、線があるか、影があるか
3. 同じ言葉を自分のキャンバスに置いて、書体と大きさをできるだけ近づけます
4. あしらいを1つずつ足して、元の見え方に寄せます。線の太さと影の濃さは数値を控えておきます
5. 並べて見比べて、違うところを3つ書き出します

数値を控えるところまでやってください。次に自分の作品を作るとき、その数字が出発点になります。模写のやり方そのものは模写・トレースのやり方にまとめています。

よくある質問

デザイン用語の「あしらい」はどういう意味ですか？

主役を引き立てるために添える小さな要素のことです。線・囲み・図形・影・アイコンなどが入ります。主役そのものではなく、主役を見やすくする脇役だと考えてください。文字に付けるものが文字のあしらい、余白に置くものが背景のあしらいです。

あしらいはどう使い分けますか？

背景が濃くて一様なら白抜き、背景の明るさがバラつくなら袋文字、写真の上で輪郭を浮かせたいならスミカゲ、見出しだと分からせたいならひげ。この4つで判断できます。まず「なぜ足すのか」を決めてから、対応するものを1つ選んでください。

文字装飾をやると、いつも安っぽくなります

原因は数と強さです。1つの文字列にあしらいを3つ以上重ねると、それだけで素人っぽくなります。線を細く、影を薄く、色を増やさない。この3つを守って、あしらいは2つまでにしてください。あとは書体を1つ上のものに変えるほうが効きます。

袋文字の線が文字を細らせてしまいます

線が文字の内側にも掛かっています。Illustratorならアピアランスパネルで塗りを上、線を下の順に並べ替えると、線が外側だけに出ます。Photoshopならレイヤースタイルの境界線で位置を「外側」に変えます。太さは文字サイズの5〜8％までに収めてください。

次に学ぶこと

整理します。あしらいは読ませるために足す。背景が濃いなら白抜き、明るさがバラつくなら袋文字、輪郭を浮かせたいならスミカゲ、見出しの合図はひげ。1つの文字列に2つまで。

文字以外のあしらいも増やしたい方はあしらいの引き出しへ。線・囲み・図形の型がまとまっています。

そもそも文字が読みにくい原因を切り分けたいときは視認性・可読性・判読性が役に立ちます。学ぶ順番はデザインの基本コースにまとめています。