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

2023年8月30日

こんにちは、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は、2023年1月に単体販売が終了になりました。
今後は、Adobeが2022年9月に買収したデザインツール「Figma」の方に開発が注力していくかもしれません。

アドビが、同社のプロトタイピングツール「Adobe XD」の単体販売を終了したことが1月24日までに分かった。すでに、同社プロダクト一覧ページからAdobe XDの項目が消えている。ただし、「Creative Cloud」コンプリートプランには引き続き提供されており、契約すれば新規でのインストールも可能だ。
「Adobe XD」単体販売を終了、サポート継続へ　Figmaとのすみ分けは「何も決まっていない」 – ITmedia NEWS

Adobe XDをまだ持っていないという方は、Adobe CCを購入する必要があります。

Creative Cloudコンプリートプランを少しでも安く購入したい方は、「デジハリ経由でAdobe CCコンプリートプランを安く購入する方法」の記事をご覧ください。

TERU

Web制作では複数のAdobe製品を使用するので、Adobe CCは必須です。

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

既にコンプリートプランを契約しており、毎月の支払いが少し高いなと思ってる方にお得な情報です。
デジハリ版Adobe CC（学生教職員版）に乗り換えることで、年間4万円以上お得になります。

あわせて読みたい

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

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

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

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

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

2023年6月6日のアップデートにより、カラーマネージメント機能が実装され、デザインデータ内と書き出しの各段階でXDファイルのカラーレンダリングが統一され、異なる色が表示される現象が解消されました。

TERU

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など別のツールを使って書き出すようにしましょう。