コーディングに必要なデザインカンプは主に4種類あります。
- Illustrator
- Photoshop
- Figma
- XD
稀にPowerPointやPDFやExcelの場合もありますが、それは例外なので除外します。
今回はIllustratorでのコーディングの進め方について解説していきます。
Photoshopの場合はこちら
XDの場合はこちら
Figmaの場合はこちら
効率よくコーディングしたい人はこちら
Adobe Illustratorのデザインカンプからコーディングする方法
Illustratorでのコーディングの進め方は以下のようになります。
- 単位をピクセルにする
- 画像を書き出す
- 各数値を取得しながらコーディング
それでは順番に解説していきます。
単位をピクセルにする
まずは単位をピクセルにします。
Illustrator → 環境設定 → 単位を選択します。
そして単位を全てピクセルにして完了です。
画像を書き出す
コーディングを始める前に画像を書き出しましょう。
アセット書き出しパネルを表示
まずはウィンドウ → アセットの書き出しをクリックします。
そしてアセットの書き出しの左にチェックが入り、右側のパネルが表示されればOKです。
ダイレクト選択ツールを使って画像を書き出す
ツールボックスのダイレクト選択ツールをクリックします。
先ほど表示させたアセット書き出しパネルに書き出したい画像を選択して、ドラッグ&ドロップします。
画像は縁が青い線になっていれば選択されています。
こちらがドラッグ&ドロップされたアセット書き出しパネルです。
ここでの設定は以下になります。
ファイル名
上記ではdog03となっており、ファイル名をクリックすれば編集可能です。
拡大・縮小
画像出力の倍率を指定します。
倍率が大きいほど画質は良くなりますが、大き過ぎても容量が増えてしまうので2倍（2x）にしておきましょう（Illustrator以外でも画像の書き出しは基本的に2倍にしましょう）
サフィックス形式
これは先ほど設定したファイル名の後に書かれる文字になります。
2倍にした時はデフォルトで@2xとなっており、この状態で書き出すとファイル名はdog03@2x.pngとなります。
形式
ファイル形式をPNG、JPG、SVG、PDFの中から選択します。
使い分けとしては以下のような感じになります。
- PNG → 透過された画像（角が丸いなど）
- JPG → 正方形や長方形など、角が丸くない画像
- SVG → ロゴやアイコンなど（拡大縮小しても劣化しない）
あとは画像が選択されて縁が青くなっているのを確認したら、右下の書き出しをクリックして画像を書き出しましょう（画像が選択されていないと書き出し出来ません）
ファイルの保存先を特に変更しない場合は、デザインカンプと同じ階層に2xというフォルダが作られ、その中にdog03@2x.pngというファイル名で画像が書き出されます。
画像を複数まとめて書き出す
デザインの中には1つの画像として書き出したいのにバラバラになっている物もあります。
その場合は書き出したい画像をまとめて選択し、それをドラッグ&ドロップでアセット書き出しパネルに移動します。
この場合ドラッグ&ドロップで青い点を掴んでしまうと移動出来ないので、点以外のオレンジ色の部分をクリックしてドラッグ&ドロップというちょっとだけ細かい作業になります。
これで書き出せばバラバラの画像も1つの画像として出力されます。
各数値を取得しながらコーディング
ここからいよいよコーディングとなります。
テキストをコピー
テキストをコピーするには、ツールボックスの文字ツールを選択します。
次にコピーしたいテキストでクリックをしてカーソルをあてます。
右と比べてテキストの色も青く変わっているのが分かります。
ちなみに文字ツールじゃなくてダイレクト選択ツールだったとしても、ダブルクリックすれば自動で文字ツールに変わります。
そしてこの状態になったらMacなら⌘＋A、WindowsならCtrl＋Aで全選択します。
これでテキストが全選択されたので、Macなら⌘＋C、WindowsならCtrl＋Cでコピーしてテキストエディタに貼り付けましょう。
フォントの情報を取得
先ほどはテキストをHTMLに貼り付けるだけだったので、今度はフォントの情報を取得してCSSに書いていきます。
まずはウィンドウ → プロパティをクリックします。
するとプロパティのパネルが表示されます。
ここで確認出来るフォントの項目はこちらです。
- color（色）
- opacity（透明度）
- font-family（種類）
- font-weight（太さ）
- font-size（大きさ）
- line-height（行間）
- letter-spacing（字間）
順番に見ていきます。
color（色）
塗りの左にある四角をクリックするとこちらが表示されますが、カラーコードは分かりにくいです（左がスウォッチ、右がカラー）
なのでツールボックスにある塗りと線の所をダブルクリックして表示されるカラーピッカーを見た方が分かりやすいと思います。
この場合だとcolor: #333;となります（アルファベットや数字が全部同じなら3つでOKです）
opacity（透明度）
これは不透明度と書いてある場所で、画像では100%となっているのでopacity: 1;となり、初期値と同じなので何も書かなくてOKです。
もし70%で color: #000; の場合は、以下のどちらかで書きます。
- opacity: 0.7; と color: #000;
- color: rgba(0, 0, 0, 0.7);
下の方はrgbaプロパティで、最初の3つがカラーコード、最後の数字が透明度を表します。
なので color: rgba(0, 0, 0, 0.7); の0.7は不透明度70%となります。
ただしテキストを透過させる事はあまりないかと思います。
font-family（種類）
今回の例では游ゴシック体がfont-familyになります。
font-weight（太さ）
今回の例ではboldがfont-weightになります。
font-size（大きさ）
今回の例では16pxがfont-sizeになります。
line-height（行間）
line-heightは24pxとfont-sizeの16pxを使って計算します。
24 ÷ 16 = 1.5
となるので、line-height: 1.5; となります。
letter-spacing（字間）
今回の例では100がletter-spacingに関する値となります。
ただしletter-spacing: 100;ではなく、
100 ÷ 1000 = 0.1
となり、単位はemにするのでletter-spacing: 0.1em;となります。
要素の情報を取得
次はボックスなどの要素の情報を取得します。
確認する項目はこちらです。
- background-color（背景色）
- border（線）
- opacity（透明度）
- width（幅）
- height（高さ）
- transform: rotate( );（角度）
- border-radius（角丸）
- box-shadow（ドロップシャドウ）
それでは順番に見ていきます。
確認方法はダイレクト選択ツールで要素をクリックしてプロパティで確認していきます。
まずはこちらから最初の3項目を確認していきます。
background-color（背景色）
こちらもテキストと同じで、塗りの左にある四角をクリックすると表示されるパネルでは分かりにくいので、ツールボックスにある塗りと線の所をダブルクリックして、表示されるカラーピッカーを見た方が分かりやすいと思います。
border（線）
線はpxで設定出来ますが、左のボックスに斜めの赤線がある場合は線は無しという意味になります。
なので今回の例では border: none; となります。
もし線が設定されている場合、右側で線の太さが確認出来ます（以下の場合1px）
また色は左の塗りと線をダブルクリックして表示されるカラーピッカーで確認出来ます。
opacity（透明度）
これもテキストと同じ不透明度と書いてある場所で、画像では100%となっているのでopacity: 1;となり、初期値と同じなので何も書かなくてOKです。
もし70%で background-color: #fff; の場合は、以下のように書きます。
- background-color: rgba(255, 255, 255, 0.7);
最初の3つがカラーコード、最後の数字が透明度を表します。
なので background-color: rgba(255, 255, 255, 0.7); の0.7は不透明度70%となります。
テキストと違うのは、もしopacity: 0.7; にしてしまうと要素内にあるテキストなども透過してしまう点です。
なのでこの場合の透明度はopacityは使わないでrgbaを使いましょう。
残りの項目を確認するために以下の「・・・」をクリックします。
そしてこちらが表示されるので、ここから情報を取得していきます。
幅、高さ、角度に関しては赤枠の上（変形）の所でも確認可能です。
width（幅）
今回の例では320pxがwidthになります。
height（高さ）
今回の例では420pxがheightになります。
transform: rotate( );（角度）
今回の例では0°が角度になります。
これが10°の場合は、transform: rotate(-10deg); となります（PhotoshopとXDだと10deg）
border-radius（角丸）
これは数値が大きいほど角が丸くなっていきます。
今回の例では5pxなので、border-radius: 5px; となります。
今回は4ヶ所全て5pxですが、バラバラの可能性もあります。
例えば以下のような場合は、border-radius: 10px 5px 2px 8px;となります。
box-shadow
これはこれまでのプロパティには表示されておらず、ドロップシャドウがかかっている要素をクリックするとこちらが表示されます。
そしてクリックするとこちらが表示されます。
この場合であれば、box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); となります。
カラーの四角をクリックするとカラーピッカーが表示されるので、そこでカラーコードを確認して下さい。
余白を取得
これはこれまでと違って数値で取得が出来ず、おおよその数値を測ることしか出来ません。
測る方法は、ものさしツールか長方形ツールあたりがいいと思います。
両方のやり方を解説しますが、最終的にはChromeの拡張機能であるPerfectPixelを使って確認しましょう。
PerfectPixelの使い方については以下の記事を参照下さい。
【Chrome拡張機能】ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方
ものさしツールの場合
ツールボックスにはデフォルトで表示されていないので、下の方の「・・・」をクリックして右側のすべてのツールを開きます。
そして下の方にあるものさしツールのアイコンをクリックするとメニューに追加されます。
ただし他のアイコンをクリックすると消えてしまうので、また使うときはもう一度表示させましょう。
あとはものさしツールを使って要素間に線を引いて、横であればW、縦であればHの数値を見ればOKです。
この例であれば60.1616pxですが、これはあくまでもおおよその数値なので実際は60pxでいいと思います。
また、線はShiftキーを押しながら引くと真っ直ぐ引けます（縦も横も）
長方形ツールの場合
長方形ツールは最初から表示されているので、以下のアイコンをクリックします。
あとは要素間に長方形を作ればOKです。
この場合は幅を知りたいのでWの60pxとなります。
高さを知りたいときはHの39pxとなります。
また線が設定されていると分かりにくいので、0にしておきましょう。
グラデーションを取得
グラデーションの要素を左上の選択ツールでダブルクリックやクリックをして、プロパティにグラデーションを表示させます（ダブルクリックの後に1回クリックなど）
そしてグラデーションを編集をクリックします。
すると要素にバーが表示され、選択中の色が左の塗りの線に表示されているので、ダブルクリックします。
上記では選択中の色は薄い方の色になります。
そしてこちらが薄い方の色のカラーコードになります。
カラーコードを確認したら、次は逆の方の◯をクリックして濃い方の色を選択し、同じようにカラーコードを確認します。
そしてグラデーションは縦方向なので、以下のようになります。
background: linear-gradient(to bottom, #F8CAE5, #FFEFF8);
アウトライン化したカンプも必ず貰う
Illustratorのデザインカンプでの注意点ですが、必ずアウトライン化したカンプも貰いましょう。
例えば左が通常のカンプで、右がアウトライン化したカンプになります。
通常のカンプではPCに入ってないフォントなどは反映されない為、実際の見え方と異なります。
実際の見え方と異なるという事はPerfectPixelで重ねてもピッタリ重ならないので、パーフェクトピクセルが困難になるという事です。
フォントの種類によってはかなり大幅にズレます。
アウトライン化してあればちゃんとフォントは反映されているので、アウトライン化したカンプかアウトライン化したカンプ全体を書き出した画像を貰いましょう。
アウトライン化したカンプではフォントの数値は取得出来ないので、数値の取得には通常のカンプの方を使います。
以上になります。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
