イラストレーター（Illustrator）のアウトライン化について、解説していきます。
また、アウトライン化のやり方も解説します。
- アウトライン化とは何か、なぜ必要なのか
- アウトライン化の手順と、できているかの確認方法
- WebサイトでSVGを使うときの注意点
- アウトライン化すると失うもの
アウトライン化ってなに？
イラストレーターで入力する文字には、フォント情報が入っています。
フォント情報があることで、指定したフォントにすることができています。
フォント情報の中には・・・
- 行間
- 文字間
- 文字サイズ
などの多数の情報が含まれています。
それら、フォント情報をオブジェクト（図形）することをアウトライン化といいます。
アウトライン化が必要な理由は？
では、なぜアウトラインが必要なのか？ですが。
それは、データを開いた環境によって、フォント情報が置き換わり、意図したフォントが表示されなくなってしまうからです。（データを開く環境によっては、指定したフォントがインストールされていない環境もあります。）
意図したフォントを表示するために、アウトライン化をすることで、フォント情報をなくし、オブジェクト（図形）にしてデータを開く環境に左右されないようにするのです。
イラストレーターのデータを納品するときは、アウトライン化することが一般的なので、デザイナーの方々は覚えておくといいでしょう。
アウトライン化後は戻すことができない。
アウトライン化は、一度行い、保存してしまうと、元に戻すことができなくなります。
そのため、アウトライン化を行う際は、別名で保存するなどして、アウトライン化されていないデータと分けておくことをおすすめします。
アウトライン化のやり方・手順。
アウトライン化の手順を解説します。
手順的には数ステップで完了する簡単なものです。
- アウトライン化したいデータを開く。
- すべてを選択します。
- 書式 > アウトラインを作成を選択
これで、アウトライン化が完了します。
操作の補足で画像をつけておきます。
画像は、Macの画面です。
メニューバーの「選択」から「すべてを選」をクリックします。
ショートカット「command ＋A」でもOKです。
次に、メニューバーの「書式」から「アウトラインを作成」を選択します。
選択すると、アウトライン可能なテキストが全てアウトライン化されます。
アウトライン化されているのか確認する。
当然ですが、アウトライン化は見た目が変わりません。
そのため、アウトライン化を行ったあとは、アウトライン化が間違いなく行われているか確認しましょう。
- 書式 > フォントの検索と置き換え
フォントの検索を置き換えの中に「ドキュメントフォント」とあると思います。
この中に、フォント情報が表示されてないなければ、間違いなくすべてのテキストがアウトライン化されています。
メニューバーの「書式」から「フォントの検索と置換」を選択します。
選択すると、以下の画面が表示されます。
「ドキュメントフォント」の中にフォント情報が表示されていなければ、アウトライン化されています。
逆に以下ようになっている場合は、アウトライン化されていないので、もう一度同じ手順でアウトライン化を試してください。
WebサイトでSVGを使うときのアウトライン化。
ここからは、コーダー側の話です。
デザインカンプからロゴや見出しをSVGで書き出すことがあると思います。
このとき、アウトライン化せずに書き出すと、環境によって表示が崩れます。
アウトライン化していないSVGは何が起きるのか。
SVGは、テキストを<text>要素として持つことができます。
便利そうに見えますが、その文字をどのフォントで表示するかは閲覧者のパソコン任せになります。
<!-- アウトライン化していない -->
<text font-family="Noto Sans JP" x="0" y="40">サービス紹介</text>
<!-- アウトライン化した -->
<path d="M12.4,3.2 L18.9,3.2 ..." />上のコードだと、そのフォントが入っていない環境ではまったく別のフォントに置き換わります。
デザイナーが指定したフォントで作ったはずのロゴが、環境によってゴシックになったり明朝になったりするわけです。
文字幅も変わるので、レイアウトそのものがずれます。
下のようにpathになっていれば、ただの図形なので、どの環境でも同じ見た目になります。
自分の環境では気づけないので注意。
やっかいなのが、制作者の環境では正しく表示されてしまうことです。
デザインを作った本人のパソコンには、当然そのフォントが入っています。
そのため、ブラウザで確認しても問題なく見えてしまい、そのまま納品されてしまいます。
気づくのは、フォントを持っていないクライアントから「文字が違う」と連絡が来たときです。
書き出したSVGを確認する方法。
確認は簡単です。
書き出したSVGファイルを、そのままエディタで開いてください。
SVGはテキストファイルなので、VSCodeなどでそのまま中身が見られます。
そこで<textやfont-familyを検索して、1件もヒットしなければアウトライン化されています。
ヒットした場合は、Illustratorに戻ってアウトライン化をやり直してください。
前述の「フォントの検索と置換」で確認する方法より、こちらのほうが確実です。書き出したあとの実物を見ているからです。
アウトライン化すると失うもの。
ただし、なんでもアウトライン化すればいいわけでもありません。
アウトライン化すると、以下のデメリットがあります。
- 文字として選択・コピーができなくなる。
- 検索エンジンが文字として読み取れなくなる。
- スクリーンリーダーが読み上げられなくなる。
- 文字数が多いと、pathが増えてファイルサイズが大きくなる。
ロゴや装飾的な見出しであれば、アウトライン化して問題ありません。
ただ、本文のような「読ませる文章」をSVGにするのは避けてください。
その場合は、HTMLのテキストとして書いて、CSSでWebフォントを当てるほうが適切です。
アウトライン化したSVGを使う場合も、imgタグのalt属性や、SVG内の<title>要素で文字情報を補っておきましょう。
<img src="logo.svg" alt="サービス紹介">まとめ
フォントはデザインを形成する大切なものです。
少し手間のかかる作業ではありますが、大切な作業なので忘れずに行いましょう。
アウトライン化は、デザイナーの方がデータを納品するときもそうですが、コーダーがデザインカンプから画像（SVG）データを書き出す時にも必要な作業です。
アウトライン化されていないSVGをWEBへアップロードしてしまうと、サイトを開く環境によって、意図したフォントが表示されなくなってしまいます。
「なぜ、サイトを開く環境で文字が変更されてしまうのか」具体的に知りたい方は、アウトラインしていないSVGのデータをコードエディタなどで開いてみてください。
すると以下のように、フォント情報の記述が見つかるはずです。
そうすると、以下の画像のようにフォント情報の記述が見つかると思います。
このフォント情報にあったフォントが端末に入っていいれは、適用されて、思った通りの表示になります。
が、フォント情報を端末が持っていなかった場合は、代替えのフォントが適用されます。
そのため、フォントが変わってしまい、SVG画像の印象も変わってしまう。というわけです。
SVGを書き出して使用する際は、必ずアウトライン化して、フォント情報をなくしてから、書き出すようにしましょう。
なお、書き出したSVGの色を、あとからCSSで変えたくなることがあります。
SVGを読み込んで色を選ぶだけで、そのままコピーできるコードを出すSVGの色を変えるCSSコード生成ツールを用意しました。よければ使ってみてください。