AdobeXDのデータからコーディングをする方法【完全版】

adobeXDからコーディング

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg
  • XDからコーディングってどうしたらいいの?
  • XDって持ってないけどコーディングできるの?
  • てかXDってそもそもなんのサービスなの?

こんな疑問に答えます。

AdobeXDを使ったコーディング依頼って、初めてだとやり方がわからないですよね。

ですが、AdobeXDからコーディングをするのはとっても簡単です。

私自身も頻繁に、XDでWebデザインを制作してコーディングをしています。

本記事では、XDを使ったコーディングをするやり方について解説をしています。

記事を読み終える頃には、AdobeXDからコーディングができるようになります。

コーディングの場でAdobeXDが普及している理由

まず、AdobeXDがWebデザイナーやコーダーの間で重宝される2つです。

  • WebデザイナーにとってXDは使いやすい
  • XDを使っていないコーダーも利用できます。

それぞれの理由について解説します。

WebデザイナーにとってXDは使いやすい

まず、Webデザイナーにとって、AdobeでWebデザインを制作できることは大きな時間短縮に繋がります。

理由として、AdobeXDは写真加工ツールのPhotshopやイラスト制作ツールのIllustratorとの親和性が高いからです。

XDを含め、全てAdobeから提供されているデザインツールです。

従って、操作性や使い方が共通していたり、デザインデータのやり取りなども円滑に行えます。

PhotoshopやIllustratorなども使うWebデザイナーなども多いため、XDも利用されます。

XDを持っていないコーダーも利用できる

また、デザインツールを普段使わないコーダーも、XDを利用することができます。

理由は、XDはブラウザ上で開くことができ、誰でも利用することができるからです。

XDには制作したデザインデータをURLで共有する機能が実装されており、XDを持っていない人も利用ができます。

新たにデザインを制作すると行ったことは難しいですが、デザインを確認したり、画像をダウンロードすることもできます。

そのため、Adobeに加入してお金を支払わなくても利用できる事になり、コーダーへの負担を軽減できます。

AdobeXDを使ったコーディングの流れ

XDでコーディングをする大まかな流れは次のとおりです。

  1. デザイン全体を確認する
  2. AdobeXDから画像を抜き出していく
  3. デザインに沿ってコーディングする

それぞれ解説していきます。

手順1:デザイン全体を確認する

まずはじめに、XDで頂いたデザインの全体像を確認します。

重点的に確認する点は次のとおりです。

  • デザイン全体の色あいを確認する
  • どのデザインに注力するかなど、時間配分計画を建てる

上記3つのポイントを中心に、デザインを確認していきましょう。

特に、デザインから時間配分を考えることは納期を遵守する上でとても重要です。

ゆとりを持たせながらも、納期に間に合うような時間配分を設定しましょう。

手順2:AdobeXDから画像を抜き出していく

続いては、AdobeXDから画像を抜き出します。

具体的な手順は後ほど解説しますが、AdobeXDにはアセット書き出しという機能を使いましょう。

アセット書き出しとは、AdobeXDに使われている画像を一括で保存することができます。

画像を一枚一枚書き出すよりも、何杯も効率的に画像を入手することができます。

手順3:デザインに沿ってコーディングする

最後に、デザインに沿ってコーディングを実施します。

コーディングを行うときは、以下の点を注意します。

  • デザインの余白幅を確認する
  • 文字フォントを確認する
  • コーディングに使われるCSSを確認する

AdobeXDでは、デザインの余白幅を簡単に確認することができます。

レスポンシブの影響もあるので、余白幅を完全に再現する必要はありませんが、大まかに再現することは必要でしょう。

また、文字フォントはデザインの雰囲気を変える大きな要因です。

Webフォントなどを利用して、AdobeXDのデザイン通りのフォントを再現できると良いでしょう。

そして、AdobeXDの機能を利用することで、CSSを確認できるようになります。

CSSをゼロから記述しなくて良いため、大幅な時間の短縮に繋がります。


大まかな手順を確認できたところで、細かな作業手順を解説します。

  • AdobeXDから画像を一括で入手する方法
  • AdobeXDで余白を確認する方法
  • AdobeXDで文字フォントを確認する方法
  • コーディングを最適化する機能の使い方

上記4つをそれぞれ解説していきます。

AdobeXDから画像を一括入手する【アセット書き出し】

まずはじめに、AdobeXDで画像を一括入手できる、アセット書き出しについて説明します。

画像は見切れてしまっていますが、Webとスマホ用のデザインがそれぞれ用意されているとしましょう。

AdobeXDから画像を抜き出す手順1

今回は、Web版のサイズ(大きい方)のデザインから、画像を一括で抜き出すとします。

画像左側のアートボードにある、Web版のデザインの横にあるエクスポートアイコンをクリックしましょう。

AdobeXDから画像を抜き出す手順2

アイコンが灰色に変わったら成功です。

そして、ファイル>書き出し>全ての書き出し対象をクリックします。

AdobeXDから画像を抜き出す手順3

すると、書き出しの画面が出現するので、新規フォルダを作ってから書き出しを選択します。

AdobeXDから画像を抜き出す手順4

その結果、制作した新規フォルダ内に、画像がすべて出力保存されています。

AdobeXDから画像を抜き出す手順5

AdobeXDで余白を確認する方法

AdobeXDで余白を確認する方法は2種類あります。

アートボードからの余白を確認する

アートボードからの、オブジェクトがどのくらい離れているかを確認します。

距離をはかりたいオブジェクトを選択したあと、Option(Alt)キーを長押しします。

アートボードからの余白を確認方法

上下左右の、アートボードからの距離を測ることができました。

オブジェクト間の余白を確認する

続いて、オブジェクト間の距離を計測しましょう。

オブジェクトをクリックしてOption(Alt)キーを長押しします。つまり、アートボードからの余白を確認できる状況ですね。

アートボードからの余白を確認する

その状態から、計測したいオブジェクトをにマウスカーソルを移動させます。

今回であれば、プログラミング学習サイトのオブジェクト上に移動させました。

オブジェクト間の余白を確認する

すると、オブジェクト同士の幅を計測することができます。

AdobeXD上の文字フォントを確認する方法

そして、AdobeXD上で文字フォントを確認する方法を解説しまします。

XD上の文字を選択します。

そして、右側のテキストを確認すると、文字フォントを含めた情報を確認することができます。

AdobeXD上の文字フォントを確認する方法

確認できる情報は次のとおりです。

  • テキストフォント
  • 行間
  • 文字間
  • フォントサイズ
  • フォントカラー

いろいろな情報を確認できるため、注意して確認しましょう。

コーディングを最適化するAdobeXDの機能

コーディングを最適化するAdobeXDの機能について解説をします。

まずは、AdobeXDの共有を選択します。

AdobeXDの共有タブ

共有ボタン選択後、右側の表示設定>開発を選択します。

AdobeXDの開発を選択

そして、リンクを作成ボタンを押すとURLが発行されるので、そのURLへアクセスします。

AdobeXDの共有リンクを作成

リンク先では、コーディングに必要なCSSやテキスト情報を入手できます。

AdobeXDのオブジェクトのCSSを確認できる

オブジェクトを選択することで、CSSの情報やコンテンツ情報を入手できるので、コーディング時間の削減に繋がります。

精度に不安が残る面もありますが、効率よくコーディングできるため、活用するとよいでしょう。

まとめ:AdobeXDからコーディングするのは簡単

AdobeXDからのコーディングはとっても簡単です。

AdobeXDを利用していないコーダーでも利用できますし、余白やフォント、画像の書き出しなどを一括でできるからです。

また、CSSやテキストデータの取得も簡単に行えるので、どんどん活用していきましょう。