おにちゃん塾の商品一覧

【完全版】AdobeXDデータでコーディングする方法【有料動画紹介】

【完全版】AdobeXDデータでコーディングする方法【有料動画紹介】
URLをコピーする
URLをコピーしました!
おにちゃん

AdobeXDデータからコーディングをしたい方『XDでコーディングってどういうこと。デザインツールの知識なんてないから俺には絶対無理だ』

本記事ではAdobeXDデータでコーディングする方法について詳しく解説していきます。

本記事の内容
  1. AdobeXDデータでのコーディングとは
  2. AdobeXDデータでコーディングする方法
  3. AdobeXDデータを活用したコーディングを動画で学ぶ

上記を軸に解説していきます。

目次

AdoveXDデータでのコーディングとは

AdoveXDデータでのコーディングとは
AdobeXDデータでのコーディングとは

Adobe XDをそもそも知らない方のために簡単な解説をさせていただきます。

AdobeXDとは、ホームページやWebサイト、モバイルアプリなどのデザインを簡単に作成することができるツールです。*無料で使用可能

おにちゃん

XDは比較的簡単に操作可能なので、本記事だけで簡単にコーディングをすることが可能になります。

依頼主からXDデータを渡された私達エンジニアはXDデータに沿ったコーディングをして行かなくてはいけません。


AdobeXDデータでコーディングする方法

AdobeXDデータでコーディングする方法
AdobeXDデータでコーディングする方法

AdobeXDデータを貰ったエンジニアは以下の項目を抑えながらコーディングをしていく必要があります。

コーディングの手順
  1. デザイン全体像を把握する
  2. 文字フォントを確認する
  3. 要素情報を確認する
  4. 画像を書き出す

上記の4つの流れを意識しながらXDデータのコーディングしていきましょう。


 XDデータのデザイン全体を確認する

一番最初にすることは依頼主から預かったXDデータのデザイン全体を確認することです。

意識すべきは下記の通りです。

  • Class名を付与
  • イメージカラー
  • 使う技術をピックアアップ
  • 時間配分を考える

時間配分を考えることに関しては、納期が決められる案件では必ず行いましょう。

おにちゃん

ある程度時間に余裕を持つことは大切です。


XDデータから文字フォントを確認しコーディング

AdobeXDデータから文字フォントを確認しコーディングをしていきましょう。

XDデータの文字をクリックすると下記の写真のように表示されます。

確認すべき情報は5つ程度です。

  • Font-size
  • Font-weight
  • Font-family
  • Line-height
  • Letter-spacing


  • フォントファミリー:Noto
  • フォンサイズ:14
  • フォントの濃さ:bold

上記の値は計算しなくても簡単に算出することができます。

計算で算出する値

行間幅、文字間に関してはご自身で計算する必要があります。

行間幅:line-height

計算式:行送り÷文字のサイズ

上記写真を式にすると下記の通りです。

→30÷14 = 2.14

問題)行送りが30、font-sizeが15であれば

→30÷15 =2
CSSにはline-height: 2;と入力すればよし

間:letter-spacing

AV値を下記の公式に当てはめれば終わりです。

計算式:AVの数値÷1000=値*単位はem

上記の写真を式にすると下記の通りになります。

50÷1000=0.05em

AV値が100の場合は0.1em

CSSにはletter-spacing:0.1emと入力すればよし


XDデータから要素の情報を取得しコーディング

XDデータからは文字情報だけでなく、要素の情報も取得することができます。

具体的には以下のような情報を取得可能です。

  • 要素のwidth(横幅)、height(縦幅)
  • 要素のborder-radius(境界線)とbackground(背景色)
  • 要素の影
  • 要素のopacity(透過)
  • 要素間のmargin(幅)

知りたい要素をクリックしてみてください。すると、ツールの右側にWとHが表示されます。

  • W:width
  • H:height

要素間のマージンを知りたい場合は[option]キーを押しながら他の要素にホバーすると、画面上にマージンの値が出力されます。

 

上記のように表示される値を元にマージンを設定していきましょう。

割とXDからマージンを抜き取るの簡単なので、すぐに慣れるはずです。


XDデータから画像を書き出しコーディング

XDではコーディングに必要な画像を書き出していく必要があります。

→なるべく文字情報はコーディングで書きましょう。なぜなら、SEOの観点からいくと文字情報はしっかりマークアップすべきです。

手順command +Eを同時入力

すると下記の画像のように、画像を保存する項目が表示されます。

名前&場所を指定し、【書き出し】をクリックしましょう。

  • 形式:基本的にメイン画像はpng、そのほかはjpgで問題なし
  • 書き出し形式:コーディングであれば『WEB』の一択
  • デザイン倍率:「1x」で問題なし

上記のように選択すると、きちんと保存されます。


【Udemyの受講】XDデータを活用したコーディングを動画で学ぶ

【Udemyの受講】XDデータを活用したコーディングを動画で学ぶ

おにちゃん塾の無料情報だけでも割と間に合いますが、中には完璧を目指したい方もいるはずです。

そういった方はUdemyのXDデータからのコーディングに関する完璧に解説されている動画をおすすめします。

おにちゃん

テキストではなく、動画コンテンツの方が覚えやすい方にはいいかも知れません。

Adobe XDからのコーディングを動画で学ぶ


 まとめ:AdobeXDからコーディングする方法

 まとめ:AdobeXDからコーディングする方法

本記事はAdobeXDからコーディングする方法について詳しく解説しました。

このように、おにちゃん塾ではエンジニアに必要な情報に加えてブログ運営に役立つ情報を発信しています。

興味がある方は、ぜひご覧ください。

>>【プログラミング初心者】おしゃれなポートフォリオの作り方【大公開】

>>【今年の抱負】WordPressエンジニアのフリーランスを目指します

>>【情報共有】個人Web制作の今後について色々調べました→難易度高いです

おにちゃん

本記事のデザインにはクリスタブログの模写を活用させていただきました。

【完全版】AdobeXDデータでコーディングする方法【有料動画紹介】

この記事が気に入ったら
フォローしてね!

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