コーディングに必要なデザインカンプは主に4種類あります。
- Illustrator
- Photoshop
- Figma
- XD
稀にPowerPointやPDFやExcelの場合もありますが、それは例外なので除外します。
今回はXDでのコーディングの進め方について解説していきます。
Illustratorの場合はこちら
Photoshopの場合はこちら
Figmaの場合はこちら
効率よくコーディングしたい人はこちら
Adobe XDのデザインカンプからコーディングする方法
XDでのコーディングの進め方は以下のようになります。
- 画像を書き出す
- 各数値を取得しながらコーディング
それでは順番に解説していきます。
画像を書き出す
コーディングを始める前に画像を書き出しましょう。
まずは書き出したい画像を選択ツール（左上の矢印）を選択した状態でクリックし、ファイル → 書き出し→ 選択したオブジェクトをクリックします。
もしくは選択したオブジェクトの横に書いてある通り、画像が選択された状態でMacなら⌘＋E、WindowsならCtrl＋Eを押せばこちらが表示されます（この方が簡単です）
上から順に以下のようになります。
- 画像名
- 保存先
- フォーマット
- 書き出しサイズ
フォーマットに関してはPNG、JPG、SVG、PDFの中から選択します。
使い分けとしては以下のような感じになります。
- PNG → 透過された画像（角が丸いなど）
- JPG → 正方形や長方形など、角が丸くない画像
- SVG → ロゴやアイコンなど（拡大縮小しても劣化しない）
また、XDに限らずデザインカンプから画像を書き出す時は、サイズを2倍にして書き出すようにしましょう。
理由はRetinaディスプレイでは1倍だとぼやけてしまい、綺麗に表示させるには2倍で書き出す必要があるからです。
2倍は2xとなります。
各数値を取得しながらコーディング
ここからいよいよコーディングとなります。
テキストをコピー
テキストをコピーするには、選択ツールでコピーしたいテキストボックスをダブルクリックすればOKです（IllustratorやPhotoshopのようにテキストツールにする必要はありません）
以下のようなデザインの場合は最初のダブルクリックはカード全体、次のダブルクリックはテキストエリア全体という感じになるので、何度かダブルクリックをする必要があるかも知れません。
するとテキストにカーソルをあたるので、Macなら⌘＋A、WindowsならCtrl＋Aで全選択します。
これでテキストが全選択されたので、Macなら⌘＋C、WindowsならCtrl＋Cでコピーしてテキストエディタに貼り付けましょう。
フォントの情報を取得
先ほどはテキストをHTMLに貼り付けるだけだったので、今度はフォントの情報を取得してCSSに書いていきます。
情報を表示させるには知りたいテキストをクリックすれば右に表示されます。
ここで確認出来るフォントの項目はこちらです。
- font-family（種類）
- font-size（大きさ）
- font-weight（太さ）
- letter-spacing（字間）
- line-height（行間）
- color（色）
アピアランスの下にある100%というのは透明度になりますが、フォントの透明度は通常その下にある塗りで設定されていると思います。
それでは順番に見ていきます。
font-family（種類）
今回の例ではNoto Sans CJK JPがfont-familyになります。
font-size（大きさ）
今回の例では16pxがfont-sizeになります。
font-weight（太さ）
今回の例ではboldがfont-weightになります。
letter-spacing（字間）
今回の例では100がletter-spacingに関する値となります。
ただしletter-spacing: 100;ではなく、
100 ÷ 1000 = 0.1
となり、単位はemにするのでletter-spacing: 0.1em;となります。
line-height（行間）
line-heightは24pxとfont-sizeの16pxを使って計算します。
24 ÷ 16 = 1.5
となるので、line-height: 1.5; となります。
color（色）
カラーの四角内をクリックするとこちらが表示されるので、そこでカラーコードを確認出来ます。
この場合だとcolor: #333;となります（アルファベットや数字が全部同じなら3つでOKです）
また、横の100%は透明度になります。
透明度はopacityかcolorのrgbaを使います。
通常はcolorのrgbaを使うので、その場合は上記の16進数（Hex）ではなくRGB表示にします。
これで透明度が70%の場合は、color: rgba(51, 51, 51, 0.7); となります。
要素の情報を取得
次はボックスなどの要素の情報を取得します。
確認したい要素をクリックして選択します。
要素によっては何度かダブルクリックしないと確認したい項目が表字されない事もあります。
確認する項目はこちらです。
- width（幅）
- height（高さ）
- transform: rotate( );（角度）
- opacity（透明度）
- border-radius（角丸）
- background-color（背景色）またはグラデーション
- border（線）
- box-shadow（ドロップシャドウ）
それでは順番に見ていきます。
width（幅）
今回の例では320pxがwidthになります。
height（高さ）
今回の例では56pxがheightになります。
transform: rotate( );（角度）
今回の例では0°が角度になります（Xの右）
これが10°の場合は、transform: rotate(10deg); となります（IllustratorとFigmaだと-10deg）
opacity（透明度）
これはアピアランスの下にあり、今回は100%なので設定不要です。
もし70%であれば、opacity: 0.7; となります。
border-radius（角丸）
これは数値が大きいほど角が丸くなっていきます。
今回の例では28pxなので、border-radius: 28px; となります。
今回は4ヶ所全て28pxですが、バラバラの可能性もあります。
例えば以下のような場合は、border-radius: 8px 3px 30px 18px;となります。
background-color（背景色）またはグラデーション
背景色は単色であれば塗りをクリックして表示されるカラーコードを見ればOKです。
単色ではなくグラデーションの場合は、グラデーションの薄い色と濃い色のカラーコードを確認する必要があります。
手順は以下になります。
- 塗りをクリック
- 要素の薄い方か濃い方の色をクリックして選択する
- カラーコードを確認
- もう片方の色も同様にカラーコードを確認
下の例ではボタンの上の方（薄い色）が選択されています。
今回の場合は上から下にかけて色が濃くなるボタンなので、背景色のコードは以下のようになります。
background: linear-gradient(to bottom, #FFEFF8, #F8CAE5);
border（線）
最初の画像では線は設定されていませんでしたが、設定されている場合は以下のようになります。
この場合、border: 1px solid #707070; となります。
box-shadow（ドロップシャドウ）
ドロップシャドウはX軸、Y軸、ぼかし、色を確認します。
色を確認するには「ドロップシャドウ」の左の四角をクリックします。
カラーコードは最初Hexになっているかも知れませんが、透明度が設定されている場合は上記のようにRGBに変更しましょう。
この場合は、box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25); という感じになります。
box-shadowをもう少し詳しく見ると以下のようになります。
box-shadow: X軸（横方向の距離） Y軸（縦方向の距離） ぼかし rgba(カラーコード, 不透明度);
余白を取得
余白の取得方法は以下になります。
- 要素をクリックして選択された状態にする
- Macならoptionキー、WindowsならAltキーを押しながら、距離を測りたい要素にカーソルを乗せる
これで要素の間に数値が表示されます（上記の場合は55px）
もちろん横だけなく縦もOKです。
もしこのやり方で上手くいかない場合は、ラインツールを使ってみましょう。
左にあるラインツールを選択したら、あとは余白を調べたい要素間に線を引くだけです（線はShiftキーを押しながら引くと真っ直ぐ引けます（縦も横も））
線の長さは右側で確認出来ます（Wが幅、Hが高さ）
ページ全体を書き出した画像も必ず貰う
XDのデザインカンプでの注意点ですが、必ずページ全体を書き出した画像も貰いましょう。
例えばこのように環境にないフォントとある場合、PC内に該当のフォントがないのでフォントが反映されません。
見比べると分かりますが、左がカンプで右がページ全体を書き出した画像になります。
カンプではPCに入ってないフォントなどは反映されない為、実際の見え方と異なります。
実際の見え方と異なるという事はPerfectPixelで重ねてもピッタリ重ならないので、パーフェクトピクセルが困難になるという事です。
フォントの種類によってはかなり大幅にズレます。
なのでフォントが入っているPCで作業しているデザイナーさんにページ全体を書き出して貰いましょう。
以上になります。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
