※この記事はアドビ社のPR企画「デザインクイズチャレンジ」に参加して執筆しました。
アドビさんの企画「デザインクイズチャレンジ」、みなさんご覧頂けましたでしょうか。気軽なクイズ形式でデザインの知識を試せるコンテンツで、答え合わせと一緒に読める解説がとても充実しています。
知らなかった！という方はこちらにまとまっているので、この機会にぜひチェックしてみていただきたいです。
現在は全部で30回まであり、私は「デザイン演出」と「余白」の2つのテーマで参加しています。
この記事では、私が担当した「デザイン演出」のテーマから「吹き出し」に関するフォローアップをまとめます。
吹き出しは「調整しやすさ」がポイント
吹き出しは掲載内容やレイアウトのバランスに合わせて適切に調整すべきもの。できるだけ再編集が可能な状態で作る必要があります。
既存の素材を使ったり、アプリケーション内のプリセットを利用したりとさまざまなケースが考えられますが、調整のしやすさにこだわるなら、自分で作成するのが最も確実です。
遠回りに感じるかもしれませんが、アレンジが簡単なら後の作業もぐっとスムーズになります。
扱いやすいふきだしを自分で作ろう
デザインクイズチャレンジの記事内ではシンプルな「長方形と三角形を組み合わせる」方法を紹介しました。
長方形には「角を丸くする」効果を適用して、大きさが変わってもかたちが崩れないようにしています。さらに、必要に応じてグループにすると扱いやすくなります。
塗り一色のみで表現する吹き出しならこれでも十分ですが、ここでさらに「修正に強く、後から自由に調整できる」点を重視するなら、Illustratorならではの機能を活用しましょう。
合理的なしくみで作成すれば、もっと複雑な装飾も可能になります。
組み合わせただけでフチをつけると
吹き出し全体にフチをつけたいとき、長方形と三角形を組み合わせただけだと図のようになります。不要な部分にも線がつくので、美しい見た目とは言えませんね。
「パスファインダー」パネルで「合体」を実行すれば全体にフチをつけられますが、効果を使っていれば事前に「アピアランスを分割」する必要があるのに加え、後からのサイズ変更やしっぽの位置調整が難しくなります。
全体にフチをつけるなら「合体」効果を使おう
吹き出しのパーツを活かしつつ、全体にフチをつけたい場合は、「合体」効果を使うのがおすすめです。
長方形と三角形をまとめたグループを選択して、グループ側のアピアランスに「効果」メニュー→「パスファインダー」→「合体」効果を適用しましょう。
効果によって全体がひとつに合体されますが、中身のオブジェクトは再編集が可能なため、しっぽの位置を後から変更しても見た目を保つことができます。
パスファインダー効果の考え方
「合体」効果は「パスファインダー」パネルの「合体」と同じ処理を非破壊で行うものです。
「わかりにくい」と言われがちなパスファインダー効果ですが、以下のポイントが理解への近道です。
- 「パスファインダー」パネルと同じ処理ができる
- 効果なので再編集ができる
「パスファインダー」パネルを使う場合は複数のオブジェクトを対象に演算しますが、効果の場合はグループ内のオブジェクト同士や、単一オブジェクトの塗り・線の項目同士などのアピアランス属性が演算の対象になります。
今回の例のように、グループの場合はグループ側のアピアランスに効果を適用します。
グループ側のアピアランスで見た目を一括管理
ここで上級者の方におすすめしたいのが、アピアランスの情報を整理してさらに扱いやすくする作り方です。
長方形と三角形を組み合わせてグループにする点は同じですが、以下のような方針で、グループの内容・グループ側とで役割を分けます。
グループの内容でかたちをコントロール
- 中身のオブジェクトは線も塗りもなしに
- 「角を丸くする」など、かたちを変える効果はそのまま
グループ側のアピアランスで見た目をコントロール
- グループに対して線や塗りを設定する
- 「合体」効果のほか、さらに効果を足してかたちをアレンジしてもよい
先の例のように、中身のオブジェクトに線・塗りを設定し、グループまたはパス上オブジェクトへ「合体」効果をかける、という作り方でも問題はありませんが、アピアランスの情報が階層化すると管理が大変です。
この作り方なら吹き出しのグループを選択して「アピアランス」パネルを見たときに一目で構造がわかり、編集しやすい状態になります。
「パス上オブジェクト」ならもっと便利に
さらに一歩進んだ方法として、吹き出しをグループにする代わりに「パス上オブジェクト」で吹き出しを作成するのも良いでしょう。
Illustrator 2025（29）で新たに追加された機能で、とてもかんたんに作成できます。
今回の吹き出しの場合は、しっぽの三角形を選択してから「パス上オブジェクトツール」に切り替え、吹き出し本体の長方形（ターゲットパス）をクリックするだけです。
長方形の辺に合わせてしっぽのパーツを自由に動かせるようになるだけでなく、パス上オブジェクトとして全体がひとつにまとまり、扱いやすくなるメリットもあります。
パス上オブジェクトと効果を組み合わせよう
パス上オブジェクトは効果との相性が良いのもメリットのひとつです。
例えば、吹き出しの長方形には「角を丸くする」効果をかけたままでパス上オブジェクトを作成できます。パス上オブジェクトに変換しても効果は保たれるため、後から何度でも角丸の半径を変えられます。
また、吹き出し全体にフチを付けるならパス上オブジェクトに「合体」効果をかければ作成できます。
グループに「合体」効果を適用する場合と考え方は同じで、しっぽの位置を移動しても見た目が破綻することはありません。
上級者向けの「内容とグループとで役割を分ける」作り方も有効なので、しっぽの位置の変更しやすさと見た目のコントロールのしやすさを両立できます。
アピアランスでいろいろアレンジしてみよう
単純にフチをつけるだけでなく、パターンや破線、「変形」効果を使った版ずれ風の演出など、さまざまにアレンジを加えた例です。
ここまで解説で使った「角を丸くする」効果をかけた長方形と三角形の組み合わせを元に、パス上オブジェクトを作ってさらに効果で装飾しています。いずれも、大きさやしっぽの位置の調整などが再編集しやすい吹き出しになっています。
ここでは長方形がベースになっていますが、楕円形など違う形を使ってもよいでしょう。
凝った見た目の吹き出し素材も扱いやすくしたい！と言うときにお役立ていただければうれしいです。
アレンジ例のアピアランス
線に「線分と間隔の正確な長さを保持」をオンにした破線を適用してラフな印象に
「パスのオフセット」効果の重ねがけで、吹き出し本体としっぽのつなぎ目を滑らかにする
「変形」効果で塗りだけを動かして版ずれ風の演出
「パターンの変形」だけをオンにした「変形」効果をかけて、パターンの角度や大きさをコントロール
参考ポスト
パス上オブジェクトでふきだしパーツ作ったら扱いやすいかもしれない〜！
— hamko (@hamko1114) October 17, 2024ふきだし口のパーツはパス上をすいすい移動できる
投稿 【Illustrator】扱いやすいふきだしを作ろう #デザインクイズチャレンジ #PR は hamfactory に最初に表示されました。
同梱のクイックスタートガイド。クラフト紙に白+黒インキの組み合わせ、かわいいですよね
消灯（左）点灯（右）で状態を比較。手元だけしっかり明るくなっています
ゲコリノフ
映り込みだけでなく全体が照らされるのでかなりまぶしく感じます
