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

想定読者

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

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

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

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

記事の内容

サイト運営者

ブログアイコン例:おにちゃん
おにちゃん(22歳)
@onityanzyuku01

大学4年|経済学部(現在休学中)

おにちゃん塾を3年ほど運営しております。副業、フリーランス、独立までの情報を網羅していく予定です。

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データの文字をクリックすると下記画像の画面表示されます。

XDデータから文字フォントを確認しコーディング
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

間:letter-spacing
間: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が表示されます。

XDデータから要素の情報を取得しコーディング
XDデータから要素の情報を取得しコーディング
  • W:width
  • H:height

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

上記のように表示される値を元にマージンを設定していきましょう。
割とXDからマージンを抜き取るの簡単なので、すぐに慣れるはずです。


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

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

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

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

手順command +Eを同時入力

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

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

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

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

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


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

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

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

そういった方は「UdemyのXDデータからのコーディングする方法に関する動画」をおすすめします。

おにちゃん

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

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


AdobeXDコーディング以外ならおにちゃん塾もおすすめです。

コーディングに関する技術を学びたいのであれば、おにちゃん塾がおすすめです。


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

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

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

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

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

>>【プログラミング初心者】おしゃれなポートフォリオの作り方【大公開】
>>【今年の抱負】WordPressエンジニアのフリーランスを目指します
>>【情報共有】個人Web制作の今後について色々調べました→難易度高いです

おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。


AdobeXdコーディングを学んだら案件を獲得しよう

AdobeXdコーディングができるようになった方は案件獲得に注力するフェーズかもしれません。

おにちゃん

まだ、初案件を獲得できていない方はおにちゃん塾が初案件を獲得するまでにしたことを参考にしてみてください。


AdobeXDコーディングができる方は次のレベルへ

おそらく、AdobeXDができる方はある程度HTML、CSSを理解している。案件を獲得するためにAdobeXDを覚えようとしているはずです。

であれば、AdobeXDの次は「WordPress」に注力してみてください。

おにちゃん

WordPress案件は簡単に獲得できる+案件が多い+稼ぎやすいので今のうちにスキルを身につけましょう。

URLをコピーする
URLをコピーしました!
記事の内容
閉じる