Illustratorのデザインカンプでコーディングするとき知っておくと楽なこと

Illustratorのデザインカンプを受け取って「画像が書き出せないよ！」「Linksフォルダは何のため？」と疑問が山積みになっていませんか？

XDやFigmaに慣れた方なら、初めて受け取ったIllustratorの独特な仕様に｢うっ｣ってなるかもしれませんね。

この記事を読めば、Illustratorのデザインカンプから必要なデータを余分な時間をとられずに取得できるようになります。

例えばアウトラインファイルの使い分け方、フォントライセンスの確認ポイント、画像の書き出し手順、よくハマるポイントとその対処法を実践的な手順で解説しています。

これらの情報は、現役のコーダーである私が実際に直面した問題と解決策をもとにまとめたものです。

みなさんが同じ悩みで時間を無駄にしないよう、詰まりやすいポイントを重点的に解説しているので、ぜひ最後までお付き合いください。ひとつでもお役に立てれば幸いです。

Photoshopのデザインカンプも解説していますので参考にしてください。

Illustratorのデザインカンプでわからなかったところ

ここから実際に私がわからなかった部分を書き出しております。

aiファイル名の前にolってあるのとないの違いは何？

olとはアウトラインのことで、アウトライン化したファイルは文字や線を「図形」に変換されているイメージです。

なぜアウトライン化するの？

一番の理由は、データを渡す相手のパソコンにデザインカンプに使用したフォントが入っていなくても、文字が正しく表示されるようにするためです。

ファイル開くとフォントないとか色々表示されるけど何？

通常ファイル（アウトライン化してないファイル）を開くと下の画像表示がでます。ここでは一旦閉じるボタンをクリックしてください。

一番右の｢フォントを追加｣をクリックしてPCにインストールする方法もあります。Noto Sans JP はインストールしておいてもいいかもしれませんね。

すると上の画像に遷移するので完了ボタンをクリックで閉じれば大丈夫です。

小塚フォントって何？

Adobe専用フォントです。イラレのデザインカンプではよく見かけますね。

使われているフォントが聞き慣れない場合はこのあと対応方法を書いてあるので参考になさってください。

Linksフォルダに画像が入っているけどこれを使うの？

いいえ。Linksフォルダにある画像は移動やリネームをしないでください。aiファイルがLinksフォルダの画像を参照しています。

Illustratorでデザインカンプを受け取ったら確認すること

アウトラインファイルはあるか？

通常のaiファイルはフォントが置き換わっているため本来のデザインではありません。それに対してアウトライン化された.alファイル(ol.ai)は本来のデザインを確認する場合に使用します。

使用するフォントを確認

通常のaiファイルでデザインカンプに使われているフォント名を確認します。

このときにGoogleフォントなどで確認できるフォントであれば問題ないですが、Adobe専用フォントやその他有料フォントの場合は確認が必要です。

Webフォントを顧客のwebサイトに使用することはできますか？

いいえ。 利用条件ではこれは許可されていません。フォントライセンスやwebフォントホスティングが中断されないようにするには、顧客のwebサイトは、独自のCreative CloudサブスクリプションからAdobe Fontsを読み込む必要があります。

Adobe公式サイト / フォントのライセンス

例えばAdobeフォントの場合は、サイトの所有者になる方がAdobeのライセンスを持っている、もしくはフォントを購入しているのかどうか確認したほうがいいでしょう。

先ほど｢Illustratorのデザインカンプでわからなかったところ｣でご自身のPC環境にないフォントについて少し触れましたが、

Illustratorの画面上部メニューの書式 → 環境にないフォントを解決する をクリックすると

上記画像が表示されます。この画面では環境にないフォントが一覧表示されるので、デザインカンプのフォントが使えない場合を想定し、依頼主に相談をする前に代替案として似たフォントがないか確認しておきましょう。

例えばサイト全体で数か所しか使ってないインパクトのあるフォントなどであればpngファイルやjpgファイルなどに変換することはライセンス上可能なので方法の一つとして相談してもいいでしょう。

フォントを使用して作成したアートワークを使用するために、顧客は独自のフォントライセンスを取得する必要がありますか？

いいえ。フォントデータがラスタライズされて JPEG や PNG フォーマットになっていたり、あるいは PDF ファイルに正しく埋め込まれている場合には、顧客はライセンスを取得する必要がありません。

Adobe公式 / フォントのライセンス

デザインカンプにスマホ用やタブレット用がある場合

デザインカンプのサイズを確認しましょう。

たとえばスマホ用のデザインカンプ幅が750pxの場合は、375pxで想定してすべての数字を1/2で書き出すなどです。これはPhotoshopのデザインカンプでも同じですね。

制作会社によっては

というところもあるので、説明されてない場合はコーディング前に確認してやり直しなどの余計な手間がかからないようにしましょう。

Illustratorのデザインカンプから必要なデータを取得する方法

最初に確認すること

Illustratorの単位がピクセル（px）になっているか必ず確認しましょう。

上記画像のIllustrator→設定→単位を選択

黄枠の部分をピクセルにします。

この設定を知らずに作成した画面とデザインカンプに違和感はあるが原因がわからず困ったことがありました。

次にカラーモードがRGBになっていないと画面で確認した色が変わってしまうのでCMYKではなくRGBになっていることを確認しておきましょう。

Illustrator上部メニューのファイル→ドキュメントのカラーモード→RGBカラー を選択します。

画像書き出し

Illustratorでの画像書き出しは手間がかかります（笑）同じAdobe製品でもXDのようにショートカットが使えません。

画像を書き出す主な手順は以下の通りです。

画面左側ツールボックスよりダイレクト選択ツールを選択。

書き出す画像を右クリックして表示されたメニューから→書き出し用に追加→単一のアセットとしてを選択。

すると下の画像のように単一アセット書き出しパネルが表示されます。

アセット書き出しパネルの画像で黄枠で囲んだ部分をもとに説明します。

アセット1が選択した画像です。アセット1の部分がファイル名になるのでクリックして名前を変更しても大丈夫です。

画面右のゴミ箱アイコンは不要なファイルを選択した後削除する場合に使用。

画面中央の横長の黄枠部分は画像形式について設定できます。2倍書き出しの場合は2xでOK、違う場合は再度選択。 画像の書き出しファイル種類を選択。

最後に設定が終われば書き出しボタンをクリック。

書き出しボタンがグレーアウトしている場合はアセット1が青枠で囲まれて選択されていることを確認してください。

画像書き出しでハマるポイント

• ロックがかかっていて書き出しできない。
• ロックがかかってないのに選択できない。
• pngファイルで書き出したのに背景が透明ではない。

それでは順番に確認していきましょう。

ロックがかかっていて書き出しできない場合。

なんどもやっているが選択できない。カーソルアイコンがいつもと違う場合などは、下の画像のように鍵のマークがついてないか確認してみましょう。

ロックがかかってないのに選択できない場合

レイヤーで鍵のマークを確認したけどついてない！という場合、他のコンテンツとグループ化されている可能性があります。

デザインカンプによってはダイレクトセンタクツールを使っても画像を選択できない場合があります。

そのときは選択ツール

を選んでください。その後、右クリックして

｢グループ化を解除｣を選択してもう一度画像を右クリックしてください。

うまくいかない場合はこれを繰り返すか、｢すべてグループ解除｣を選択するなど試してみてください。

画像の背景が透明化されてない場合はpngファイルで書き出ししても背景色がついてしまいます。この場合はご自身で加工するかデザイナーさんに再作成をお願いする必要があります。

ピクセルパーフェクト用のページ全体画像の書き出し

画像の書き出しについて最後に、コーディング後ピクセルパーフェクトを行うためにページ全体の画像の書き出しについても説明しておきます。

すでにいただいている場合は不要ですが、作成する場合は

下記画像のようにIllustrator上部メニュー→ファイル→書き出し→スクリーン用に書き出し を選択。

選択すると下記画像メニューが開きます。

ここでは書き出し先フォルダの指定、書き出しファイルのサイズを指定します。

SP用デザインカンプの画面幅が750pxで書き出して、ピクセルパーフェクトにて表示サイズを50%にすることで375pxで確認できます。

文字まわりの数値を取得

Illustratorから文字に関する数値を取得する手順は以下の通りです。

通常のaiファイルを開く。

画面左のツールボックスから文字ツールを選択。その後取得したいテキストをクリック。テキスト選択してから貼り付け。

黄枠で囲んでいるところから各種テキストまわり情報を取得します。

上記画像の数字を参考に見ていくと

font-family（Zen Kaku Gothic New）、font-weight（Bold）、font-size（30px）、line-height（34px (34/30)）、letter-spacing(60（1000/60で0.06em）)とそれぞれなっています。

文字色colorは画像の上部にある｢塗り｣とかかれた色付きの部分をクリックすると下記画像の画面が開きます。

そこで画面上部の黄枠をクリックすると画面下に色コードが表示されます。

フォント情報が表示されない場合はプロパティウィンドウが表示されてない可能性があります。画面上部Illustratorメニューバーからウィンドウ→プロパティにチェックが入っているか確認してください。

もし色コードが入っておらず、値が不明な場合は、

画面左ツールボックスからスポイトアイコンを選択後調べたい色の上でクリック。

するとスポイトツールの下の黄枠部分に選択した色が反映されます。そこをクリックすると色のデータが確認できます。

余白の数値を取得

Illustratorで余白を取得するのは、ひと手間かかります。（笑）XDのように⌥キーやAltキーを押して対象までの距離をみる機能がありません。主な方法としては以下のものがあります。

• 長方形ツールを使う
• ものさしを使う

それでは順番に確認しましょう。

長方形ツール

画面左側ツールボックスに表示されている長方形ツールを選択。

距離を測りたい部分に長方形を作成。 作成した長方形の幅（W）や高さ（H）がプロパティパネルに表示されるので確認。

長方形ツールを使う際の注意点

• 長方形ツールで作成したコンテンツは削除してください。
• 値は細かく図ると時間がかかるのでこの時点ではざっくりとした数字を取得、最後にピクセルパーフェクトで調整する際にまとめて作業したほうが効率的です。

ものさしツール

このツールは設定によって標準ではツールボックスに表示されてないのでIllustrator画面上部メニューバーのウィンドウ→ツールバー→詳細をクリックしてツールボックスを全表示にすると選択できます。

個人的には幅と高さが同時に取得できる長方形ツールが使いやすいかなと思いますが、一度は両方お試しください。

番外編　IllustratorのファイルをAdobeXDで読み込むと、XDの取得方法で画像や余白などの情報を得られます。ただ読み込んだファイルがすべて正しく表示できているかどうかはデザインカンプ次第です。実際にファイルを開いてご自身で確認してください。

まとめ

今回は初めてデザインカンプをIllustratorで受け取った方に向けて書きました。

普段FigmaやXDになれていると、その扱いの違いに困惑するとともに時間も注ぎ込んでしまうことになると思います。

この記事の内容を振り返りながら作業をすすめていただいて、あなたのお役に立てることを祈っております。

Illustratorも含めたAdobe製品をまとめて使えるAdobeCCを新しく購入を検討している方、継続をどうしようか迷っている方はここ数年購入し続けている私がおもうことを書いていますので参考にしてください。