このあしらい、どっちが正解？装飾のブラッシュアップ力を磨いておこう

1．吹き出しのツノの長さを調整する

まず、1問目から振り返っていきましょう。
私が選んだ答えは「A」でした。

AとBの違いは、吹き出しの「ツノ（しっぽ）」の長さです。

ツノには視線を誘導する矢印の役割があり、吹き出しの中の情報がどこから発せられているかを示してくれます。

今回の作例では、ツノが主張しすぎず、スムーズに文字へと視線を誘導できている「A」を正解としました。

このツノが長いか短いかで、「どこを見てほしいのか」「何と何がつながっているのか」の伝わり方が変わってきます。

よくありがちなのが、目立たせようとしてBのようにツノを長くしてしまうケース。

実はこれ、情報設計の観点だと逆効果になりやすいんです。

なぜ「長すぎるツノ」はNGになりやすいのか

ツノが長すぎると逆効果になる理由は、視線が「文字」ではなく「線」に奪われてしまうからです。

吹き出しのツノはあくまで「誰の言葉か」を指し示すための補助役です。

ツノが長すぎると主役のように目立ってしまい、読み手の視線がツノの線を追う動きになります。

その結果、本当に読んで欲しいテキストの読み始めがワンテンポ遅れてしまいます。

補助の要素が主役を食う状態になり、肝心の内容が伝わりにくくなる「悪目立ち」の状態になってしまうのです。

「ちょうどよい長さ」を判断するコツ

では、Adobe Illustratorで吹き出しを作るとき、「ツノが長すぎるかどうか」をどう判断すればよいのでしょうか。

私がよく行う確認方法は、吹き出し全体を少し離れた距離から見てみることです。

画面から一歩引いて（またはズームアウトして）見たとき、以下のような基準で判断しています。

• ツノが真っ先に目に入る→長すぎる
• 吹き出しの本体（文字の囲み）が先に目に入る→ちょうどよい

上記を意識しても迷う場合には、長さを少しずつ変えたバリエーションを3〜4つ作り、横に並べて比較してみましょう。

このように、いくつかのバリエーションを用意して客観的に見比べることで、どの長さが一番スムーズに文字に視線が流れるかが判断しやすくなります。

それでも迷ったら「短辺の半分以下」に収める

ただ、ここまでご紹介してきた確認方法を実践しても、判断が難しい場合があります。

そんなときは、まずツノの長さを「吹き出し本体の短い辺の半分以下」にしてみるのがオススメです。

今回の作例であれば、吹き出し本体のサイズが縦44px・横242pxなので、ツノの長さは22px以下に抑えます。

まずはこの目安の範囲内でツノを作り、そこから微調整していくと、バランスよく仕上げることができます。

※あくまで目安ですので、全体のデザインに合わせて柔軟に調整してくださいね。

2．集中線の収束点に「余白」を作って、文字を読みやすくする

続いて、2問目の振り返りです。
私が選んだ答えは「B」でした。

AとBの違いは、集中線の収束点に「余白」があるかどうかです。
Aは「50％OFF」の文字のすぐ近くまで線が集まっていますが、Bは集中線の収束点に適度な余白が設けられています。

この余白のおかげで文字が読みやすくなるため、今回はBを正解としました。

なぜ余白がないと読みにくく感じるのか

Aのバナーを見たとき、文字の輪郭が少しぼやけて見えませんか？

これは、集中線が文字に近づきすぎていることで、線と文字の境界線が混ざり合って見えてしまうからです。

集中線には、中心から外に向かってパッと飛び出すような、スピード感のある「動き」を演出する効果があります。

そのため、文字のすぐそばまで線が迫っていると、脳が「文字まで動いている」と錯覚して視線が泳いでしまい、文字そのものの読みやすさ（可読性）を損なってしまうのです。

一方でBでは、文字と被ってしまう収束点に、あえて余白を設けています。
この余白が、集中線が作る「勢い」と、文字がもつ「静止した情報」をはっきりと切り分けてくれます。

そのおかげで、周囲の演出に邪魔されることなく、視線が文字に集中しやすくなるのです。

3．リボンとテキストで「円弧」の数値を変える

最後に、3問目の振り返りです。

私が選んだ答えは「A」でした。

この問題は少し難しかったかもしれません。

AとBの違いは、「OPEN CAMPUS」というテキストの曲がり具合（カーブの強さ）です。

一見するとわずかな差ですが、この「曲線のなじませ方」がデザイン全体のクオリティを左右します。

ここで、ひとつ質問です。

Illustratorでリボンのオブジェクトに「円弧」の効果をかけたあと、その上に載せるテキストの数値も、リボンと「同じ数値」に設定していませんか？

デザイン初学者の方がよくやってしまいがちなのが、「リボンを円弧20%で曲げたから、テキストも20%に揃えればピッタリ重なるはず」という判断です。

数値を揃えれば正確に整う気がしますが、実はこの判断が見た目の違和感を生んでしまう「数値の落とし穴」なのです。

なぜ「同じ数値」に設定すると違和感が出るのか

Illustratorのワープ機能（円弧）は、同じ数値を入力しても図形とテキストでは「曲がり方の基準」が異なります。

• 図形：シェイプ全体の外枠を基準に曲げる
• 文字：文字の下のライン（ベースライン）を基準に曲げる

この基準の違いにより、同じ「20%」という数値を設定しても、文字の方が必要以上に大きく反り返って見えたり、両端が窮屈に詰まって見えたりします。

数値上は正しくても、見た目には「リボンとテキストのカーブが合っていない」という違和感につながってしまうのです。

まとめ：数値とロジックで再現性を高めよう

今回はあしらいに関するクイズと、デザインテクニックを取り上げました。

最後に今回のノウハウのまとめです。

1．吹き出しのツノの長さを調整する

• ツノが長すぎると、視線が文字ではなく線に奪われてしまう
• 少し離れた距離から見て、ツノより吹き出し本体が先に目に入るかを確認する

2．集中線の収束点に「余白」を作って、文字を読みやすくする

• 集中線が文字に近すぎると、線と文字の境界が混ざって可読性が下がる
• 効果のぼかしを使って、文字の周りに十分な余白エリアを確保する

3．リボンとテキストで「円弧」の数値を変える

• 装飾オブジェクトとテキストでは、「曲げられる前提」が違う
• リボンに適用した円弧効果と同じ数値をテキストに使うと、文字が読みにくくなる
• テキストには、リボンより緩い数値の円弧を適用する

デザインは、ほんの少しの調整でクオリティが大きく変わります。

次に作るバナーやポスターなどで、ぜひ今回の内容を試してみてください。

きっと、いつもより一段上の仕上がりになるはずです。

お相手はWeb＆グラフィックデザイナーのゆかまるでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。

以下の記事はまた違った、あしらいに関するクイズです。

このデザインのあしらい、どっちが正解？装飾のセンスを磨いておこう

※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。