【完全版】Adobe XDデザインカンプからのコーディング方法（無料デザインカンプ付き）

Web制作の実案件では、依頼主から提供されたデザインを元にコーディングを行います。
そのためには、コーディング作業に必要なデザインツールの使い方を知っていなければなりません。

デザインツールには様々なものがありますが、中でもAdobe XDはコーディングに必要なデータを読み取りやすい特徴があり、多くのWeb制作会社で使用されています。また、初学者向けの教材などでもXDを使用しているものは多く、はじめに習得するデザインツールとしてもXDはおすすめです。

しかし、XDを元にコーディングするやり方を体系的に解説しているものはあまり多くなく、特にProgateを終えたばかりの初学者の方は迷ってしまいがちなポイントだと思います。

この記事では、Adobe XDデザインカンプからコーディングする方法を、初心者の方にもわかりやすく１から解説していますので、是非ご覧ください。
無料のXDデザインカンプを配布しているので、実際に手を動かしながら学ぶことも出来ます。

XDカンプは２種類ある（デスクトップアプリ版 / 共有リンク版）

依頼主の方からデザインカンプとして提供されるXDデザインの形式には、①デスクトップアプリ版、②共有リンク版の２種類があります。
前提として、まずはこれら２つの形式の特徴や違いを押さえておきましょう。

①デスクトップアプリ版

自身のPCにインストールしたXDのデスクトップアプリを利用してデザインカンプを確認・編集する方法です。

クライアントから、拡張子が「.xd」の形式のファイルを提供された場合は、デスクトップアプリでそのデザインファイルを開く必要があります。

XDのデスクトップアプリは以前まで無料版がありましたが、現在は無料版はありません。
また、XD単体で購入することも出来なくなっており、現在XDのデスクトップアプリを使用するためにはAdobe CCコンプリートプランを購入することが必須となっています。

②共有リンク版

XDには、共有リンクというURLを発行する機能があります。
このURLを開くことで、XDアプリ本体を持っていない方でも、Web上でデザインを確認することができます。

クライアントからURL形式でXDデザインを提供された場合は、それが共有リンクになります。
（クライアントによって共有リンクにパスワードを設定している場合があります）

共有リンク機能はあくまでデザインを共有するための機能なので、デスクトップアプリ版と比較して使える機能に制限があります。

特に「デザインからの画像書き出し」が出来ないことは大きなデメリットであり、画像素材の用意はクライアント（発注者）側にしていただく必要があります。（クライアント側もアイコンなどの細かい画像は見落としていることも多く、その度に書き出しを依頼しなければならないので手間がかかりやすいです）

また、「デザインの編集」は基本的にコーダーは行いませんが、邪魔な要素を一時的に非表示にしてデータを読み取ったり、マスク機能で特定の範囲を指定して画像を書き出したりなど、編集機能が使えた方が便利な場面は多くあります。

以上の点から、実務では可能な限りデスクトップアプリ版のデザインカンプ（XDファイル）を共有していただいて、コーディング作業を行うことを推奨します。

XDデザインカンプの無料配布

XDデザインデータをお持ちでない方のために、無料のXDデザインカンプを配布しています。

配布しているデザインのイメージは以下になります。

デスクトップアプリ版と共有リンク版の２種類を用意しているので、必要な方は以下からダウンロードしてください。

デザインを受け取ったら確認すること

デスクトップアプリ版の場合

デスクトップアプリ版のデザインカンプを受け取ったら、デザイン内で使用されているフォントが自身のPCに存在するか確認しましょう。

まずは、XD画面左下のメニューからライブラリ表示に切り替えます。

左サイドバーに「環境にないフォント」という表示がある場合、ここに記載されたフォントがPCにインストールされていません。

この場合、代替フォントが適用されてデザインの正確な見た目が確認できないため、足りないフォントデータをインストールしましょう。

Google Fontsからインストールする例

Google Fontsにアクセスし、必要なフォント名を検索して、該当のフォントをクリックします。

フォント詳細ページに移動したら、右上の「Get font」ボタンをクリックしてください。

画面が遷移し、これまでに選択したフォントが一覧表示されます。
選択状態のフォントは、画面右上の （鞄）マークをクリックすることで、いつでも確認できます。

他にも必要なフォントがある場合は、同様の手順でフォントを選択状態にしてください。

「Download all」ボタンをクリックで選択状態のフォントを一括ダウンロード、各フォントの右側の  アイコンをクリックで個別にダウンロードが可能です。

ダウンロードしたフォルダを開き、「.ttf」形式のファイルをダブルクリックします。

以下のようなウィンドウが表示されるので、「インストール」をクリックします。

これで、フォントが自身のPCにインストールされました。
XDに戻り、環境にないフォントの表示がなくなっているか確認しましょう。
（Google Fontsからダウンロードしてきたファイル類は削除して大丈夫です）

※ 上記の手順はあくまで、自身のPC（ローカルな環境）でフォントを使用するためのものなので、公開するWebサイト側には別途フォント読み込みのための対応（scriptタグ埋め込みなど）が必要です。

共有リンク版の場合

共有リンク版のデザインを受け取った場合、① 開発モードが有効化されているか、② 画像素材の用意があるかを確認しましょう。

① 開発モードが有効化されているか

共有リンクからコーディングに必要なデータを読み取るためには、共有リンク発行時に開発モードが有効化されている必要があります。

共有リンクを開き、右サイドメニューに＜/＞のアイコンが表示されていれば、開発モードが有効です。
こちらをクリックすることで、コーディングに必要な各データを取得できる開発モードに切り替わります。

もし上記のような表示がない場合は、デザイン作成者に問い合わせましょう。

② 画像素材の用意があるか

共有リンク上では、デスクトップアプリ版のような画像の書き出し機能がなく、デザイン作成者がアセットとして登録した画像のダウンロードのみ可能です。

アセットとして登録された画像は以下のように表示され、ここからダウンロードできますが、登録されていない画像はダウンロードできません。その場合はクライアント側にアセット登録していただくか、別途画像ファイルを送信していただくことになります。

デスクトップアプリ版の使い方

ここから、デスクトップアプリ版のXDデザインを元にコーディングを行う方法を解説していきます。
（共有リンク版の使い方を知りたい方はこちら）

画像の書き出し方法

まずは書き出したい対象の要素をクリックして選択状態（青い枠が表示された状態）にします。

画像に付いている角丸やドロップシャドウなどの装飾は、CSSで実装するのが望ましいです（理由は後ほど解説）。
そのため、これらの装飾は書き出しの時だけ解除しておきます。

画像が選択された状態のままcommand ⌘+E（Windowsの場合Ctrl+E）とキーボード入力すると、以下のような画面が表示されます。

書き出す画像のフォーマットをPNG / SVG / PDF / JPGの中から選択します。

フォーマットは、画像の特徴に応じて以下のように選択すると良いです。（画像フォーマットに関する詳しい解説はこちらの記事をご覧ください）

JPGを選択した場合は、書き出す画像の画質を設定できます。100%だとファイル容量が重くなりやすいので、80%程度がおすすめです。（最終的には自分の目で画質に問題ないかチェックしましょう）

PNGかJPGを選択した場合、画像の書き出しサイズを選択します。1xなら等倍サイズ、2xなら2倍サイズで画像が書き出されます。

高解像度ディスプレイ対策のため、「2x」を選択して2倍サイズで書き出しましょう。（詳しい理由はこちらの記事で解説しています）

注意点① 画像の装飾（角丸やドロップシャドウ等）は含めずに書き出す

画像に付いている角丸やドロップシャドウなどの装飾は書き出す画像には含めず、CSSで実装しましょう。
理由は以下の通りです。

・角丸つきで書き出したJPG画像の例

・ドロップシャドウつきで書き出したPNG画像の例

注意点② テキストのSVG化はアウトライン化が必要

テキストをSVG画像として書き出す場合は注意が必要です。

SVGとして書き出したテキストに使用されているフォントが閲覧ユーザーのデバイスに存在しない場合、違うフォントが適用されてSVG画像の見え方が変わってしまいます。そのため、テキストを文字情報から図形に変換する「アウトライン化」をする必要があります。

アウトライン化の手順はとても簡単です。
まずはSVG画像として書き出したいテキストをクリックして選択します。

テキストを選択状態のまま、command ⌘+8（WindowsはCtrl+8）とキーボード入力すれば、アウトライン化できます。
レイヤーを確認した際に、テキストが「パス」に変換されていれば、アウトライン化成功です。

要素情報の取得

幅や高さ、背景色など、その要素自身の情報を読み取る方法です。
情報を取得したい要素をクリックして選択状態にすると、右側にその要素の各情報が表示されます。

主に以下の要素情報を読み取ることができます。

幅と高さ（width, height）

要素の幅（width）と高さ（height）の値はそれぞれ、W, Hと記載された箇所から取得できます。

width: 600px;
height: 400px;

回転（transform: rotate）

下画像の赤枠部分が0°でない場合は、要素の回転度合いが指定されています。

transform: rotate(45deg);

不透明度（opacity）

アピアランスの値が100%でない場合は、要素の不透明度が指定されています。

opacity: 0.75;

背景色（background-color）

「塗り」と記載されたエリアのボックスをクリックすることで、要素の背景色を取得できます。

background-color: #FFFFFF;

色が透過されている（不透明度が100%でない）場合、「Hex」を「RGB」に切替え、rgba形式で色指定します。

background-color: rgba(255, 255, 255, 0.5);

ボーダー（border）

「線」と記載されたエリアのカラーボックスをクリックするとボーダー色（border-color）を、サイズからボーダー幅（border-width）を取得できます。

border: 1px solid #2099EB;

角丸（border-radius）

下画像の赤枠部分が0でない場合、角の丸み（border-radius）が指定されています。

border-radius: 20px;

下記の通り、４つの角にそれぞれ違う値が指定されている場合もあります。

border-radius: 20px 20px 0 0;

影（box-shadow, filter: drop-shadow）

「ドロップシャドウ」にチェクマークが入っている場合、要素の影が指定されています。
（通常はbox-shadowを、PNG画像など透過性のある要素に影をつける場合はfilter: drop-shadowを指定します）

box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4);
  /* or */
filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.4));

要素間の距離（余白）の取得

基準となる要素をクリックして選択状態にし、option ⌥ キー（Windowsの場合Altキー）を押しながら距離を測りたい対象にマウスカーソルを合わせると、２つの要素間の距離が表示されます。

margin

margin-top: 40px;

padding

padding: 15px 69px;

文字情報の取得

テキスト要素をクリックして選択状態にすると、文字情報を含む各情報が右側に表示されます。

テキスト関連の以下のCSSプロパティに相当するデータを取得できます。

font-family

font-family: "Outfit", sans-serif;

font-size

font-size: 40px;

rem表記にする場合、対象テキストのfont-sizeを、ルートのhtml要素のfont-sizeで割った値になります。
（上の画像の場合、html要素のfont-sizeが16pxなら、40 / 16 = 2.5rem）

font-size: 2.5rem;

font-weight

font-weight: bold;
  /* or */
font-weight: 700;

text-align

text-align: left;

line-height

行送り（行の高さ）を指定するプロパティです。

XD上ではpx単位で表記されていますが、line-heightの値は倍率（行送りの値 / フォントサイズ）で指定することが推奨されます。上の画像の場合、line-heightは 32 / 16 = 2 となります。

line-height: 2;

letter-spacing

文字の間隔を指定するプロパティです。
「AV」の値を使いますが、この値をそのままCSSに記述するわけではありません。

letter-spacingに記述する値は、（AVの値 / 1000）という計算で求められます。（単位はem）
上の画像の場合、30 / 1000 = 0.03em となります。

letter-spacing: 0.03em;

color

「塗り」と記載されたエリアのボックスをクリックすることで、文字色を取得できます。

color: #FFFFFF;

色が透過されている（不透明度が100%でない）場合、「Hex」を「RGB」に切替え、rgba形式で色指定します。

color: rgba(255, 255, 255, 0.5);

ホバー・トグル状態の切替え

要素によっては、マウスホバー時など状態が変化した際の表示（ステート）が定義されている場合があります。

要素を選択した際に、右側のコンポーネントという領域を見れば、ステートが定義されているかわかります。（ステートが定義された要素は、選択すると緑の枠で囲われます）

ステートは要素のバリエーション（状態変化）を表すものであり、以下の３種類があります。

各ステートをクリックすることで、ステートを切り替えることができます。
（下の画像の例では、マウスホバー時にボタンの背景色が青に、文字色が白に変化しています。）

共有リンク版の使い方

画像のダウンロード方法

共有リンクを使用する場合、デザイン作成者が書き出し対象として登録した画像のみダウンロード可能です。
（書き出し対象への登録が漏れている画像がある場合、デザイン作成者に確認しましょう）

共有リンクを開き、開発者モード（スペックを表示）にした状態で、画面右側の「アセット」という部分に、そのページで使用されている画像素材が一覧表示されています。
（表示されていない場合は、ページの領域外の薄グレーの部分をクリックするか、再読み込みしてください）

書き出したい画像をクリックして選択すると右下にダウンロードウィンドウが表示されます。
画像アセットは複数選択することで、一括ダウンロードすることも出来ます。

ダウンロード設定にて、「ビットマップアセットの形式」、および「ベクターアセットの形式」を選択します。
（ビットマップアセットは一般的な画像ファイル、ベクターアセットはテキストや図形などの素材です）

フォーマットは、画像の特徴に応じて以下のように選択すると良いです。（画像フォーマットに関する詳しい解説はこちらの記事をご覧ください）

※ JPG画像の場合、デスクトップアプリ版のような画質設定（圧縮）ができないため、そのまま使用するとファイル容量が重い場合があります。squooshなどを使用して画像を別途圧縮することを推奨します。

画像フォーマットを選択したら、[ダウンロード]ボタンをクリックすると画像がダウンロードされます。
画像はそれぞれ、等倍サイズと2倍サイズの2種類が書き出されます。ファイル名に@2xと付いているものが2倍サイズの画像です。（SVGには画像倍率の概念がないため1種類のみ）

基本的には、高解像度ディスプレイ対策のため、2倍サイズの画像を使用することが推奨されます。
（詳しい理由についてはこちらの記事をご覧ください）

要素情報の取得

幅や高さ、背景色など、その要素自身の情報を読み取る方法です。
情報を取得したい要素をクリックして選択状態にすると、右側にその要素の各情報が表示されます。

主に以下の要素情報を読み取ることができます。

幅と高さ（width, height）

要素の幅（width）と高さ（height）の値はそれぞれ、W, Hと記載された箇所から取得できます。

width: 600px;
height: 400px;

回転（transform: rotate）

下画像の赤枠部分が0°でない場合は、要素の回転度合いが指定されています。

transform: rotate(270deg);

不透明度（opacity）

不透明度の値が100%でない場合は、opacityの指定が必要です。

opacity: 0.45;

背景色（background-color）

「カラー」と記載されたエリアのボックスをクリックすると、カラーコードをコピーできます。

background-color: #333333;

色が透過されている（不透明度が100%でない）場合、「Hex」を「RGBA」に切替え、rgba形式で色指定します。

background-color: rgba(0, 0, 0, 0.45);

ボーダー（border）

「線」と記載されたエリアのカラーボックスをクリックするとボーダー色（border-color）を、サイズからボーダー幅（border-width）を取得できます。

border: 1px solid #2099EB;

角丸（border-radius）

アピアランスの中に以下の赤枠のような表示があれば、角の丸み（border-radius）が指定されています。

border-radius: 20px;

影（box-shadow, filter: drop-shadow）

アピアランス内に「ドロップシャドウ」の表示があれば、要素の影が指定されています。
（CSSに記載する場合、通常はbox-shadowを、PNG画像など透過性のある要素に影をつける場合はfilter: drop-shadowを指定します）

box-shadow: 0 3px 20px #00000065;
  /* or */
filter: drop-shadow(0 3px 20px #00000065;

要素間の距離（余白）の取得

基準となる要素をクリックして選択状態にしたまま、距離を測りたい対象の要素にマウスカーソルを合わせることで、2つの要素間の距離が表示されます。

margin

margin-top: 40px;

padding

padding: 15px 69px;

文字情報の取得

テキスト要素をクリックして選択状態にすると、文字情報を含む各情報が右側に表示されます。
「コンテンツ」の部分をクリックすることで、テキストをコピーすることも可能です。

テキスト関連の以下のCSSプロパティに相当するデータを取得することができます。

font-family

font-family: "Outfit", sans-serif;

font-size

font-size: 28px;

rem表記にする場合、対象テキストのfont-sizeを、ルートのhtml要素のfont-sizeで割った値になります。
（上の画像の場合、html要素のfont-sizeが16pxなら、28 / 16 = 1.75rem）

font-size: 1.75rem;

font-weight

font-weight: bold;
  /* or */
font-weight: 700;

text-align

text-align: left;

line-height

行送り（行の高さ）を指定するプロパティです。

XD上ではpx単位で表記されていますが、line-heightの値は倍率（行送りの値 / フォントサイズ）で指定することが推奨されます。上の画像の場合、line-heightは 32 / 16 = 2 となります。

line-height: 2;

letter-spacing

文字の間隔を指定するプロパティです。
スタイルの中の「AV」という部分に記載されています。

共有リンク上ではpx単位で表記されていますが、CSSにはem単位で記載することが推奨されます。
em単位の値は、（AVの値 / フォントサイズ）の計算で求められます。（上の画像の例では、0.48 / 16 = 0.03em となります）

letter-spacing: 0.03em;

color

「カラー」と記載されたエリアのボックスをクリックすると、カラーコードをコピーできます。

color: #333333;

色が透過されている（不透明度が100%でない）場合、「Hex」を「RGBA」に切替え、rgba形式で色指定します。

color: rgba(0, 0, 0, 0.45);

ホバー・トグル状態の切替え

要素によっては、マウスホバー時など状態が変化した際の表示（ステート）が定義されている場合があります。

要素を選択した際に、右側のコンポーネントという領域を見れば、ステートが定義されているかわかります。（ステートが定義された要素は、選択すると緑の枠で囲われます）

ステートは要素のバリエーション（状態変化）を表すものであり、以下の３種類があります。

各ステートをクリックすることで、ステートを切り替えることができます。
（下の画像の例では、マウスホバー時にボタンの背景色が青に、文字色が白に変化しています。）

まとめ

Adobe XDデザインカンプからコーディングを行う方法について解説しました。

数あるデザインツールの中でもXDはコーディングがしやすく、使用人口も多いため、まずはじめに習得しておくことをおすすめします。この記事が一人でも多くの初学者の役に立てたら嬉しいです。