• 2026.10.16
  • Web制作
  • Y O

Illustratorで袋文字(縁取り文字)を作ろう!初心者でもできる基本と応用

チラシやPOP、YouTubeのサムネイルなどで、文字の周りがぐるっと縁取られたデザインを見かけたことはありませんか? あの文字装飾が「袋文字」です。

難しそうに見えますが、Illustratorの「アピアランス」パネルを使えば、実は数ステップで作れます。この記事では、袋文字の基本の作り方から、二重・三重の縁取りや影をつける応用、うまくいかないときの対処法までを順番に解説します。

袋文字とは?

袋文字とは、文字の外側を線で縁取った文字装飾のことです。文字がふくろ(袋)に入っているように見えることから、この名前で呼ばれています。

袋文字がよく使われる場面

  • チラシ・ポスター・POPのキャッチコピー
  • WebサイトのバナーやメインビジュアルのPR文字
  • YouTubeのサムネイル
  • 写真の上に重ねる文字

袋文字のメリット

写真や色の多い背景の上に文字を重ねると、文字が背景に埋もれて読みにくくなることがあります。袋文字にすると、文字と背景の間に縁取りが入るため、視認性がぐっと上がり、インパクトも出せます。

袋文字を作る基本手順

ここでは「アピアランス」パネルを使った方法をご紹介します。文字データのまま作れるので、あとから文字の修正や色の変更ができるのが大きなメリットです。

1.文字を入力する

文字ツールで、袋文字にしたい文字を入力します。縁取りが目立ちやすいよう、太めのフォントを選ぶのがおすすめです。

2.「アピアランス」パネルを表示する

メニューの「ウィンドウ」→「アピアランス」を選択して、パネルを表示します。 文字は、文字ツールではなく選択ツールで選び、オブジェクト全体を選択した状態にしておきます。

3. 新規の線を追加する

アピアランスパネル下部のメニューから「新規線を追加」を選びます。パネルに、新しい「線」の項目が追加されます。

4. 線を「文字」の下に移動する

ここが一番のポイントです。追加された線は、そのままだと文字の上に重なってしまい、文字が細く見えてしまいます。

アピアランスパネルで、追加した「線」を、ドラッグして「文字」の下に移動させてください。これで、文字の背面に縁取りが回り込みます。

5.線の太さと色を調整する

追加した線を選び、線幅と色を設定します。

  1. アピアランスパネルで、追加した「線」の項目を選択する
  2. 線の色をクリックして、縁取りの色を選ぶ
  3. 線幅の数値を入力する

線の太さは、文字の大きさに合わせて調整します。迷ったときは、文字サイズの1/10程度から試してみてください。

6. 完成

縁取りが文字の外側にだけ出て、元の文字の形が保たれていれば「袋文字」の完成です!

縁の角を丸くしたい/尖らせたいとき

「線」パネルの「角の形状」を変更することで縁の形を変えることができます。

  • ラウンド結合(丸い角):やわらかく、ポップな印象になる
  • マイター結合(尖った角):シャープでかたい印象になる
  • ベベル結合:丸みはないが、トゲも出ず、ほどよくカチッとした印象になる

縁が太すぎて文字がつぶれるとき

縁取りを太くしすぎると、文字と文字の間の隙間や、文字の中の細かいすき間が縁取りの色で埋まってしまい、文字の形が読み取りにくくなります。

そんな時は次の方法を試してみてください。

  • 線幅を細くする:まず試す方法です。文字の太さに対して、線が太すぎないか見直します。
  • 文字間隔(トラッキング)を広げる:文字同士の縁取りがくっついている場合に有効です。
  • フォントを太くする、または文字サイズを大きくする:文字自体に余裕があれば、少し太い縁取りでも形が保てます。

応用編:二重・三重の袋文字を作る方法

縁取りを重ねると、ポップでインパクトのある袋文字になります。

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

基本手順と同じ要領で、新規線をもう1本追加します。

  1. 追加した線を選び、「選択した項目を複製」ボタンで複製する
  2. 複製した線の線幅を、もとの線より太くする
  3. 線の色を変える

線の重ね順は、一番外側の線が一番下になるようにしましょう。内側から外側の線に向かって、だんだん太くなるように調整します。

色の重ね方のコツ

  • 内側は文字と相性の良い色、外側は背景から浮く色にする
  • 白・黒の縁取りを挟むと、色同士がなじまず、くっきり見える
  • 使う色は3色までにすると、まとまりやすい

よくある失敗と対処法

縁取りをつけたら文字が細くなった

線が「文字」の上に重なっている状態です。アピアランスパネルで、線を「文字」の下に移動しましょう(基本手順の4を参照)。

フォントによっては潰れて読めなくなる

細いフォントや、線の細かい明朝体は、縁取りをつけると潰れやすいです。太めのゴシック体を選ぶと、きれいに仕上がります。

書き出すと縁取りが消える・崩れる

他のパソコンでデータを開いたときに、フォントがないために文字が崩れることがあります。共有や入稿の際は、次の章で紹介するアウトライン化をしておきましょう。

アウトライン化してから共有する

他の人にデータを渡す場合や、印刷データとして入稿する場合は、文字をアウトライン化します。

文字を選択した状態で、メニューの「書式」→「アウトラインを作成」を選びます。

アウトライン化すると、文字の修正はできなくなるため、元のデータは別に保存しておきましょう。

まとめ

袋文字は、アピアランスパネルで線を追加して「文字」の下に移動するだけで作れる、シンプルな文字装飾です。

  • 追加した線は、必ず「文字」の下に移動する
  • 角が尖って見えるときは「ラウンド結合」にする
  • 縁取りを重ねるときは、太い線を一番下にする
  • 太めのゴシック体を選ぶと、きれいに仕上がる
  • 共有・入稿のときはアウトライン化する(元のデータは別に保存)

基本さえ押さえれば、二重・三重の縁取りや効果の組み合わせでさまざまな表現ができます。まずは1本の縁取りから試してみてください。

こうした細かな技術の積み重ねが、デザインの仕上がりを左右します。GIVは川越でデザインの細部までこだわったホームページ制作をしています。バナーや画像の制作からお任せいただくことも可能ですので、お困りの際は、お気軽にご相談ください。

Web・AI・セキュリティのお悩みは
GIV株式会社へご相談ください

「サイトをリニューアルしたい」「業務を自動化したい」
そんな課題を、技術とデザインの力で解決します。
まずはお気軽にお問い合わせください。

無料相談・お問い合わせ
GIV / Design / Security / People
お問い合わせ
Contact
お問い合わせ
電話 お問い合わせ