3/07必須知識デザインツール2024年3月7日Web制作で使用されているデザインツールといえば、Photoshop、Illustrator、XD、Figmaなどが挙げられます。コーダー目線ではXDやFigmaが使いやすく人気がありますが、デザイナー目線だと必ずしもそうではありません。Webデザイン作成にIllustrator(イラストレーター)を使用している制作会社は多いので、コーダーとして受注できる仕事の幅を狭めないためにも、Illustratorの使い方は知っておくべきです。Illustratorは非常にたくさんの機能があって扱いにくい部分もありますが、コーディングのために覚えるべきことは少なく、使い方もそこまで難しくありません。この記事では、Illustratorデザインカンプ(.aiファイル)からコーディングを行う方法を、初心者の方にもわかりやすく1から解説しているので、是非ご覧ください。無料のデザインカンプを配布しているので、実際に手を動かしながら学ぶことも可能です。Cloud)の有料ソフトであり、使用するには月額料金が必要です。7日間の無料体験版を使用することもできるので、お試しで使いたい方は「無料で始める」をクリックしましょう。左の単体プランでも購入できますが、PhotoshopやXDなども合わせて使用したい場合は、右のコンプリートプランを選択するのも良いでしょう。Illustrator7日間の無料期間が終わると自動的に継続課金に移行します。継続利用するつもりがなければ、無料期間内に忘れずに解約しておきましょう。CCコンプリートプランを購入することを強く推奨します。CCコンプリートプランは公式サイトから購入すると高額ですが、以下の記事で4万円以上安く購入できる方法を解説しているので、是非ご覧ください。無料のデザインカンプ配布Illustratorのデザインカンプをお持ちでない方のために、無料のデザインカンプ(AIファイル)を配布しております。ご自由にダウンロードしてお使いください。以下は配布しているデザインのイメージになります。単位をピクセル(px)に変更IllustratorはWebデザイン以外の用途でも使用されるので、単位がピクセル(px)でない場合があります。コーディングを始める前に単位を確認し、ピクセル以外が使われている場合は変更しましょう。上部メニューバーから「Illustrator」→「設定(環境設定)」→「単位」を選択します。環境設定ウィンドウが表示されるので、単位を全て「ピクセル」に変更します。Illustratorではファイルごとに使用する単位を設定できるため、環境設定でピクセル単位に設定していても、ファイルの設定でピクセル以外が適用されている場合があります。ファイルに適用されている単位を確認するには、上部メニューバーから「ファイル」→「ドキュメント設定」を選択します。裁ち落としを全て「0px」に設定します。裁ち落としとは、印刷した用紙を断裁する際に生じるズレを想定して、デザイン上のサイズよりも外側に余白を持たせてデザインを拡張することを指します。Webデザインでは必要のない設定なので、全て0pxにして問題ありません。画像のカラーモードを確認Webサイトの画像に使用されるカラーモードはRGB形式が一般的ですが、一方、紙の印刷物などではCMYK形式が広く使用されています。デザインファイルによっては、Webデザインには適さないCMYK形式の状態でデザインが作成されている場合があるかもしれません。CMYK形式で書き出した画像をWebサイトで表示すると、色がくすんだり等、デザイン上の表示と見た目と変わってしまうため、カラーモードをRGB形式に変換しておく必要があります。上部メニューバーから、「ファイル」→「ドキュメントのカラーモード」と選択し、「CMYKカラー」が設定されている場合は、「RGBカラー」にチェックを入れることで、RGB形式に変換されます。デザインがCMYK形式で作成されている場合は、デザイン作成者に確認をとりましょう。RGB形式に変換した際、色の表現が意図した通りに変換されず、調整が必要になる場合があります。要素の色情報を読み取る際の表示形式が、デフォルトでCMYKになっている場合があるので、こちらもRGB形式に変更しておきます。上部メニューバーから「ウィンドウ」→「カラー」を選択してください。以下のようなウィンドウが出てくるので、右上のメニューボタンをクリックし、「RGB」を選択しましょう。画像のリンク切れがないか確認Illustratorで画像を扱う方法は2種類あります。埋め込み形式:画像をIllustratorファイル内に直接保存する方法リンク形式:画像はIllustratorファイルとは別に保存し、リンクを張る方法リンク形式では、デザイン(AIファイル)とは別に画像を保存するため、デザインファイル自体の容量が抑えられるメリットがありますが、別フォルダで管理しているリンク先の画像も、デザイン作成者から別途共有していただく必要があります。画像がリンク形式で管理されていて、その画像の保存先が見つからない場合、デザインファイルを開いた際に以下のような警告が表示されます。このような場合は、デザインファイルとは別に管理している画像フォルダも共有していただくか、画像をデザインカンプに埋め込んでいただくよう、デザイン作成者に依頼が必要です。使用されているフォントを確認Illustratorデザイン内のテキストは、PCに搭載されているフォントを使用して表現されます。この時、ご自身のPC環境に無いフォントが使用されていると、代替フォントに置き換わってしまい、正確な見た目になりません。環境にないフォントが使用されている場合は、該当のフォントをPCにインストールしましょう。環境にないフォントは、上部メニューバーから「書式」→「環境にないフォントを解決する」を選択することで確認できます。(使用フォントが自身の環境に全てある場合はクリックできなくなっています)環境にないフォントが以下のように一覧表示されるので、ここに表示されているフォントをご自身のPCにインストールしましょう。Fontsにアクセスし、必要なフォント名を検索して、該当のフォントをクリックします。font」ボタンをクリックしてください。画面が遷移し、これまでに選択したフォントが一覧表示されます。(鞄)マークをクリックすることで、いつでも確認できます。他にも必要なフォントがある場合は、同様の手順でフォントを選択状態にしてください。アイコンをクリックで個別にダウンロードが可能です。ダウンロードしたフォルダを開き、「.ttf」形式のファイルをダブルクリックします。以下のようなウィンドウが表示されるので、「インストール」をクリックします。これで、フォントが自身のPCにインストールされました。Illustratorに戻り、環境にないフォントの表示がなくなっているか確認しましょう。上記の手順はあくまで、自身のPC(ローカルな環境)でフォントを使用するためのものなので、公開するWebサイト側には別途フォント読み込みのための対応(scriptタグ埋め込みなど)が必要です。画像の書き出しや、要素の情報を読み取るためには、まず対象の要素を選択する必要があります。Illustratorで要素を選択するために主に使用されるのが、1選択ツール、2ダイレクト選択ツールの2つです。両者には以下のような特徴の違いがあります。選択ツール:対象の要素を含むグループ全体を選択できるダイレクト選択ツール:対象の要素だけを直接選択できる基本的にはダイレクト選択ツールを使用し、グループ全体を選択したい場合に選択ツールを使用するという使い方をすると良いでしょう。選択ツールを使うには、左ツールバーの中の黒矢印アイコンをクリックします。選択ツールを選んだ状態で、対象の要素をクリックして選択します。どの要素が選択されているか確認するため、画面右側の「レイヤー」タブをクリックします。選択状態の要素は、レイヤータブ内にて、以下画像のように右側に◎の表示がされます。選択ツールで要素をクリックした場合、その要素を含むグループが選択されることがわかります。ダイレクト選択ツールの使い方ダイレクト選択ツールを使うには、左ツールバーの中の白矢印アイコンをクリックします。ダイレクト選択ツールを選んだ状態で、対象の要素をクリックして選択します。どの要素が選択されているか確認するため、画面右側の「レイヤー」タブをクリックします。選択状態の要素は、レイヤータブ内にて、以下画像のように右側に◎の表示がされます。ダイレクト選択ツールの場合、グループに属するパーツを個別に直接選択できることがわかります。レイヤーからも要素を選択できる上記2つのツールを使う以外にも、レイヤーから要素を選択することも可能です。選択したい要素の右側の⚪︎をクリックすることで、その要素を選択状態にできます。⬇︎この状態でプロパティタブに切り替えることで、選択状態の要素の情報を読み取ることができます。上記手順にて要素を選択できない場合は、要素がロックされている可能性があります。画面右側の「レイヤー」タブをクリックし、対象の要素を探しましょう。下画像のように、要素の左側に🔒アイコンが表示されている場合は要素がロックされています。🔒アイコンをクリックすることでロックが解除されます。これで、通常通りプロパティの取得や画像の書き出しが可能になります。画像の書き出し画像の書き出し手順Illustratorからの画像の書き出しは、以下の手順で行います。画像の書き出しを行う下準備として、まずは「アセットの書き出し」ウィンドウを表示させます。上部メニューバーから「ウィンドウ」→「アセットの書き出し」を選択してください。以下のようなウィンドウが出てくればOKです。要素の選択方法で解説した方法により、書き出したい対象を選択状態にしてください。画像を選択した状態で、右クリック→「書き出し用に追加」→「単一のアセットとして」を選択します。すると、「アセットの書き出し」ウィンドウ内に、先程の画像が書き出し対象として追加されます。上記手順以外にも、選択ツールまたはダイレクト選択ツールで、画像を「アセットの書き出しウィンドウ」にドラッグ&ドロップすることでも、書き出し対象に追加することができます。書き出し対象の画像をエクスポート書き出し対象に追加された画像を実際に書き出す手順です。画像の下に表示されているテキストが、書き出した後のファイル名になります。ファイル名はクリックすることで、変更することも可能です。続いて、画像の倍率、サフィックス、ファイル形式を選択します。倍率は原則「2x」を選択し、2倍サイズで書き出すようにします(理由はこちらの記事で解説)。サフィックスはファイル名の末尾に付ける文字のことです。画像の倍率がわかるように、2倍サイズの画像に「@2x」のサフィックスを付けるなどの使い方をしたりします。サフィックスは記入しなくても特に問題はありません。最後に、書き出したい画像をクリックして選択状態(青枠で囲われた状態)にします。⌘キーを押しながらクリックすることで、複数選択することもできます。画像が選択された状態で「書き出し」ボタンをクリックし、保存先のフォルダを選択すれば、画像がエクスポートされます。画像を書き出す際は、以下の2点に注意してください。画像の装飾は含めずに書き出す画像に付いている角丸やドロップシャドウなどの装飾は書き出す画像には含めず、CSSで実装しましょう。理由は以下の通りです。テキストをSVGにする場合、事前にアウトライン化するSVGとして書き出したテキストに使用されているフォントが閲覧ユーザーのデバイスに存在しない場合、違うフォントが適用されてSVG画像の見え方が変わってしまいます。そのため、テキストを文字情報から図形に変換する「アウトライン化」をする必要があります。SVG化したいテキストを選択し、右クリック→「アウトラインを作成」を選択します。以上でテキストがアウトライン化され、デバイスのフォントに依存しない(常に同じ見た目の)SVG画像を出力することが出来るようになります。幅や高さ、背景色など、その要素自身の情報を読み取る方法です。要素の選択方法で解説した方法により、要素を選択状態にすると、対象の要素に関する各情報が画面右側の「プロパティ」欄に表示されます。以下の要素情報を読み取ることができます。Hと記載された箇所から取得できます。rotate)下画像の赤枠部分が0°でない場合は、要素の回転角度が指定されています。Illustratorでは反時計回りを正、CSSでは時計回りを正とする点に注意しましょう。rotate(-90deg);不透明度(opacity)アピアランスエリア内の不透明度の値が100%でない場合は、要素の不透明度が指定されています。0.45;背景色(background-color)コーディング前の準備で解説した通り、事前にカラーモードをRGB形式へ変更しておいてください。(設定方法はこちら)要素の色を取得するには、アピアランスエリア内の「塗り」と記載された欄のボックスをクリックします。下のようなウィンドウが表示されたら、パレットのアイコンをクリックすると、右下にカラーコードが表示されます。「#」をクリックすることで、カラーコードをコピーすることもできます。#E8974B;以下のように、「不透明度」の値が100%でない場合は色が透過されているので、CSSにはRGBA形式で記載します。0.45);ボーダー(border)アピアランスエリアの「線」と記載された欄から、ボーダー色(border-color)とボーダー幅(border-width)を取得できます。#2F8ECE;角丸(border-radius)border-radiusの値を読み取るには、まず、「変形」エリア内の「•••」マークをクリックします。下画像の赤枠部分が0でない場合、角の丸み(border-radius)が指定されています。drop-shadow)シャドウがついている要素には、アピアランスエリア内に「ドロップシャドウ」という表示が出ています。「ドロップシャドウ」の文字をクリックしてください。「ドロップシャドウ」ウィンドウが表示されるので、下画像の赤枠部分から必要な情報を読み取り、CSSに記入しましょう。drop-shadowを指定します)要素間の距離(余白)の取得Illustratorで距離(余白)を測りたい場合、「ものさしツール」を使用します。「ものさしツール」は下のようなアイコンで表示されています。ものさしツールが見つからない場合は、ツールバーをカスタマイズして「ものさしツール」を表示させましょう。ツールバー下部の「•••」マークをクリックします。ツールの一覧が表示されるので、「ものさしツール」のアイコンを、ツールバーの好きな位置までドラッグ&ドロップさせましょう。これで、ツールバーからいつでも「ものさしツール」が使えるようになります。「ものさしツール」を選択したら、距離を計測したい要素間をドラッグして直線を引きましょう。(Shiftキーを押しながらドラッグすることで、直線を引きやすくなります)直線の長さが「情報」ウィンドウに表示されるので、水平線の場合はW、垂直線の場合はHの値を使用します。(「情報」ウィンドウが見つからない場合、上部メニューバーから「ウィンドウ」→「情報」を選択してください)文字情報の取得テキスト要素を選択状態にすると、プロパティ内の文字というエリアに、テキストの文字情報が表示されます。テキスト関連の以下のCSSプロパティに相当するデータを取得できます。40px;rem表記にする場合、対象テキストのfont-sizeを、ルートのhtml要素のfont-sizeで割った値になります。left;line-height行送り(行の高さ)を指定するプロパティです。フォントサイズ)で指定することが推奨されます。2;letter-spacing文字の間隔を指定するプロパティです。「VA」の値を使いますが、この値をそのままCSSに記述するわけではありません。1000)という計算で求められます。0.03em;colorコーディング前の準備で解説した通り、事前にカラーモードをRGB形式へ変更しておいてください。(設定方法はこちら)要素の色を取得するには、アピアランスエリア内の「塗り」と記載された欄のボックスをクリックします。下のようなウィンドウが表示されたら、パレットのアイコンをクリックすると、右下にカラーコードが表示されます。「#」をクリックすることで、カラーコードをコピーすることもできます。#2F8ECE;まとめIllustratorのデザインカンプ(AIデータ)からコーディングを行う方法について解説しました。IllustratorはWeb制作会社での使用率も高いデザインツールですので、使いこなせれば仕事の幅は大きく広がります。この記事を参考に、使い方をマスターしていただけると嬉しいです。CCコンプリートプランを購入することが必須になります。以下の記事で4万円以上安く購入する方法を解説しているので是非ご覧ください。必須知識デザインツール内容が良かったらSNSでシェアしていただけると嬉しいです!ダークモードいわっちWebエンジニア福岡在住のフリーランスWebエンジニア。東京都内の自社開発企業でフロントエンドエンジニアとして約3年間勤めた後、フリーランスとして独立。当ブログでは「高品質なWebサイト制作」をテーマにした技術情報をメインに発信しています。Web制作案件のご相談も承っておりますので、お気軽にご相談ください。