このあしらい、どっちが正解？装飾のブラッシュアップ力を磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
Web／グラフィックデザイナーのゆかまるです。
今回、私はバナーやポスターなどでよく使う「吹き出し」「集中線」「リボン」といった「あしらい（装飾）」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「あしらい」がよいと感じますか？
1問目「吹き出しのツノ、適切な長さはどっち？」（難易度★）
2問目「集中線の扱い、文字が読みやすいはどっち？」（難易度★★）
3問目「リボンの上の文字、きれいな曲がり方はどっち？」（難易度★★★）
いかがでしたか？
私が考える答えは……
1問目の答え：A
2問目の答え：B
3問目の答え：A
以上が私なりの解答です。
あなたがよいと感じたあしらいは、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
https://main--cc--adobecom.aem.live/jp/cc-shared/fragments/roc/seo/design/quiz-challenge-annotation
1．吹き出しのツノの長さを調整する
まず、1問目から振り返っていきましょう。
私が選んだ答えは「A」でした。
AとBの違いは、吹き出しの「ツノ（しっぽ）」の長さです。
ツノには視線を誘導する矢印の役割があり、吹き出しの中の情報がどこから発せられているかを示してくれます。
今回の作例では、ツノが主張しすぎず、スムーズに文字へと視線を誘導できている「A」を正解としました。
このツノが長いか短いかで、「どこを見てほしいのか」「何と何がつながっているのか」の伝わり方が変わってきます。
よくありがちなのが、目立たせようとしてBのようにツノを長くしてしまうケース。
実はこれ、情報設計の観点だと逆効果になりやすいんです。
なぜ「長すぎるツノ」はNGになりやすいのか
ツノが長すぎると逆効果になる理由は、視線が「文字」ではなく「線」に奪われてしまうからです。
吹き出しのツノはあくまで「誰の言葉か」を指し示すための補助役です。
ツノが長すぎると主役のように目立ってしまい、読み手の視線がツノの線を追う動きになります。
その結果、本当に読んで欲しいテキストの読み始めがワンテンポ遅れてしまいます。
補助の要素が主役を食う状態になり、肝心の内容が伝わりにくくなる「悪目立ち」の状態になってしまうのです。
「ちょうどよい長さ」を判断するコツ
では、Adobe Illustratorで吹き出しを作るとき、「ツノが長すぎるかどうか」をどう判断すればよいのでしょうか。
私がよく行う確認方法は、吹き出し全体を少し離れた距離から見てみることです。
画面から一歩引いて（またはズームアウトして）見たとき、以下のような基準で判断しています。
- ツノが真っ先に目に入る→長すぎる
- 吹き出しの本体（文字の囲み）が先に目に入る→ちょうどよい
上記を意識しても迷う場合には、長さを少しずつ変えたバリエーションを3〜4つ作り、横に並べて比較してみましょう。
このように、いくつかのバリエーションを用意して客観的に見比べることで、どの長さが一番スムーズに文字に視線が流れるかが判断しやすくなります。
それでも迷ったら「短辺の半分以下」に収める
ただ、ここまでご紹介してきた確認方法を実践しても、判断が難しい場合があります。
そんなときは、まずツノの長さを「吹き出し本体の短い辺の半分以下」にしてみるのがオススメです。
今回の作例であれば、吹き出し本体のサイズが縦44px・横242pxなので、ツノの長さは22px以下に抑えます。
まずはこの目安の範囲内でツノを作り、そこから微調整していくと、バランスよく仕上げることができます。
※あくまで目安ですので、全体のデザインに合わせて柔軟に調整してくださいね。
Illustratorでおしゃれな楕円形の吹き出しを作る方法
デザインの「あしらい」としてよく使われる楕円形の吹き出し。
実は、ツノ（しっぽ）の部分を少しカーブさせるだけで、おしゃれで柔らかい印象に仕上がります。
ここでは、ツノをなめらかにカーブさせた楕円形吹き出しの作り方をご紹介します。
2．集中線の収束点に「余白」を作って、文字を読みやすくする
続いて、2問目の振り返りです。
私が選んだ答えは「B」でした。
AとBの違いは、集中線の収束点に「余白」があるかどうかです。
Aは「50％OFF」の文字のすぐ近くまで線が集まっていますが、Bは集中線の収束点に適度な余白が設けられています。
この余白のおかげで文字が読みやすくなるため、今回はBを正解としました。
なぜ余白がないと読みにくく感じるのか
Aのバナーを見たとき、文字の輪郭が少しぼやけて見えませんか？
これは、集中線が文字に近づきすぎていることで、線と文字の境界線が混ざり合って見えてしまうからです。
集中線には、中心から外に向かってパッと飛び出すような、スピード感のある「動き」を演出する効果があります。
そのため、文字のすぐそばまで線が迫っていると、脳が「文字まで動いている」と錯覚して視線が泳いでしまい、文字そのものの読みやすさ（可読性）を損なってしまうのです。
一方でBでは、文字と被ってしまう収束点に、あえて余白を設けています。
この余白が、集中線が作る「勢い」と、文字がもつ「静止した情報」をはっきりと切り分けてくれます。
そのおかげで、周囲の演出に邪魔されることなく、視線が文字に集中しやすくなるのです。
Illustratorで集中線の収束点に違和感のない余白を作るコツ
集中線の中に文字を置くときは、あらかじめ文字周辺に「ここから先は線を入れないエリア」を設定するのがポイントです。
Illustratorを使った具体的な手順を、以下で解説します。
- 「隠し用」の図形を作る
文字の上に、余白にしたい大きさの図形（円や四角）を重ねて置く - 図形の境界線を「ぼかす」
置いた図形を選択した状態で、「効果」メニューの「スタイライズ」＞「ぼかし」を適用し、周囲をふんわりとぼかす - 集中線と重ねる
「ぼかした図形」で集中線の中心部分（収束点）を隠し、その上に文字を配置する
「ぼかした図形」を使うことで、文字の周りにある集中線が自然に途切れたようになり、心地よい余白が生まれます。
集中線は「インパクト」や「勢い」を演出するための強力な要素ですが、あくまで主役は「50％OFF」といった文字情報です。
デザインが完成したら、一度数秒だけバナーを見てから、パッと目を閉じてみてください。そのとき頭に残っているのが「50％OFF」なら大成功。
「なんか派手な線だったな」という印象だけなら、演出が強すぎるサインです。
見る人の記憶に残すべき情報は、「演出ではなく内容」という感覚を大切にしてみてください。
3．リボンとテキストで「円弧」の数値を変える
最後に、3問目の振り返りです。
私が選んだ答えは「A」でした。
この問題は少し難しかったかもしれません。
AとBの違いは、「OPEN CAMPUS」というテキストの曲がり具合（カーブの強さ）です。
一見するとわずかな差ですが、この「曲線のなじませ方」がデザイン全体のクオリティを左右します。
ここで、ひとつ質問です。
Illustratorでリボンのオブジェクトに「円弧」の効果をかけたあと、その上に載せるテキストの数値も、リボンと「同じ数値」に設定していませんか？
デザイン初学者の方がよくやってしまいがちなのが、「リボンを円弧20%で曲げたから、テキストも20%に揃えればピッタリ重なるはず」という判断です。
数値を揃えれば正確に整う気がしますが、実はこの判断が見た目の違和感を生んでしまう「数値の落とし穴」なのです。
なぜ「同じ数値」に設定すると違和感が出るのか
Illustratorのワープ機能（円弧）は、同じ数値を入力しても図形とテキストでは「曲がり方の基準」が異なります。
- 図形：シェイプ全体の外枠を基準に曲げる
- 文字：文字の下のライン（ベースライン）を基準に曲げる
この基準の違いにより、同じ「20%」という数値を設定しても、文字の方が必要以上に大きく反り返って見えたり、両端が窮屈に詰まって見えたりします。
数値上は正しくても、見た目には「リボンとテキストのカーブが合っていない」という違和感につながってしまうのです。
リボンとテキストのカーブを「見た目」で揃えるコツ
まず、Illustratorで円弧の効果を設定する方法を確認しておきましょう。
- リボンのオブジェクトを選択
- 「効果」メニューの「ワープ」＞「円弧」を選択
- 「カーブ」の数値を調整（例：20%）
それでは続いて、このリボンの上に載せるテキストのカーブを美しく合わせるコツをご紹介します。
ポイントは、「リボンと同じ数値を使わないこと」です。
テキストにもリボンと同じ手順で「円弧」を適用しますが、もしテキストの曲がり具合に違和感がある場合は、少し緩い数値（例：15〜18%）を設定してみてください。
厳密なルールはありませんが、「オブジェクトと同じか、それより少し小さな数値」を意識するだけで、テキストの上下の余白が均一になり、バランスが整います。
また、長い文章ほど円弧の歪みが目立ちやすくなるため、テキストの長さに応じて柔軟に強さを変えてみるのがオススメです。
数値上の正しさよりも、パッと見たときの「リボンとテキストの隙間が一定に見えるか」という感覚を大切にしてみてください。
まとめ：数値とロジックで再現性を高めよう
今回はあしらいに関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．吹き出しのツノの長さを調整する
- ツノが長すぎると、視線が文字ではなく線に奪われてしまう
- 少し離れた距離から見て、ツノより吹き出し本体が先に目に入るかを確認する
2．集中線の収束点に「余白」を作って、文字を読みやすくする
- 集中線が文字に近すぎると、線と文字の境界が混ざって可読性が下がる
- 効果のぼかしを使って、文字の周りに十分な余白エリアを確保する
3．リボンとテキストで「円弧」の数値を変える
- 装飾オブジェクトとテキストでは、「曲げられる前提」が違う
- リボンに適用した円弧効果と同じ数値をテキストに使うと、文字が読みにくくなる
- テキストには、リボンより緩い数値の円弧を適用する
デザインは、ほんの少しの調整でクオリティが大きく変わります。
次に作るバナーやポスターなどで、ぜひ今回の内容を試してみてください。
きっと、いつもより一段上の仕上がりになるはずです。
お相手はWeb＆グラフィックデザイナーのゆかまるでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
以下の記事はまた違った、あしらいに関するクイズです。
このデザインのあしらい、どっちが正解？装飾のセンスを磨いておこう
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。
執筆：ゆかまるデザイン
プロフィール
フリーランスデザイナー / Adobe Community Evangelist / Adobe Community Expert
SNSにてAdobe IllustratorやAdobe ExpressのTIPS動画を発信。
デザインスクールを運営し、自身が受注した案件を受講生と共に制作する独自のカリキュラムを展開。現在はデザイナー兼指導者として多様なプロジェクトに参画中。