こんにちは、TERUです。
SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。
読者の悩み
- Adobe XDのデザインデータからどうやってコーディングするの？
- デザインデータを利用したコーディングで気をつけるポイントは？
本記事では、こういった疑問に答えます。
制作会社さんからWEB制作（コーディング案件）を依頼された際に、デザインデータを提供されて、それを元にコーディングを行うのが一般的です。
Progateやドットインストールでは学習してないポイントなので、初めて作業する方は戸惑ってしまうと思います。
Adobe XDのデザインデータ（xdデータ）からコーディングを行う方法について説明します。
Photoshopのデザインデータ（psdデータ）からのコーディングについては、以下の記事を参考にしてください。
そもそもコーディングって何？どんな働き方や学習方法があるの？という事が気になる方は「コーディングとは？働き方や学習方法を解説する【初心者向け】」の記事をご覧ください。
本記事の信頼性
- 制作会社でWEBディレクターとしての勤務経験あり
- 自身も現在フリーランスとして制作会社案件も対応している。
- コーディング歴2年でだいたい月収３０〜50万
Adobe XDをまだ持っていいないという方はまず自分のPCにインストールしてください。
illustratorやPhotoshopも使われる方は、コンプリートプランがオススメです。
とりあえずAdobe XDだけ使えればいいという方は赤枠の単体プランで十分です。
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
行の高さを指定するプロパティです。
行送りと文字のサイズ箇所を確認します。
行送り/文字のサイズで算出（単位はなし）
例：画像の場合
29/20=1.45
line-height:1.45;
letter-spacing
文字の間隔を指定するプロパティです。
AV箇所を確認します。
AVの数字/1000で算出（単位はem）
例：画像の場合 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.拡張子]で２倍書き出し用の画像も一緒に書き出されます。
画質を気になる箇所は２倍書き出し用の画像ファイルを利用しましょう。
要素情報の取得
幅や高さなど、要素に関する情報の取得方法を説明します。
具体的には以下のような情報です。
- 要素の横幅（width）,縦幅(height)
- 要素の境界と背景色
- 要素の影
- 要素の透過
- 要素間の幅（余白）
（１）選択ツールの状態で対象のオブジェクトを選択します。
（２）右側のメニューで要素に関する情報が確認できます。
- border-radius:境界角の丸み（px指定）
- background:背景色（background-colorでの指定もOK）
- border:境界線
シャドウを選択する事で、要素の影情報も取得することが可能です。
画像の場合、box-shadow: 0 3 6px rgba(128, 119, 119, 0.2);とCSSに記載すると表現できます。
要素の不透明度を確認できます。
100%の場合、不透明度は１で全く透過していない状態です。
例えば80%の場合、CSSではopacity: 0.8;で表現します。
（１）要素の幅を測りたい対象のオブジェクトを選択します。
（２）要素を選択した状態でを[option]キーを押しながら他のオブジェクトにホバーすると、画面上に余白の値がピンク文字で表示してされます。
※Windowsの場合、[Alt]キーを押しながら
【おまけ】Adobe XD（xdデータ）からのコーディング方法〜便利な小技
デザイン共有機能
Adobe XDには、デザインデータを共有する機能があります。
共有されたデザインデータは、ブラウザ上で確認することができ、コメントをつけることができます。
コーディングの仕様（アニメーションやホバーの動作など）について制作会社さんやデザイナーさんとのコミュニケーションも取りやすくなるので、利用してみるのがオススメです。
（１）対象のデザインファイル（xdデータ）を開きます。
（２）[共有]タブを選択し、右側に表示される[リンクを作成]クリックします。
（３）公開リンクが表示されます。
（４）公開リンクからアクセスすることで、デザインデータをブラウザ上から確認できます。
Zeplinとの連携
デザインの補足ツールである「Zeplin」と連携することでコーディングで使用するデザインデータの確認が効率良くできるようになります。
詳しい連携の手順は下記の記事にまとめています。
Adobe XDの関連記事
まとめ
今回はAdobe XD（xdデータ）からのコーディングで必要な作業について説明しました。
操作に関しては、Photoshopよりも簡単です。
Adobe XDはアップデートにより、どんどん機能が追加されて便利になっているので、この機会に操作を覚えておくのがオススメです。
▼Adobe XD公式ページ
これから案件作業をやってみようという方の参考になれば嬉しいです。