>>【随時更新】これで選べる!プログラミングスクールランキングをチェックする

Adobe XDからのコーディング方法を具体的に解説【無料インストールから】

Adobe XDからのコーディング方法を具体的に解説【無料インストールから】

Adobe XDのデザインデータを元にどうやってコーディングすればいいんだろう?

初めてデザインカンプからのコーディングをする人にとっては多少難易度が高いかと思います。

Web制作は、XDやPhotoshopなどのデザインデータを提供されて、それを元にコーディングを行うのが一般的。

最初は戸惑うこともあるかもしれませんが、慣れればサクサクできます。

本記事では、現役Webエンジニアの私がAdobe XDのインストール方法からコーディングする手順まで、画像を使いつつ解説していきます。

maipyon
maipyon

説明のために、以下の無料で配布しているXDカンプを例に紹介していきます!

練習用コーディングWAKABA

無料配布中のnoteはコチラ
気を付けるべきポイントとかも書いてます。

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

XDデータ

.xdで終わる、XDデータをAdobe XDで開いてコーディングしていく方法です。

xdのファイル

XDをインストールする必要があります。

メリットは複数ページを一度に俯瞰できること。

デメリットは、編集可能なので、元のデザインが崩れる可能性があるという事です。

URLカンプ

共有URLを元に、XDのソフトがなくてもデザインを開くことが可能です。

ブラウザで完結するのでやりやすいです。

実際に以下のURLを見てみましょう。

URL:https://xd.adobe.com/view/c22f3a39-5249-418a-58a1-ab5fe8ca7da6-b41e/
パスワード:Pyon-na-kotokara2022

この状態をお客さんに見せて、コメントを貰うなども可能です。

メリットは、編集ができないので元のデザインが崩れる心配がありません。

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

本記事では、両方解説

本記事では、XDデータからのコーディングおよびURLカンプからのコーディングの両方を解説していきます。

Adobe XDを無料インストールする方法

XDデータを見る際には、XDをインストールする必要があります。

maipyon
maipyon

URLカンプを見る人は必要ありませんが、全てのXDカンプが共有URLで公開されているとも限りませんので、入手しておきましょう。

まずは、Adobe公式サイトにてダウンロードしましょう。

有料版しかなくなったという声が多くあるのですが、以下の方法であれば無料で入手可能です。

公式サイトにて、下の方にあるスターターキットの部分の下側に小さく書かれている『XDを無料で入手』をクリックで無料プランでインストール可能です。(以下のURL)

Adobe XDの無料インストール方法
正直分かりづらい
Adobe IDを作成する必要アリ

初めてAdobe製品を利用する方はここで『Adobe ID』の作成が必要となります。

サイトの案内に従って作成していきましょう。

なお、仕様が変わったらしく、一度無料体験を始めて、無料体験を解約することでスタータープラン(永続無料)で使うことが出来ます。

体験版の解約方法も公式サイトの説明を掲載しておきますので、ご活用ください。

maipyon
maipyon

一度クレジットカードの登録が必要なのでめんどくさいですが、この方法しかないです…。

それではAdobe XDを使用してコーディングに必要なものを取得する方法を紹介します。

XDデータからコーディングする方法

xdのファイル

このようなファイルからXDデータを開いてコーディングする方法から解説していきます。

①まずは見やすく位置調整

まずは見やすいように位置調整をします。

XDの位置調整

Windows:ctrl + スクロールホイール で拡大・縮小

Mac:option + スクロールホイール で拡大・縮小

Windows・Mac:shift + スクロールホイール で左右の位置移動

②画像の取得

画像データを貰えるとは限りませんので、XD上からダウンロードします。

画像を選択した状態で、

Windows:ctrl + E

Mac: + E

で画像をダウンロード(書き出し)できます。

XDの画像の書き出し

形式や書き出しサイズを選べますが、写真はjpeg、背景透明画像はpng・・・といった具合に、最適なものを選びましょう。

③各要素の詳細確認

文章などのオブジェクトをクリックすることで、詳細を確認できます。

文字などのオブジェクトを選択します。

オブジェクトを選択

XDのサイドバーにそのオブジェクトに関する情報が表示されます。

xdのオブジェクトの情報を取得

フォントや色、影の付け方やオブジェクトの幅や高さを確認できます。

字間や行の高さは計算が必要

letter-spacingはXDのAV項目の数値 / 1,000 にemをつける で取得可能です。

上記画像の場合は、50 ÷ 1000 = 0.05emになります。

line-heightは XDの行の高さの項目の数値 / 文字サイズで取得可能です。

上記画像の場合は、35 / 42 = 0.83(単位ナシ)になりますので、line-height: 0.83;となります。

色の部分を選択すると、以下のように詳細情報を見ることができますので、活用してカラーコードなどを取得しましょう!

XDで色の詳細を確認

④余白の取得

最後に、余白やオブジェクト間の距離の取得方法についてです。

オブジェクトを選択した状態で、

Windows:Alt + マウスホバー で確認

Mac:option + マウスホバー で確認

となっています。

XDで余白の取得方法

URLカンプからコーディングする方法

続いて、URLカンプからのコーディングを解説します。

多少違う部分がありますが、個人的にはURLカンプのほうが見やすくて好きです。

【無料配布中のカンプ】
URL:https://xd.adobe.com/view/c22f3a39-5249-418a-58a1-ab5fe8ca7da6-b41e/
パスワード:Pyon-na-kotokara2022

①まずはスペックを表示

URLカンプのスペックを表示

初期状態ではコメントを記入するモードになっているので、下側のボタンを押してスペックを表示します。

この状態で、デザインカンプに関するコーディングに必要な情報が閲覧可能になります。

②画像の取得

画像の取得は簡単で、アセット内にある画像を選択して、右下のダウンロードをクリックで完了します。

複数選択も可能です。

URLカンプの画像のDL

他にも、以下のように画像部分を直接クリックしてダウンロードすることも可能です。

URLカンプでの画像DL

③各要素の詳細確認

こちらも同様に、クリックした要素の色やフォントなどを取得可能です。

URLカンプでの各要素の詳細確認

文字色はクリックでカラーコードをコピーできるなど、結構便利です。

また、CSSも出ていますが、あてになりません。

参考にできるのは、colorやletter-spacingなどで、別の場所を見れば分かることばかり。基本的に見なくてもOK。

④余白の取得

URLカンプでの余白の取得は簡単で、クリックしてから他の要素にホバーするだけ。

URLカンプでの余白の取得方法

正直、URLカンプの方がやりやすいですね。

XDからのコーディングは思ったより簡単!実際にやってみよう

XDからのコーディングは一度分かってしまえば各要素の取得方法も結構簡単です。

実際にやってみるのが早いと思いますので、ブラウザさえあればできるURLからのカンプでやってみるのがオススメです!

なお、コーディングまでの準備は『【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】』にて記載しています。

maipyon
maipyon

上記記事は模写コーディングのやり方について書いた記事ですが、いざコーディングし始めるまでの初期設定は同じですので、参考にしてみて下さい!

また、コーディングしたものをポートフォリオとして公開したいのであればサーバー上にアップロードする必要があります。

その方法については『ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】』に掲載していますので、合わせて確認してもらえたらと思います。