Webデザインでよく使うIllustratorのアピアランス
突然ですが、下のパンダの画像は背景含め何個のオブジェクトで作られていると思いますか？
背景1個+白い顔1個+耳2個+目2個+鼻1個+頬2個＝9個でしょうか…？
いえ、違います。
正解は1個です！！
アウトラインでプレビューするとこの通り。↓
1個の正方形から作られています！！
実はこれは全てアピアランスを使って作った画像なんです。
だから他のオブジェクトにあてても同じパンダが出現します。
アピアランスってすごいですよね。
よくわからなくてあまり使ってないという方、もったいないですよ！
※そもそもアピアランスって何なの？という方はアドビ公式をご覧ください。
（簡単に言えば、構造を変えずに見た目を変える機能のことです。）
今回はWebデザインの実務でもよく使用する3つのアピアランスをご紹介します。
1.袋文字
まずはイラレ初心者の方に「どうやるんですか？」と聞かれる袋文字！
使用率も高いので覚えてしまいましょう。
作り方
1. テキストの「塗り」と「線」を消す。
2. アピアランスパネルで「塗り」と「線」を追加し、好きな色に変更する。
3. 「線」のレイヤーを「塗り」の下に移動する。
4. 「線」の太さを調節して出来上がり。
角を丸くしたいときは線パネルの「角の形状」を「ラウンド結合」にすればOK。
さらに線を追加して二重の袋文字を作ることもできます。（さらに追加すれば三重も可能）
アウトライン化していないのでテキスト修正にも対応可能です。
2.テキストの後ろに帯
見出しなどに使われるようなテキストの後ろに帯をひく方法です。
作り方
1. 袋文字と同じくテキストの「塗り」と「線」を消しましょう。
2. アピアランスパネルで「塗り」を2つ追加し、好きな色に変更する。
※上の「塗り」は文字の色、下の「塗り」は帯の色になります。
3. 下の「塗り」を選択し、［形状に変換］→［長方形］を適用します。
形状オプションパネルが開くので、プレビューにチェックを入れ
「値を追加」を選択し、幅と高さの値を調整します。
しかし、これだけだとテキストと帯が中央揃えになりません。
4. そこで［パス］→［オブジェクトのアウトライン］を適用します。
※注意！！※
「長方形」効果の下にあると適用されないので、
［オブジェクトのアウトライン］を上に持っていきましょう。
5. 綺麗に中央にそろって完成です！
テキストの後ろにオブジェクトを敷いても作れますが、
それだとテキスト修正が入ったときに後ろのオブジェクトも調整しなければなりません。
しかし、アピアランスで作ればテキストと一緒に後ろの帯も伸びてくれるので便利！
3.複製
コラムサイトなど同じものを等間隔で繰り返し配置したい時にもアピアランスが便利です。
（Xdでいうところの「リピートグリッド」みたいなことです。2020年にリリース予定のiPad版Illustratorにも同じような機能が搭載されるみたいなのでPC版にも搭載されるといいですね～。）
作り方
1. 繰り返したいものをグループ化しておきます。
2. [パスの変形]→「変形」を選択。
3. 変形効果パネルが表示されます。
まずは横に複製したいと思います。
基準点を右端に指定し、増やしたい数を「コピー」欄に入力します。
そして「移動」の「水平方向」の値を調節します。
3つコピーして4列に複製できました。
4. 次は縦に複製します。
再び[パスの変形]→「変形」を選択。
変形効果パネルがが表示されたら、
基準点を下に指定し、増やしたい数を「コピー」欄に入力します。
そして「移動」の「垂直方向」の値を調節します。
2つコピーして3行に複製できました。
アピアランスで作ってあるので、「コラムタイトル部分を1行にしてほしい」
という修正が来ても最初の1つを直せばすべてに反映されます。
「全部に違うテキストを入れたいんだけど…」という場合も大丈夫です！
[オブジェクト]→[アピアランスを分割]を押せば疑似的に見せていたものがすべて実体化されます。
※一度分割したものをいじってしまうと疑似的な状態に元に戻すことはできません。
名刺を自分で印刷するときなども使えます。
まとめ
色々なことができ、覚えてしまえばとても楽しいアピアランス。
「難しそう…」と思っている方もまずは自分で試してみてください。
一つのことができると理解が深まるので一つ出来たら次のこと、と順番に覚えていくとよいでしょう。
おまけ：無限パンダ
