プログラミング

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

こんにちは、現在Web制作歴5年のしょーごです。

今回は『Adobe XDからのコーディング方法』を解説していきます。

XDはとても直感的に操作できるので、Photoshopからのコーディングに比べてそこまで難しくないと思います。

今後徐々に主流になっていくと思われるので、しっかり学習しておきましょう。

しょーご
しょーご
今回は私が無料で配布しているXDカンプを例にしていきます。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

【駆け出しコーダーに捧ぐ】2022年以降のポートフォリオ戦略&レビュー付きデザインカンプからのコーディング課題について解説
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

この記事の反響

無料XDカンプはこちらから

無料でデザインカンプを配布しています/

XDのデザインカンプには2種類ある

疑問 質問 悩み

①XDデータ

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

XDファイルをデザイナーから貰って、XDファイルをAdobe XDアプリで開いてコーディングしていく流れです。

XDアプリが必要ですが、無くても無料でダウンロードし使用することができます。

複数ページを一度に俯瞰できるので便利なのですが、

編集可能なので、下手に触って元のデザインを崩してしまう可能性があります。

Windows7が入ってるような古いPCでたまにAdobe XDファイル開けないという人がいますが、流石に買い替えたほうがいいですね…

②URLカンプ

クラウド上にデザインが保存されており、パスワードを入力すればXDソフトがなくてもデザインを開くことができます。

XDファイル版と違って編集できない分、下手に触って元のデザインを崩すリスクがないので、コーダー的には扱いやすいかもしれません。

1ページずつしか見れないので、全体を俯瞰することはできません。

今回は両方からのコーディング方法を見ていきます。

デザインデータから取得するもの【XD,フォトショイラレ共通】

  • 画像、アイコンなど
  • フォント情報
  • 余白
  • 影や丸み、色など

①XDデータからのコーディング

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

このようなファイルからXDデータを開いたなら、それは『XDデータからのコーディング』になります。

①画像の取得

まずは取得したい画像を選択してください。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

そこで、Windows民は【Ctrl + E】、Mac民は【Command + E】を押下。

すると、

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

このような画面になるはずです。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

フォーマットに関しては、

  • PNGは『アイコンや透過画像など。容量が重くなりやすい』
  • SVGは『アイコンなどで、pngより画質が荒くならない、軽いなど特徴。ただしXFREEなど無料サーバーだと表示に対応してなかったり』
  • PDFは基本コーディングには使わない
  • JPGは『写真』。『写真=JPG』で基本問題ないはず。

書き出し先は『Web』、『倍率は1X』で問題ないです。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

これで画像を書き出すことができます。

画像が先方から提供されることはほとんどないので、必ず自分でXDから書き出せるようになってください。

各要素の詳細確認

フォントはダブルクリックでコピペしたり編集できるようになります。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

フォント周りの確認

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
  1. font-family
  2. font-size及びfont-weight
  3. line-height(font-size / 数値で計算、ここではline-heightは1.5となる)
  4. text-align
  5. color
  6. letter-spacing

colorはクリックすると確認することができます。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
  1. border-radius
  2. box-shadow

ちなみにシャドウの透明度は無視されがちですが、忘れると全く違う色になるので、注意。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

幅と高さ

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

余白の取得はWindows民は『Altを押しながらホバー』 Mac民は『optionを押しながらホバー』をするといいです。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

②URLカンプからのコーディング

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

URLカンプからのコーディングの場合は、大抵このようなパスワード管理されたページから開いていると思います。

各要素の詳細確認

URLカンプの場合も詳細情報は右側に出ています。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

画像のダウンロード

画像を複数選択すれば、一気に複数ダウンロードすることができます。

WIndows民は『Altを押しながらクリックMac民は『optionを押しながらクリック』すればいいです。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

各要素の取得

テキストは『コンテンツ』の部分をクリックするだけでコピーすることができます。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

フォント周りの確認

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
  1. font-family、font-weight
  2. font-size
  3. text-align
  4. letter-spacing
  5. line-height
  6. color
  7. opacity
Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
色確認
box-shadow

ちなみにたまに#00000029みたいなカラーコードを見るかもですが、RGBAで指定するとデザイン通りになります。

CSSは当てにならない、参考程度に

ここに出力されるCSSはあくまで参考程度に見ましょう。というかほぼ見なくてもいいかなと。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

余白

基本的にクリックするだけなので、XDデータからのコーディングよりも楽です。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
30pxの余白がある

要素の幅と高さ

これもクリックするだけでわかります。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

もし使われてるフォントがGoogle Fontsの場合

Noto Sans JPを例に、実際のフォントの読み込み方を解説しています。

XDは直感的で難しくない

実際に触ってみるとすぐに慣れることができます。

デザインデータの数値に厳密にコーディングを行うためにも、しっかりと使い方を練習しておきましょう!

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

基本的にまとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!