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

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

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

読者の悩み

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

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


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

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

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

本記事の信頼性

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

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


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

TERU

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

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

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

単体プランの場合

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

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

目次

Adobe XD(xdデータ)からのコーディング方法【覚えるのは3つだけ!】

Adobe XD(xdデータ)からのコーディング方法【覚えるのは3つだけ!】
結論として、Adobe XD(xdデータ)からのコーディングで必要なスキルは下記の3つです。

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

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

文字情報の取得

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

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

(1)選択ツールの状態で対象のテキストを選択します。
※要素がグループ化されている場合、ダブルクリックでテキストを選択できます。
文字情報の取得

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

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

(3)color箇所をダブルクリックするとRGB値を確認することもできます。

文字情報の取得3
文字情報の取得4
※[Hex]を選択することで、カラーコードも確認できます。

計算が不要な値

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

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

計算が必要な値

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

line-height
行の高さを指定するプロパティです。
行送りと文字のサイズ箇所を確認します。
文字情報の取得5
行送り/文字のサイズで算出(単位はなし)

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




letter-spacing
文字の間隔を指定するプロパティです。
AV箇所を確認します。
文字情報の取得6
AVの数字/1000で算出(単位はem)

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

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




画像の書き出し

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

  • 背景画像
  • イラスト
  • 写真

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

書き出し手順

(1)選択ツールの状態で対象のオブジェクトを選択します。

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

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

(3)以下の項目を選択し、[書き出し]をクリックします。

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


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

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

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

「カラーマネジメントシステム」とは、ソフトウェアやデバイス間での色の差を管理するために必要なシステムです。

使用することで、各デバイスやデータの色情報(カラープロファイル)を用いて色を“共通化”し、どのデバイスでも同じ色で見えるように環境を整備することができます。

※カラープロファイルとは:カラー値(RGB/CMYKの数値)とカラーアピアランス(実際に発色した色)を結びつけるもので、「どんな色で表示するのか」をまとめた指示書的な役割を担います。

Webデザインの色を忠実に!カラーマネジメントを理解しよう

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

TERU

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

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

要素情報の取得

幅や高さなど、要素に関する情報の取得方法を説明します。

具体的には以下のような情報です。

  • 要素の横幅(width),縦幅(height)
  • 要素の境界と背景色
  • 要素の影
  • 要素の透過
  • 要素間の幅(余白)

(1)選択ツールの状態で対象のオブジェクトを選択します。
要素情報の取得
(2)右側のメニューで要素に関する情報が確認できます。

要素の横幅(width),縦幅(height)

要素情報の取得2

要素の境界と背景色

要素情報の取得3
  • border-radius:境界角の丸み(px指定)
  • background:背景色(background-colorでの指定もOK)
  • border:境界線

要素の影

要素情報の取得4
シャドウを選択する事で、要素の影情報も取得することが可能です。
画像の場合、box-shadow: 0 3 6px rgba(128, 119, 119, 0.2);とCSSに記載すると表現できます。

要素の透過

要素情報の取得5
要素の不透明度を確認できます。
100%の場合、不透明度は1で全く透過していない状態です。

例えば80%の場合、CSSではopacity: 0.8;で表現します。

要素間の幅(余白)

(1)要素の幅を測りたい対象のオブジェクトを選択します。
要素間の幅(余白)
(2)要素を選択した状態でを[option]キーを押しながら他のオブジェクトにホバーすると、画面上に余白の値がピンク文字で表示してされます。
※Windowsの場合、[Alt]キーを押しながら
要素間の幅(余白)2

【おまけ】Adobe XD(xdデータ)からのコーディング方法〜便利な小技

【おまけ】Adobe XD(xdデータ)からのコーディング方法〜便利な小技

デザイン共有機能

Adobe XDには、デザインデータを共有する機能があります。

共有されたデザインデータは、ブラウザ上で確認することができ、コメントをつけることができます。
コーディングの仕様(アニメーションやホバーの動作など)について制作会社さんやデザイナーさんとのコミュニケーションも取りやすくなるので、利用してみるのがオススメです。

公開リンクの作成手順

(1)対象のデザインファイル(xdデータ)を開きます。
(2)[共有]タブを選択し、右側に表示される[リンクを作成]クリックします。
デザイン共有機能
(3)公開リンクが表示されます。
デザイン共有機能2
(4)公開リンクからアクセスすることで、デザインデータをブラウザ上から確認できます。
デザイン共有機能3

デザインスペック

デザイン共有機能をカスタマイズすることで、デザイン情報(CSS)やアセット(フォントや画像)も共有できます。

下記の記事で詳しく説明しています。

Zeplinとの連携

デザインの補足ツールである「Zeplin」と連携することでコーディングで使用するデザインデータの確認が効率良くできるようになります。

詳しい連携の手順は下記の記事にまとめています。

Adobe XDの関連記事

アートボード機能

コンポーネント機能

リピートグリッド機能

スタック機能

その他

まとめ

今回はAdobe XD(xdデータ)からのコーディングで必要な作業について説明しました。
操作に関しては、Photoshopよりも簡単です。

Adobe XDはアップデートにより、どんどん機能が追加されて便利になっているので、この機会に操作を覚えておくのがオススメです。

▼Adobe XD公式ページ

これから案件作業をやってみようという方の参考になれば嬉しいです。

サイト制作のご依頼について

フリーランスチームにて、ホームページ・ECサイトの制作も行っております。
計画立案から制作、納品、運用までトータルでサポートいたしますのでお気軽にご相談ください。
※初回相談無料

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
目次
閉じる