Adobe XDのデザインカンプからコーディングするには？画像付きで分かりやすく解説

登場以来、多くのWebクリエイターからの支持を集めるAdobe XD。

Adobe XDはPhotoshopやIllustratorに比べると操作が簡単なので、専業Webデザイナー以外の方も使うこともあると思います。
状況によってはAdobe XDで作られたデザインカンプを基にしてコーディングする機会もありますが、その際にコーディングに必要な情報を取得する必要があります。

そこで今回は、Adobe XDのデザインカンプからコーディングする際に必要な値や画像を取得する方法を解説します。

Adobe XDでできることやメリット

Adobe XDは、Webサイト制作やアプリケーション開発を始めるときに使われるデザインツール。
Adobe XDはIllustratorやPhotoshopでお馴染みのAdobe社が開発しました。Adobe XDはデザイン作成だけではなくさまざまな機能が搭載されています。

プロトタイプ作成

Adobe XDはプロトタイプ作成もできます。

操作方法もページとページを線で結ぶだけで、あっという間にリンクが完成します。
単純にページ間遷移ではなく、アニメーションを伴うプロトタイプも作成できることも魅力。
自動アニメーションを使うと、クールなプロトタイプが簡単に完成します。

共有

Adobe XDは、クライアントやチーム間とのやりとりもスムーズです。

作成されたプロトタイプはURLで共有できますし、共有する時にはパスワードも設定できます。
共有プロトタイプの確認ページではコメントを残す機能もあるので、「どの箇所にどんな修正をして欲しいか」が即座に共有できます。

Adobe XDのメリット

Adobe XDのメリットを以下にまとめました。

Adobe XDは用途に合わせたさまざまなプランがあるので、Adobe XD公式サイトなどから申し込みましょう。

文字情報取得

Adobe XDで制作されたデザインカンプからのコーディングは、以下の文字情報を確認します。

選択ツールで対象のテキストを選択

選択ツールを使ってコーディングしたい文字箇所を選択しましょう。選択要素がグループ化されていたらダブルクリックでテキストの選択ができます。

サイドバーの「テキストプロパティ」「アピアランス」を確認

ここで確認するのは以下の情報です。

ここで確認した情報をCSSに反映すると完了です。

color箇所をダブルクリックするとRGB値が確認できる

「Hex」を選択するとカラーコードが確認できます。

画像の書き出し

ここでは、デザインデータからコーディングで必要な画像を書き出す方法について解説します。
以下の3つが主に書き出す画像です。

フォントは画像として書き出さないで、できる限りコーディングで実装するようにしましょう
※Google検索エンジンが画像の文字情報が読み取れない上に、SEOの観点からもあまり良くないため。

「ファイル」⇒「書き出し」⇒「選択したオブジェクト..」を選択

「command」+Eのショートカットでも書き出せます。
※Windowsの場合は「Ctrl」＋「E」

各要素を選択し書き出しをクリック

この順番で書き出すと、「ファイル名@2x.拡張子」で2倍書き出し用の画像が一緒に書き出されます※画質が気になる場所は2倍書き出し用の画像ファイルを利用すれば安心です。

Adobe XDは「カラーマネジメント非対応」なので、書き出した画像とXDで表示されている画像の色合いが若干異なる場合があります。メインビジュアルなどの大事な画像の書き出しは、Photoshopなどの別ツールで行うと安心です。

要素情報を取得

ここでは、高さや幅などの要素情報の取得方法を解説します。

取得する要素情報は以下の通りです。

これらの要素が取得できればコーディングがスムーズに進みます。

選択ツールで対象のオブジェクトを選択

選択ツールでコーディングしたい対象オブジェクトを選択します。

右側のメニューで要素情報が確認できる

右側に表示されるメニューで、各要素情報が確認できます。
確認できる要素情報は以下の通りです。

横幅(width)と縦幅(height)

境界線と背景色

幅

対象のオブジェクトを選択した状態でoptionキー(WindowsはAltキー)を押しながら他のオブジェクトにホバーすれば、ピンク文字で余白の値が表示されます。

影

シャドウを選択すると要素の影情報も取得できます※要素情報があれば左から「X: x軸距離・Y: y軸距離B:ぼかし距離」と表示。

透過

ここでは要素の不透明度が確認できます。100%では不透明度１で全く透過していない状態を表しています。
※80%の場合CSSではopacity: 0.8;で表現

知っておくと便利なAdobe XDからのコーディング方法

ここでは、知っておくと便利なAdobe XDからのコーディング方法を幾つか解説します。

デザイン共有機能

Adobe XDは、デザインデータ共有(公開リンク)できる機能も搭載されています。

共有されたデザインデータはオンライン上で確認とコメントが付けられます。
コーディングの仕様(ホバーの動作やアニメーションなど)に関して制作側やデザイナーとのコミュニケーションが取りやすくなる効果があるので、使ってみることをお勧めします。

リピートグリッド

リピートグリッドは、要素の繰り返しが一回のドラッグで完結する機能です。

Web制作では何らかの要素が連続して並ぶ機会が多いですが、リピートグリッドはそうした時に役立つ機能です。
デザインを1つ作成してリピートグリッドをオンすると、増やしたい方向にドラッグするだけで希望の数だけ要素が作り出されていきます。

アセット機能

アセット機能は、テキストスタイルやボタンなどが管理できる機能です。

繰り返して使う要素は一度アセット登録しておくと、簡単に取り出せる上に編集もできます。
繰り返し使う要素が大量に増えても検索バーで簡単に検索できるので便利です。

まとめ

今回はAdobe XDで受け取ったデザインカンプをコーディングする方法を解説しました。

Adobe XDはPhotoshopより操作方法が簡単です。Adobe XDは不定期で行なわれるアップデートで機能がどんどん追加されて使いやすくなっています。

今回の記事をキッカケにして、Adobe XDで作られたデザインカンプでもコーディングできるよう学んではいかがでしょうか？