アウトライン化って何?イラストレーターでWEBデザイン。フォントのアウトライン化について知っておこう。


こんにちは、今回はホームページを作る際に使うデザインのデータについて、アウトライン化というものについて解説します。
WEBデザインをする方は、一般的にPhotoshopでデザインを作ることが多いと思いますが、中にはIllustratorのデータでデザインをいただくこともあります。
特にDTP出身の方はillustratorが使い慣れているため、.aiデータで来ることが多いですね。
今回はコーディングにPhotoshopデータだけをこれまで扱ってきた人が、急にillustratorの.aiデータでデザインが来た時に戸惑うかもしれないポイントです。
コーディングのためにillustratorのデータをいただく場合、アウトライン化されたデータが送られてきます。
このアウトライン化という言葉を読んで、わかる方は今回の記事は読まなくていいでしょう。
アウトライン化って何?という方はぜひ、この記事を読んでください
かけ出しのフリーランスのコーダーの方など、これからという方はぜひ知っておくといいでしょう。

今回言いたいことはこれ!
テキストのアウトライン化というのは、「文字×フォント情報」を「線データ」に変換したもの。
どのような環境でも同じ見た目が再現できるので、画像の書き出しはこちらを使います。

.aiファイルでもらったデザインデータをillustratorで開くと、次のようなエラーメッセージが表示されることがあります。
sample
これは、開いたファイルで使用されているフォントが自分の環境ではありませんよという事です。
デザインでは様々なフォントが使用されますが、ファイルを開く際にそのフォントを再現しようとしたけれど、フォントがないのでどうやって再現したらいいのかわからない、そんな状態です。

このように、デザイナーからもらった.aiファイルを開こうと思ったら、フォントの部分がうまく表現されなくてデザイン部分のデザインが崩れるということが起こります。
デザイナーとコーダーの双方が、今回紹介するアウトライン化というものをお互いに知っていればいいのですが、どちらかがそれを知らなければ話がかみ合わなかったりします。
コーダーとして、デザイナーとしてお互いにこのあたりを理解して、スムーズに仕事を進行させましょう。

今回、この記事を書いたのは、私が実際にコーダーさんに外注したときに話が通じなくてなかなか大変だったからなんです。
知っていればなんてことないのですが、知らなければ話がかみ合わないなんてこともあります。
今回、外注の方に通常のファイルとアウトライン化したファイルの2つを渡したのですが、なぜ2つのファイルがあるのかわからない、アウトライン化されていないファイルを開いてファイルが壊れているという連絡が何度も来るのです。
何度説明しても、フォントファイルがないので送ってくれという返信、何度もメールをやり取りしてアウトライン化について説明しました。
なんてことがあったので、ここで書いておけばここ教えてたらいいよねっていう、楽するためでもあるんですが、知らない人も多いテーマだと思ったので書いてみました。

フォントの仕組みについて知っておこう

デザインデータにおけるフォントというのは、そのフォントで表現した見え方をデータとして持っているのではなくて、テキストの文字とそれをどのフォントで表現するかということだけを持っています
つまり、実際の形はデータの中には入っていなくて、ファイルを開いたときにパソコン側で再現してるんですね。
これは文字の編集のために文字のデータを持っていないといけない、そして、文字列はそのままでフォントの形だけを簡単に変えられるように文字列に対してフォントの形をかけあわせて表現している。

文字情報 × フォントの形

というようにファイルとしてデータを保持しています。
ここで、問題になってくるのは、そのフォントの形データです。
文字列の情報(あいうえお・・・みたいな)はどのパソコンでも問題ないでしょう。
ただ、フォントの形についてはそのフォントをパソコンの中に持っていないと再現できません

何気なくWordなどで使っているフォントというのは、Microsoftがあらかじめ入れてくれているフォントなんです。
世の中にはまだまだフォントの種類はありますが、すべてのフォントがパソコンに入っているわけではありません。
また、フォントは日々新しいものも生まれているしね。
フォントのすべてがパソコンに入っているわけではないので、フォントの形についてはどこでも同じように表示されるとは限らないんです。

なので、

文字情報 × フォントの形

というのはどの環境でも見れるわけではない?
そうです、なので違う環境でデータを開くと先ほどのようなエラーが出るんですね。
sample
このエラーを出さないためには、そのデザインで使用されているフォントが開こうとしているパソコンにも入っていないといけない
それが解決方法なんですが、フォントのデータは膨大にあるし、全てが無料というわけではない。
有料のフォントは結構高いものもあるので、デザインをもらうたびにフォントを買うのも現実的ではない。
なので、フォント情報が無くてもデザインを再現できないかって考えるわけです。

環境に依存しないデザインデータの作り方

環境に依存しないテキストのデザインはできないのか?
それに対する方法がテキストのアウトライン化というものなんです。

文字情報 × フォントの形

この形のデータの特徴は、編集が可能ということなんです。
文字列を変えることはできるし、フォントの形も変えることができる。
デザイナーにとっては編集できるデータというのが不可欠です。

でも、コーダーにとってはその見た目をWEBに再現するだけなのでデザインの編集は不要です。
なので、

文字情報 × フォントの形

このデータにこだわらなくてもよくて、
「その形」
の情報があればいい
んです。

文字情報 × フォントの形
   ↓
形としての情報

という作業がアウトライン化です。
sample
アウトライン化すると、このように文字の形を線とポイントで表現できます。
ここには文字のデータやフォントのデータは無くて、あくまで線で表現した形としてのデータなんです。
この形に対するデータはどこで再現しても同じように表現できますよね。

アウトライン化の方法はカンタン。
テキストを選択して右クリックからアウトライン化を選択。
sample
テキストの選択は、メニューからテキストオブジェクトを選択する方法もあります。
sample

オリジナルのデータとアウトライン化したデータの違い

アウトライン化したデータがあれば、どの環境でも同じようにデザインを再現できます。
では、オリジナル(アウトライン化する前)のデータは必要ないんでしょうか。
実はコーディングには元のデータも必要です。
元のデータには、文字情報が入っているので、デザインデータではなくテキストとして抜き出したい場合には元のデータを使います。
sample
このように、テキストを文字列としてコピーできます。
WEBフォントを使って表現する箇所などはテキストの情報が必要になるので使いますよね。
ワイヤーなど、デザインと別にテキスト情報を持っている場合もありますが、
デザインを最終形式のデータとして扱う場合は、デザインデータからテキストをとることも多いと思います。
その場合には、アウトライン化したものだと文字のデータは無いので、テキストをコピーできません
元のオリジナルのデータももらうようにしましょう。

オリジナルのデザインデータはテキストを抽出するために、
アウトライン化されたデータは画像として書き出すために使用します。

アウトライン化の重要性はわかりましたか。
起業して、自分でイチから全部やる場合はこのようなことは少ないかもしれませんが、外部の会社と協力して作る場合など、データのやり取りが発生してくるとこのようなことも知っておく必要があります。
今回WEBのコーディングの話を中心にアウトライン化について説明しましたが、
そもそも印刷で形をそのまま出力するためにはフォント情報ではなく形の情報にしないと印刷機で再現できません。
WEBに限らず、デザインのデータをどこかへアウトプットする際には必ず必要になるものなんです。
もしかすると、名刺を作るときに.aiファイルで納品した方は、その注意書きにフォントはすべてアウトライン化してくださいという注意書きを読んだかもしれません。
なにもわからずに説明を読みながらアウトライン化をしたかもしれませんが、じつはこういう理由があったんですね。

非常に基本的なところではあるけれど、まだまだかけ出しの方の中には知らない人もいるかもしれない。
やったことがなければ、なかなか知る機会のない内容だと思います。
ぜひ覚えておいてください。