想定読者AdobeXDデータからコーディングをしたい方『XDでコーディングってどういうこと。デザインツールの知識なんてないから俺には絶対無理だ』
本記事では、上記の方に向けて『AdobeXDデータでコーディングする方法』について詳しく解説していきます。
- AdobeXDデータでのコーディングとは
- AdobeXDデータでコーディングする方法
- AdobeXDデータを活用したコーディングを動画で学ぶ
上記を軸に解説していきます。
AdoveXDデータでのコーディングとは
Adobe XDをそもそも知らない方のために簡単な解説をさせていただきます。
AdobeXDとは：ホームページやWebサイト、モバイルアプリなどのデザインを簡単に作成することができるツールです。*無料で使用可能
XDは比較的簡単に操作可能なので、本記事だけである程度のレベルまでスキルアップすることが可能です。
依頼主からXDデータを渡された私達エンジニアは、渡されたXDデータに沿ったコーディングをして行かなくてはいけません。
AdobeXDデータでコーディングする方法
AdobeXDデータを貰ったエンジニアは以下の項目を抑えながらコーディングをしていく必要があります。
- デザイン全体像を把握する
- 文字フォントを確認する
- 要素情報を確認する
- 画像を書き出す
上記の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データからのコーディングする方法に関する動画」をおすすめします。
テキストではなく、動画コンテンツの方が覚えやすい方にはいいかも知れません。
Adobe XDからのコーディングを動画で学ぶ
AdobeXDコーディング以外なら当サイトもおすすめです。
コーディングに関する技術を学びたいのであれば、当サイトがおすすめです。
まとめ：AdobeXDからコーディングする方法
本記事は『AdobeXDからコーディングする方法』について詳しく解説しました。
このように、当サイトではエンジニアに必要な情報に加えてブログ運営に役立つ情報を発信しています。
興味がある方は、ぜひご覧ください。
本記事は以上です。最後までご覧くださりありがとうございました。
