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

URL: https://webrandum.net/illustrator-appearance-coder-perspective/
公開日: 2020-07-28
更新日: 2020-07-28
カテゴリー: デザイン
タグ: Illustrator
出典: Webrandum（著者: サイトウ マサカズ）

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

改めて考えるとCSSっぽいところが多いので、今回はコーダー目線でIllustratorのアピアランス機能について考えてみます。

どこまで需要があるのか分かりませんが、デザイナーさんでもコーディングに関しての知識がある人はきっとアピアランスに対する理解が深まると思います。

## アピアランスとは？

「Appearance」を直訳すると「外観」などと訳されます。

その名の通り、Illustrator上のテキストやオブジェクトの外観を装飾できる機能です。

- 色を塗る

- 線を付ける

- ドロップシャドウを付ける

- ぼかしを加える

- 変形させる

- 透明度の設定

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

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

## アピアランスの仕組み

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

![アピアランスの状態](https://webrandum.net/mskz/wp-content/uploads/2020/07/image_1-8.png)

そして、テキストやオブジェクトに対して「塗り」と「線」の2つ設定項目があります。

この「塗り」と「線」方はCSSで言うところの疑似要素だと考えると分かりやすいです。

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

![疑似要素をいくつも追加する](https://webrandum.net/mskz/wp-content/uploads/2020/07/image_3-6.png)

疑似要素が好きなだけ追加できるということは、1つのタグで自由に装飾が作れます。

このすごさはコーダーの方なら理解してもらえますよね。

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

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

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

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

### アピアランスのz-index

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

順序は1番上にあるものが1番手前に表示され、下にあるものは奥に表示されます。

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

## アピアランスの使い方

### リセットCSSをかける

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

それと似たような感じで、アピアランスも意図しない動作を防ぐために「最初に文字の線・塗りを無し」にするとよく言われます。

「なぜそんなことをしないといけないの？」の詳しい理由に関しては[こちらの記事](https://www.tutorialmaniacs.net/archives/2095)に詳しく載っていますので、気になる方はご覧ください。

[![](https://www.google.com/s2/favicons?domain=www.tutorialmaniacs.net)チュートリアルマニアックス![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/f655acfd20dc7381603703ddad4c43808ea545c539c5808ca88c682ba0e53aed.webp)文字の線・塗りを「無し」にする理由を超丁寧に解説【アピアランス】https://www.tutorialmaniacs.net/archives/2095「文字の線・塗りは「無し」にします」 アピアランスパネルを使って、テキストに効果をかける時、よく目にする一文です。私自身も、テキスト系のチュートリアルでは毎回のように言っています。 毎回のように言っているくせに、その理由 ...](https://www.tutorialmaniacs.net/archives/2095)

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

### プロパティを設定

アピアランスパネルの右下にある「fx」ボタンをクリックすると、追加する効果を選択できます。

ここの一覧がCSSで言うところのプロパティになります。

![アピアランスパネル](https://webrandum.net/mskz/wp-content/uploads/2020/07/image_2-7.png)

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

また、効果をドラッグアンドドロップすれば適用位置も簡単に変えられます。

#### 覚えておくと便利な効果

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

| 効果 | 内容 | 備考 |
| --- | --- | --- |

| ［パス］→［オブジェクトのアウトライン］ | 通常のアウトライン化と違って、アウトライン化「したことにする」効果。 振る舞いはアウトライン化したときと同様になるものの、テキストは編集できるままになる |   |
| --- | --- | --- |

| ［形状に変換］→［長方形…］ | 塗りや線を長方形に変形させる | 複数塗りを用意して、長方形に変換すると、 装飾付きのテキストが作れる |
| --- | --- | --- |

| ［パスの変形］→［変形…］ | 長方形に変換した塗りや線の位置を移動させられる |   |
| --- | --- | --- |

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

## まとめ

コーダー目線によっているので、細かい用語もそちらよりになってしまいましたが、何となくの全体像がつかめたのではないかと思います。

もちろんアピアランス独特のものも数多く存在しますが、オブジェクトやテキストに対してCSSを当てているようなものだと考えると、かなりスッキリ理解できそうです。

アピアランスに限らず、パッと理解できないもの・難しそうでとっつきづらいものを、既に知っているもので考えると抵抗感もなくなります。