【完全版】Illustratorデザインカンプからのコーディング方法（無料デザインカンプ付き）

Web制作で使用されているデザインツールといえば、Photoshop、Illustrator、XD、Figmaなどが挙げられます。

コーダー目線ではXDやFigmaが使いやすく人気がありますが、デザイナー目線だと必ずしもそうではありません。
Webデザイン作成にIllustrator（イラストレーター）を使用している制作会社は多いので、コーダーとして受注できる仕事の幅を狭めないためにも、Illustratorの使い方は知っておくべきです。

Illustratorは非常にたくさんの機能があって扱いにくい部分もありますが、コーディングのために覚えるべきことは少なく、使い方もそこまで難しくありません。

この記事では、Illustratorデザインカンプ（.aiファイル）からコーディングを行う方法を、初心者の方にもわかりやすく１から解説しているので、是非ご覧ください。
無料のデザインカンプを配布しているので、実際に手を動かしながら学ぶことも可能です。

Illustratorを使うには？

IllustratorはAdobe CC（Adobe Creative Cloud）の有料ソフトであり、使用するには月額料金が必要です。
７日間の無料体験版を使用することもできるので、お試しで使いたい方は「無料で始める」をクリックしましょう。

左の単体プランでも購入できますが、PhotoshopやXDなども合わせて使用したい場合は、右のコンプリートプランを選択するのも良いでしょう。

７日間の無料期間が終わると自動的に継続課金に移行します。
継続利用するつもりがなければ、無料期間内に忘れずに解約しておきましょう。

Web制作で本格的に仕事を受注したい方は、Illustratorを含む主要なデザインツールを全て揃えるためにも、Adobe CCコンプリートプランを購入することを強く推奨します。

Adobe CCコンプリートプランは公式サイトから購入すると高額ですが、以下の記事で4万円以上安く購入できる方法を解説しているので、是非ご覧ください。

あわせて読みたい

Adobe CCコンプリートプランを安く購入する方法【Web制作に必須】

無料のデザインカンプ配布

Illustratorのデザインカンプをお持ちでない方のために、無料のデザインカンプ（AIファイル）を配布しております。ご自由にダウンロードしてお使いください。
以下は配布しているデザインのイメージになります。

↓ デザインカンプ（AIファイル）のダウンロードはこちらからどうぞ

コーディング前の準備

単位をピクセル（px）に変更

IllustratorはWebデザイン以外の用途でも使用されるので、単位がピクセル（px）でない場合があります。
コーディングを始める前に単位を確認し、ピクセル以外が使われている場合は変更しましょう。

まず、上部メニューバーから「Illustrator」→「設定（環境設定）」→「単位」を選択します。

環境設定ウィンドウが表示されるので、単位を全て「ピクセル」に変更します。

Illustratorではファイルごとに使用する単位を設定できるため、環境設定でピクセル単位に設定していても、ファイルの設定でピクセル以外が適用されている場合があります。
ファイルに適用されている単位を確認するには、上部メニューバーから「ファイル」→「ドキュメント設定」を選択します。

ドキュメント設定ウィンドウが表示されたら、

• 単位を「ピクセル」
• 裁ち落としを全て「0px」

に設定します。

裁ち落としとは、印刷した用紙を断裁する際に生じるズレを想定して、デザイン上のサイズよりも外側に余白を持たせてデザインを拡張することを指します。
Webデザインでは必要のない設定なので、全て0pxにして問題ありません。

画像のカラーモードを確認

Webサイトの画像に使用されるカラーモードはRGB形式が一般的ですが、一方、紙の印刷物などではCMYK形式が広く使用されています。

デザインファイルによっては、Webデザインには適さないCMYK形式の状態でデザインが作成されている場合があるかもしれません。
CMYK形式で書き出した画像をWebサイトで表示すると、色がくすんだり等、デザイン上の表示と見た目と変わってしまうため、カラーモードをRGB形式に変換しておく必要があります。

上部メニューバーから、「ファイル」→「ドキュメントのカラーモード」と選択し、「CMYKカラー」が設定されている場合は、「RGBカラー」にチェックを入れることで、RGB形式に変換されます。

もしもデザインがCMYK形式で作成されている場合は、デザイン作成者に確認をとりましょう。
RGB形式に変換した際、色の表現が意図した通りに変換されず、調整が必要になる場合があります。

カラーの表示形式をRGBに変更

要素の色情報を読み取る際の表示形式が、デフォルトでCMYKになっている場合があるので、こちらもRGB形式に変更しておきます。

上部メニューバーから「ウィンドウ」→「カラー」を選択してください。

以下のようなウィンドウが出てくるので、右上のメニューボタンをクリックし、「RGB」を選択しましょう。

画像のリンク切れがないか確認

Illustratorで画像を扱う方法は2種類あります。

リンク形式では、デザイン（AIファイル）とは別に画像を保存するため、デザインファイル自体の容量が抑えられるメリットがありますが、別フォルダで管理しているリンク先の画像も、デザイン作成者から別途共有していただく必要があります。

画像がリンク形式で管理されていて、その画像の保存先が見つからない場合、デザインファイルを開いた際に以下のような警告が表示されます。

このような場合は、デザインファイルとは別に管理している画像フォルダも共有していただくか、画像をデザインカンプに埋め込んでいただくよう、デザイン作成者に依頼が必要です。

使用されているフォントを確認

Illustratorデザイン内のテキストは、PCに搭載されているフォントを使用して表現されます。
この時、ご自身のPC環境に無いフォントが使用されていると、代替フォントに置き換わってしまい、正確な見た目になりません。

もし環境にないフォントが使用されている場合は、該当のフォントをPCにインストールしましょう。

環境にないフォントは、上部メニューバーから「書式」→「環境にないフォントを解決する」を選択することで確認できます。（使用フォントが自身の環境に全てある場合はクリックできなくなっています）

環境にないフォントが以下のように一覧表示されるので、ここに表示されているフォントをご自身のPCにインストールしましょう。（場合によっては有料フォントを使用していることもあるので、その際はクライアントからフォントデータをいただけるか確認してください）

Google Fontsからインストールする例

Google Fontsにアクセスし、必要なフォント名を検索して、該当のフォントをクリックします。

フォント詳細ページに移動したら、右上の「Get font」ボタンをクリックしてください。

画面が遷移し、これまでに選択したフォントが一覧表示されます。
選択状態のフォントは、画面右上の （鞄）マークをクリックすることで、いつでも確認できます。

他にも必要なフォントがある場合は、同様の手順でフォントを選択状態にしてください。

「Download all」ボタンをクリックで選択状態のフォントを一括ダウンロード、各フォントの右側の  アイコンをクリックで個別にダウンロードが可能です。

ダウンロードしたフォルダを開き、「.ttf」形式のファイルをダブルクリックします。

以下のようなウィンドウが表示されるので、「インストール」をクリックします。

これで、フォントが自身のPCにインストールされました。
Illustratorに戻り、環境にないフォントの表示がなくなっているか確認しましょう。
（Google Fontsからダウンロードしてきたファイル類は削除して大丈夫です）

※ 上記の手順はあくまで、自身のPC（ローカルな環境）でフォントを使用するためのものなので、公開するWebサイト側には別途フォント読み込みのための対応（scriptタグ埋め込みなど）が必要です。

要素の選択方法

画像の書き出しや、要素の情報を読み取るためには、まず対象の要素を選択する必要があります。

Illustratorで要素を選択するために主に使用されるのが、①選択ツール、②ダイレクト選択ツールの２つです。
両者には以下のような特徴の違いがあります。

基本的にはダイレクト選択ツールを使用し、グループ全体を選択したい場合に選択ツールを使用するという使い方をすると良いでしょう。

① 選択ツールの使い方

選択ツールを使うには、左ツールバーの中の黒矢印アイコンをクリックします。

選択ツールを選んだ状態で、対象の要素をクリックして選択します。

どの要素が選択されているか確認するため、画面右側の「レイヤー」タブをクリックします。

選択状態の要素は、レイヤータブ内にて、以下画像のように右側に◎の表示がされます。
選択ツールで要素をクリックした場合、その要素を含むグループが選択されることがわかります。

② ダイレクト選択ツールの使い方

ダイレクト選択ツールを使うには、左ツールバーの中の白矢印アイコンをクリックします。

ダイレクト選択ツールを選んだ状態で、対象の要素をクリックして選択します。

どの要素が選択されているか確認するため、画面右側の「レイヤー」タブをクリックします。

選択状態の要素は、レイヤータブ内にて、以下画像のように右側に◎の表示がされます。
ダイレクト選択ツールの場合、グループに属するパーツを個別に直接選択できることがわかります。

レイヤーからも要素を選択できる

上記２つのツールを使う以外にも、レイヤーから要素を選択することも可能です。

まずは、画面右側の「レイヤー」タブをクリックし、

選択したい要素の右側の⚪︎をクリックすることで、その要素を選択状態にできます。

⬇︎

この状態でプロパティタブに切り替えることで、選択状態の要素の情報を読み取ることができます。

クリックしても選択できない場合

上記手順にて要素を選択できない場合は、要素がロックされている可能性があります。

画面右側の「レイヤー」タブをクリックし、対象の要素を探しましょう。
下画像のように、要素の左側に🔒アイコンが表示されている場合は要素がロックされています。

🔒アイコンをクリックすることでロックが解除されます。
これで、通常通りプロパティの取得や画像の書き出しが可能になります。

画像の書き出し

画像の書き出し手順

Illustratorからの画像の書き出しは、以下の手順で行います。

① 「アセットの書き出し」ウィンドウの表示

画像の書き出しを行う下準備として、まずは「アセットの書き出し」ウィンドウを表示させます。

上部メニューバーから「ウィンドウ」→「アセットの書き出し」を選択してください。

以下のようなウィンドウが出てくればOKです。

② 画像を書き出し対象に追加

要素の選択方法で解説した方法により、書き出したい対象を選択状態にしてください。
画像を選択した状態で、右クリック→「書き出し用に追加」→「単一のアセットとして」を選択します。

すると、「アセットの書き出し」ウィンドウ内に、先程の画像が書き出し対象として追加されます。

上記手順以外にも、選択ツールまたはダイレクト選択ツールで、画像を「アセットの書き出しウィンドウ」にドラッグ＆ドロップすることでも、書き出し対象に追加することができます。

③ 書き出し対象の画像をエクスポート

書き出し対象に追加された画像を実際に書き出す手順です。

画像の下に表示されているテキストが、書き出した後のファイル名になります。
ファイル名はクリックすることで、変更することも可能です。

続いて、画像の倍率、サフィックス、ファイル形式を選択します。

倍率は原則「2x」を選択し、2倍サイズで書き出すようにします（理由はこちらの記事で解説）。

サフィックスはファイル名の末尾に付ける文字のことです。
画像の倍率がわかるように、2倍サイズの画像に「@2x」のサフィックスを付けるなどの使い方をしたりします。
サフィックスは記入しなくても特に問題はありません。

ファイル形式は以下のように、画像の特徴に応じて適切なものを選択するようにしましょう（画像フォーマットに関する詳しい解説はこちらの記事をご覧ください）

最後に、書き出したい画像をクリックして選択状態（青枠で囲われた状態）にします。
複数の画像がある場合は、command ⌘キーを押しながらクリックすることで、複数選択することもできます。

画像が選択された状態で「書き出し」ボタンをクリックし、保存先のフォルダを選択すれば、画像がエクスポートされます。

画像書き出しの際の注意点

画像を書き出す際は、以下の２点に注意してください。

注意① 画像の装飾は含めずに書き出す

画像に付いている角丸やドロップシャドウなどの装飾は書き出す画像には含めず、CSSで実装しましょう。
理由は以下の通りです。

・角丸つきで書き出したJPG画像の例

・ドロップシャドウつきで書き出したPNG画像の例

注意② テキストをSVGにする場合、事前にアウトライン化する

SVGとして書き出したテキストに使用されているフォントが閲覧ユーザーのデバイスに存在しない場合、違うフォントが適用されてSVG画像の見え方が変わってしまいます。
そのため、テキストを文字情報から図形に変換する「アウトライン化」をする必要があります。

SVG化したいテキストを選択し、右クリック→「アウトラインを作成」を選択します。

以上でテキストがアウトライン化され、デバイスのフォントに依存しない（常に同じ見た目の）SVG画像を出力することが出来るようになります。

要素情報の取得

幅や高さ、背景色など、その要素自身の情報を読み取る方法です。

要素の選択方法で解説した方法により、要素を選択状態にすると、対象の要素に関する各情報が画面右側の「プロパティ」欄に表示されます。

主に以下の要素情報を読み取ることができます。

幅と高さ（width, height）

要素の幅（width）と高さ（height）の値はそれぞれ、W, Hと記載された箇所から取得できます。

width: 230px;
height: 56px;

回転（transform: rotate）

下画像の赤枠部分が0°でない場合は、要素の回転角度が指定されています。

Illustratorでは反時計回りを正、CSSでは時計回りを正とする点に注意しましょう。

transform: rotate(-90deg);

不透明度（opacity）

アピアランスエリア内の不透明度の値が100%でない場合は、要素の不透明度が指定されています。

opacity: 0.45;

背景色（background-color）

コーディング前の準備で解説した通り、事前にカラーモードをRGB形式へ変更しておいてください。
（設定方法はこちら）

要素の色を取得するには、アピアランスエリア内の「塗り」と記載された欄のボックスをクリックします。

下のようなウィンドウが表示されたら、パレットのアイコンをクリックすると、右下にカラーコードが表示されます。「#」をクリックすることで、カラーコードをコピーすることもできます。

background-color: #E8974B;

以下のように、「不透明度」の値が100%でない場合は色が透過されているので、CSSにはRGBA形式で記載します。

background-color: rgba(232, 151, 75, 0.45);

ボーダー（border）

アピアランスエリアの「線」と記載された欄から、ボーダー色（border-color）とボーダー幅（border-width）を取得できます。（ボーダーのカラーコード取得方法は、背景色の取得方法と同様です）

border: 1px solid #2F8ECE;

角丸（border-radius）

border-radiusの値を読み取るには、まず、「変形」エリア内の「•••」マークをクリックします。

下画像の赤枠部分が0でない場合、角の丸み（border-radius）が指定されています。

border-radius: 20px;

影（box-shadow, filter: drop-shadow）

シャドウがついている要素には、アピアランスエリア内に「ドロップシャドウ」という表示が出ています。
「ドロップシャドウ」の文字をクリックしてください。

「ドロップシャドウ」ウィンドウが表示されるので、下画像の赤枠部分から必要な情報を読み取り、CSSに記入しましょう。

box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4);
  /* or */
filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.4));

（通常はbox-shadowを、PNG画像など透過性のある要素に影をつける場合はfilter: drop-shadowを指定します）

要素間の距離（余白）の取得

Illustratorで距離（余白）を測りたい場合、「ものさしツール」を使用します。
「ものさしツール」は下のようなアイコンで表示されています。

ものさしツールが見つからない場合は、ツールバーをカスタマイズして「ものさしツール」を表示させましょう。
ツールバー下部の「•••」マークをクリックします。

ツールの一覧が表示されるので、「ものさしツール」のアイコンを、ツールバーの好きな位置までドラッグ＆ドロップさせましょう。これで、ツールバーからいつでも「ものさしツール」が使えるようになります。

「ものさしツール」を選択したら、距離を計測したい要素間をドラッグして直線を引きましょう。
（Shiftキーを押しながらドラッグすることで、直線を引きやすくなります）

直線の長さが「情報」ウィンドウに表示されるので、水平線の場合はW、垂直線の場合はHの値を使用します。
（「情報」ウィンドウが見つからない場合、上部メニューバーから「ウィンドウ」→「情報」を選択してください）

文字情報の取得

テキスト要素を選択状態にすると、プロパティ内の文字というエリアに、テキストの文字情報が表示されます。

テキスト関連の以下のCSSプロパティに相当するデータを取得できます。

font-family

font-family: "Outfit", sans-serif;

font-size

font-size: 40px;

rem表記にする場合、対象テキストのfont-sizeを、ルートのhtml要素のfont-sizeで割った値になります。
（上の画像の場合、html要素のfont-sizeが16pxなら、40 / 16 = 2.5rem）

font-size: 2.5rem;

font-weight

font-weight: bold;
  /* or */
font-weight: 700;

text-align

text-align: left;

line-height

行送り（行の高さ）を指定するプロパティです。

px単位で表記されていますが、line-heightの値は倍率（行送りの値 / フォントサイズ）で指定することが推奨されます。上の画像の例の場合、line-heightは 32 / 16 = 2 となります。

line-height: 2;

letter-spacing

文字の間隔を指定するプロパティです。
「VA」の値を使いますが、この値をそのままCSSに記述するわけではありません。

letter-spacingに記述する値は、（VAの値 / 1000）という計算で求められます。（単位はem）
上の画像の場合、30 / 1000 = 0.03em となります。

letter-spacing: 0.03em;

color

コーディング前の準備で解説した通り、事前にカラーモードをRGB形式へ変更しておいてください。
（設定方法はこちら）

要素の色を取得するには、アピアランスエリア内の「塗り」と記載された欄のボックスをクリックします。

下のようなウィンドウが表示されたら、パレットのアイコンをクリックすると、右下にカラーコードが表示されます。「#」をクリックすることで、カラーコードをコピーすることもできます。

color: #2F8ECE;

まとめ

Illustratorのデザインカンプ（AIデータ）からコーディングを行う方法について解説しました。

IllustratorはWeb制作会社での使用率も高いデザインツールですので、使いこなせれば仕事の幅は大きく広がります。
是非この記事を参考に、使い方をマスターしていただけると嬉しいです。

現在Web制作を学習中でこれから実案件に臨むという方は、Illustrator・Photoshop・XDを使用するためにも、Adobe CCコンプリートプランを購入することが必須になります。
以下の記事で4万円以上安く購入する方法を解説しているので是非ご覧ください。（すでに契約済みの方でも安価なプランに乗り換え可能です）

あわせて読みたい

Adobe CCコンプリートプランを安く購入する方法【Web制作に必須】