コーダー目線で理解するIllustratorのアピアランス機能

2020年7月28日

Illustratorのアピアランスを知ったとき、1番最初に感じた印象は「CSSっぽい！」だったのをふと思い出しました。

改めて考えるとCSSっぽいところが多いので、今回はコーダー目線でIllustratorのアピアランス機能について考えてみます。
どこまで需要があるのか分かりませんが、デザイナーさんでもコーディングに関しての知識がある人はきっとアピアランスに対する理解が深まると思います。

アピアランスとは？

「Appearance」を直訳すると「外観」などと訳されます。
その名の通り、Illustrator上のテキストやオブジェクトの外観を装飾できる機能です。

これだけ聞くとHTMLに対して装飾を行うCSSと似てることはなんとなく想像できると思います。

さらに、アピアランスで設定した内容はあとから簡単に修正できます。

アピアランスはIllustrator上のテキストやオブジェクトを選択して「アピアランスパネル」で編集していきます。

そして、テキストやオブジェクトに対して「塗り」と「線」の2つ設定項目があります。
この「塗り」と「線」方はCSSで言うところの疑似要素だと考えると分かりやすいです。

さらに、この疑似要素はアピアランスパネルの左下のアイコンをクリックすれば好きなだけ追加ができます。

疑似要素が好きなだけ追加できるということは、1つのタグで自由に装飾が作れます。
このすごさはコーダーの方なら理解してもらえますよね。

Illustratorは数多くの図形を使って装飾を表現できますが、図形としては1つで、装飾はアピアランスに任せてしまった方が変更に強いです。

CSS的に考えると下記のような構造になります（構造が見やすいようにSCSSっぽく記述しています）。

.オブジェクト {
  オブジェクト全体の装飾を指定
  &::塗り {
    塗りの装飾を指定
  }
  &::線 {
    線の装飾を指定
  }
  &::塗り2（追加した場合） {
    塗り2の装飾を指定
  }
}

これをテキストではなくレイヤー上でボタンをポチポチ押して設定していきます。

アピアランスには手前や奥の概念（z-index）があり、これに関しては数値を指定するのではなく、レイヤーの順序を入れ替えることで指定可能です。
順序は1番上にあるものが1番手前に表示され、下にあるものは奥に表示されます。

z-indexが変わればそれによって見栄えも変わってしまうので、注意が必要です。

CSSを書くときの基本ですが、ブラウザごとの差異を避けたり、余計な装飾を消すために「リセットCSS」や「ノーマライズCSS」を読み込みますよね。

それと似たような感じで、アピアランスも意図しない動作を防ぐために「最初に文字の線・塗りを無し」にするとよく言われます。
「なぜそんなことをしないといけないの？」の詳しい理由に関してはこちらの記事に詳しく載っていますので、気になる方はご覧ください。

とにかく、まずは「リセットCSSをかけるのと同じ感覚」レベルの認識でいいと思います。

アピアランスパネルの右下にある「fx」ボタンをクリックすると、追加する効果を選択できます。
ここの一覧がCSSで言うところのプロパティになります。

アピアランスパネルで設定したい位置をクリックしてから効果を選択すれば、適用位置の指定もできます。
また、効果をドラッグアンドドロップすれば適用位置も簡単に変えられます。

下記はアピアランスの中でもよく使う最低限知っておきたい効果です。

効果	内容	備考
［パス］→［オブジェクトのアウトライン］	通常のアウトライン化と違って、アウトライン化「したことにする」効果。振る舞いはアウトライン化したときと同様になるものの、テキストは編集できるままになる
［形状に変換］→［長方形…］	塗りや線を長方形に変形させる	複数塗りを用意して、長方形に変換すると、装飾付きのテキストが作れる
［パスの変形］→［変形…］	長方形に変換した塗りや線の位置を移動させられる

これらや他にもいくつかある効果を組み合わせて、オブジェクトやテキストに非破壊で装飾を付けていけます。