Adobe XD（xdデータ）からコーディングする具体的な方法

2022 6/21

2022年6月21日

こんにちは、TERUです。
SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。

読者の悩み

Adobe XDのデザインデータからどうやってコーディングするの？
デザインデータを利用したコーディングで気をつけるポイントは？

本記事では、こういった疑問に答えます。
制作会社さんからWEB制作（コーディング案件）を依頼された際に、デザインデータを提供されて、それを元にコーディングを行うのが一般的です。

Progateやドットインストールでは学習してないポイントなので、初めて作業する方は戸惑ってしまうと思います。
Adobe XDのデザインデータ（xdデータ）からコーディングを行う方法について説明します。

Photoshopのデザインデータ（psdデータ）からのコーディングについては、以下の記事を参考にしてください。

あわせて読みたい

Photoshop（PSDデータ）からコーディングする具体的な方法こんにちは、TERUです。SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。デザインデータからどうやってコーディングするの？デザインデー…

そもそもコーディングって何？どんな働き方や学習方法があるの？という事が気になる方は「コーディングとは？働き方や学習方法を解説する【初心者向け】」の記事をご覧ください。

本記事の信頼性

Web制作会社にてディレクターの経験あり。
フリーランスとしてWordPress案件を中心としたWeb制作をメインに仕事をしている。
コーディング歴4年。

Adobe XDをまだ持っていいないという方は、こちらからインストールしてください。

IllustratorやPhotoshopなど普段から他のAdobe製品も使われる方は、Creative Cloudコンプリートプラン（税込6,480円）がオススメです。

TERU

Web制作では複数のAdobe製品を使用するので、コンプリートプランで契約されている方が多いです。

とりあえずAdobe XDだけ使えればいいという方は単体プランで十分です。
Adobe XDは体験版（７日間無料）がありますので、興味のある方は、「【Adobe XD】無期限無料（スタータープラン）が終了？無料体験版と有料版の違いを解説」の記事をご覧ください。

Creative Cloudコンプリートプランの場合

単体プランの場合

コンプリートプラン契約済みの方へ

コンプリートプランが少し高いなと思ってる方にお得な情報です。
学生教職員版のコンプリートプランに乗り換えることで、年間3万円以上お得になります。

あわせて読みたい

やらないと損！デジハリ版Adobe CCに乗り換えて、コンプリートプランを安く利用する方法こんにちはTERUです。フリーランスでホームページやECサイト制作を仕事にしています。読者の悩み Adobe CCコンプリートプランが高すぎるので、少しでも安くしたい。デ…

Adobe XD（xdデータ）からのコーディング方法【覚えるのは３つだけ！】

結論として、Adobe XD（xdデータ）からのコーディングで必要なスキルは下記の３つです。

文字情報の取得
画像の書き出し
要素情報の取得

Adobe XDの機能は数多くありがますが、コーディングに必要なスキルはこの記事を見ていただければ十分です。
必要なスキルについて、１つずつ詳細を解説いたします。

文字情報の取得

コーディングに利用する文字情報は以下の６つになります。

font-family
font-size
font-weight
line-height
letter-spacing
color

（１）選択ツールの状態で対象のテキストを選択します。
※要素がグループ化されている場合、ダブルクリックでテキストを選択できます。

（２）選択後にサイドバーのテキストプロパティとアピアランスを確認します。

※[letter-spacing]と[Line-height]以外の４つの値はこの画面を見るだけで分かります。
あとはCSSに反映してあげるだけです。

（３）color箇所をダブルクリックするとRGB値を確認することもできます。

※[Hex]を選択することで、カラーコードも確認できます。

計算が不要な値

上記の画像から下記の４つの情報は画面を見るだけで取得することが可能です。

font-family→Rounded Mplus 1c
font-size→20px
font-weight→Regular
color→#FFFFFF

計算が必要な値

[line-height],[letter-spacing]については、画面で取得した値から計算して取得する必要があります。

line-height
行の高さを指定するプロパティです。
行送りと文字のサイズ箇所を確認します。

行送り/文字のサイズで算出（単位はなし）

line-height算出例

例：画像の場合
29/20=1.45
line-height:1.45;

letter-spacing
文字の間隔を指定するプロパティです。
AV箇所を確認します。

AVの数字/1000で算出（単位はem）

letter-spacing算出例

例：画像の場合
0/1000=0em
letter-spacing:0em;

AV値が50の場合
50/1000=0.05em
letter-spacing:0.05em;

画像の書き出し

デザインデータからコーディングに必要な画像を書き出す方法です。
書き出す画像は主に下記の３パターンです。

背景画像
イラスト
写真

フォントに関しては、画像として書き出さずに、なるべくコーディングで
実装した方がいいです。
※Googleの検索エンジンが画像の文字情報を読み取れずSEO観点でよくないため

書き出し手順

（１）選択ツールの状態で対象のオブジェクトを選択します。

（２）[ファイル]-[書き出し]-[選択したオブジェクト..]を選択します。

[command]+Eのショートカットでも書き出しできるので便利です。（Windowsの場合、Ctrl＋E）

（３）以下の項目を選択し、[書き出し]をクリックします。

フォーマット：「JPG」、「PDF」、「SVG」、「PNG」から選択
画質：基本的に「100%」を選択（20%、40%、60%、80%、100%が選択可能）
書き出しサイズ：コーディングで利用するので「WEB」を選択

上記の手順で書き出すと[ファイル名@2x.拡張子]で２倍書き出し用の画像も一緒に書き出されます。
画質を気になる箇所は２倍書き出し用の画像ファイルを利用しましょう。

注意点：Adobe XDは、カラーマネジメント非対応！

カラーマネージメントとは？

「カラーマネジメントシステム」とは、ソフトウェアやデバイス間での色の差を管理するために必要なシステムです。
使用することで、各デバイスやデータの色情報（カラープロファイル）を用いて色を“共通化”し、どのデバイスでも同じ色で見えるように環境を整備することができます。
※カラープロファイルとは：カラー値（RGB／CMYKの数値）とカラーアピアランス（実際に発色した色）を結びつけるもので、「どんな色で表示するのか」をまとめた指示書的な役割を担います。
Webデザインの色を忠実に！カラーマネジメントを理解しよう

つまりAdobe XDでは、カラーマネジメント非対応の為、XDで表示されている画像と書き出した画像の色合いが違うことがあるということです。

TERU

XDで書き出した画像を見ると少しくすんだ感じに見えます

メインビジュアルや重要な箇所の画像については、PhotoShopなど別のツールを使って書き出すようにしましょう。