Adobe XDからコーディングする方法を丁寧に解説！ピクセルパーフェクトする方法も紹介！

実務でコーディングをする際は、XDなどのデザインツールで作ったデザインをもらうことがほとんどです。

• 画像を書き出す
• カラーやフォントを調べる
• 余白などのサイズを測る

例えば、上の作業は、基本的にはコーダーが行います。

この記事ではXDで作った簡単なデザインを、実際の仕事と同じようにコーディングします。

XDを使用するには、Adobeの契約が必要です。現在はXD単体で契約することができません。XDを使うには、コンプリートプラン(6480円/月)の契約が必要です。

ただし、デジハリのAdobeマスター講座(39,980円)を受講すると、1年間無料でコンプリートプランを使用できます。実質、半額程度でコンプリートプランが使用できます。

下記のサイトが詳しく解説しているので、興味がある方は見てみてください。

• 既に契約してる方：約4万円お得！デジハリ版Adobe CCに乗り換えて、安く利用する方法
• 新規で契約する方：デジハリ経由でAdobe CCコンプリートプランを安く購入する方法

Figmaからコーディングする方法は、下記の記事で紹介しています。

Figmaからコーディングする方法を丁寧に解説！

---

🚀 記事構成

1. 【基礎編】XDの基本的な操作方法を紹介
2. 【実践編】実際にコーディングしてみる

この記事は、基礎編と実践編の2部構成にしています。基礎編では実践編で使うXDの機能に絞って紹介します。

デザインデータとコードはダウンロード出来るようにしたので、ぜひ一緒に手を動かしてみてください。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

デザインデータのダウンロード

今回はこのようなカード型のレイアウトを作ります。

記事の目的は、XDから情報を調べて、コーディングすることなので、HTML・CSS の詳細な解説はしません。

👇 デザインとコード

【基礎編】オブジェクトの選択方法

XDは画像やテキストなどのオブジェクトをグループ化することが出来ます。グループ化すると、画像の赤枠のように階層(レイヤー)化されます。

赤枠の部分はレイヤーパネルと呼びます。レイヤーが何層にも重なっています。

重なり合うレイヤーをクリックすると、1 回のクリックでは1番上のレイヤーが選択されます。ダブルクリックするとその下のレイヤー、そこでまたダブルクリックするとその下のレイヤー...といった具合に選択出来ます。

レイヤーが多いと、目的のオブジェクトへ辿り着くまでに、何度もダブルクリックする必要がありますが、ショートカットキーを使うと1回のクリックで選択できます。

XDには他にもたくさんのショートカットキーがあります。作業の効率化になるので、少しずつでも覚えることをおすすめします。

【基礎編】画像の書き出し方法

画像の書き出し方法は2つあります。

• 1枚ずつ書き出す方法
• 書き出す画像を全て選択して一気に書き出す方法

一気に書き出してコーディングを進め、書き出し忘れや漏れがあれば、その都度追加で書き出すと良いです。

1 枚ずつ書き出す方法

書き出したい画像を選択し、上のショートカットキーを押すと保存ができます。

画像名はデフォルトでレイヤー名が入ります。今回のデザインはレイヤーの整理をしていますが、デザイナーによっては整理しない方もいます。その場合は、レイヤーパネルはカオスな状態になってることが多いです。

書き出し時は、主に下記の項目を選択します。

• フォーマット
• 画質
• 書き出しサイズ

フォーマット

png / svg / pdf / jpgがあり、どのフォーマットで書き出すのが最適かは、その画像によります。

超ざっくりとした基準は、下記のようになります。

慣れてくると、画像を見ればどのフォーマットが最適か大体わかります。慣れないうちは複数のフォーマットで書き出して、サイズの比較をしてみると良いです。

画質

jpgで書き出す際は、画質を選択することができます。

画質は100%だとサイズが大きくなるので、調整しても良いです。ただ、ここでは調整せずに下記の方法を取っている方も多いです。

• 別途ツールを使って調整
• タスクランナーで自動で調整

『jpg 圧縮』などで調べると、ブラウザ上で圧縮できるサイトが見つかります。

タスクランナーで圧縮し、劣化が大きい画像に関してで、別途ツールを使ってプレビューしながら調整するのが、1番効率良いです。

書き出しサイズ

pngかjpgで書き出す際は、書き出しサイズを選択できます。

『0.5x / 1x / ... / 4x / Web / iOS / Android』が選択できます。また、数字を直接入力することで、10Xなど好きなサイズで書き出しも可能です。

1xとは、デザインのサイズの1倍で書き出すという意味です。デザイン上で画像の横幅が1000pxで、書き出しサイズを1xにした場合、1000pxの画像が書き出されます。2xにすれば2000pxで書き出されます。

『Web / iOS / Android』を選択した場合は、複数枚の画像が書き出されます。例えば、Webであれば、1xと2xの2枚の画像が書き出されます。これは、高解像度ディスプレイに対応するためです。

書き出す画像を複数選択して一気に書き出す方法

複数選択して一気に書き出すには、画像を選択してから、赤い枠のチェックボックスかアイコンをクリックします。どちらでも同じです。

全て選択を終えたら、上のショートカットキーで書き出せます。

画像書き出し時に考えること

今回のデザインはサムネイル画像の横幅が上のようになっています。デザインはありませんが、画面幅500pxを境に500~767pxでは2カラムにします。

この場合、画像が1番大きく表示されるのは2カラムに切り替わる直前(画面幅499px)です。画面幅499pxで見ている場合、画像の横幅は449px(キリよく450pxとします)になります。

昨今のデバイスを考えると、450 × 3 = 1350pxの画像まで用意すれば、多くの高解像度ディスプレイにも対応できます。

• 450px
• 450 × 2 = 900px
• 450 × 3 = 1350px

画像の最適化をちゃんとやる場合、上記の3パターンくらいを用意して、srcset属性を使って最適な画像を出し分けることになります。

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説

今回は練習なので、画像の最適化はやりません。

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

【基礎編】オブジェクトの距離を測る方法

2つのオブジェクトの距離を測る方法は、1つをクリックした状態で、Macはoptionキーを押しながら、WindowsはAltキー押しながら、もう1つのオブジェクトの上にカーソルを移動させます。

【基礎編】テキスト情報を調べる方法

テキストを選択すると、赤枠の箇所でテキスト情報を見ることが出来ます。

各項目とCSSのプロパティの対応は上の図のようになっています。letter-spacingとline-heightの計算だけ少し注意が必要です。

ex )
500 / 1000 = 0.2em

ex )
36 / 20 = 1.8

【実践編】実際にコーディングしよう！

基礎編でやったことを使って、実際にコーディングしてみます。

Step0：画像を書き出そう

基礎編で紹介した方法で一気に書き出します。

Step1：HTMLを書こう

<div class="top">
    <div class="container">
        <div class="post">
            <article class="post-item">
                <a href="#" class="post-thumbnail">
                    <img src="img/thumbnail01@2x.jpg" width="648" height="324" alt="デザインからコーディングする方法を丁寧に解説！" />
                </a>

                <div class="post-meta">
                    <span class="post-category">プログラミング</span>
                    <time datetime="2020-12-20" class="post-date">2020/12/20</time>
                </div>

                <h2 class="post-title">
                    <a href="#">デザインからコーディングする方法を丁寧に解説！</a>
                </h2>
            </article>

            ...
            <!-- posts-itemが5個続く -->
        </div>
    </div>
</div>

まずHTMLを全て書いてしまいます。上のコードはbody内のコードです。どうコーディングするかイメージしながら、この時点でclassもつけてしまうと良いです。

Step2：リセットCSSとベーススタイルを書こう

/*!
reset
------------------------------
*/
html {
    color: #000;
    background: #fff;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,
q:after {
    content: "";
}

abbr,
acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    *font-size: 100%;
}

legend {
    color: #000;
}

main {
    display: block;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

/*!
base
------------------------------
*/
body {
    line-height: 1.8;
    font-size: 14px;
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

リセットCSSと全てのスタイルに共通で効かせたいベースのスタイルです。

今回は独自のリセットCSSを使っていますが、ハード系のリセットCSSをを使えば、おおよそ同じ見た目になると思います。

今回のデザインでは、日本語部分はヒラギノ角ゴシックで、日付の数字の部分はHelvetica Neueになっています。これはbodyのfont-familyを前提にしてデザインを作っているためです。なぜこのフォントにしたかは、参考サイトをご覧ください。

Step3：コンテナの距離やサイズを測ろう

• SPのコンテンツは324pxに収まる
• PCのコンテンツは960pxに収まる
• SPもPCも.postの上下に80pxの余白

XDで距離を測ると、今回のデザインは上のようになっていることがわかります。ただし、これだけではタブレットなど中間のサイズでどうすれば良いのかわかりません。

例えば、SPデザインは360pxのアートボードで作っているので、324pxの解釈は少なくとも2パターン考えられます。

• 360pxの90%で324px
• 左右の余白が18px

何を想定しているのかは、デザイナーに確認しましょう。

今回は、横幅90%に収まり、maxの幅は960pxということにします。

.top {
    padding: 80px 0;
}

.container {
    width: 90%;
    margin: 0 auto;
    max-width: 960px;
}

それらを踏まえると上のコードが必要になります。

Step4：カード型レイアウトを作ろう

各カードの間の余白を測ると、30pxだとわかります。

500px以上で2カラム、768px以上では3カラムにします。

.post {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
}

@media screen and (min-width: 500px) {
    .post {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 768px) {
    .post {
        grid-template-columns: repeat(3, 1fr);
    }
}

今回はgridを使っています。

Step5：カテゴリラベルと更新日を作ろう

カテゴリラベルの情報を調べる

• 背景色は#6cbbff
• 文字色は#fff
• フォントの太さは W6(bold)
• 内側の余白(padding)は上下に6px左右に16px
• フォントサイズは12px
• 角は12px丸める
• 行送りは36(=1.8)
• 行間は0

これらの情報がわかりました。

.post-category {
    background-color: #6cbbff;
    color: #fff;
    font-weight: bold;
    line-height: 1;
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 100vh;
}

コードはこのようになります。line-heightはbodyで1.8にしているので、上書きする必要があります。また、border-radiusは12pxにしても良いですが、フォントサイズやpaddingが変更されても良いように100vhにしてあります。

font-familyはbodyに指定しているので、特に書く必要はありません。

更新日の情報を調べる

• 文字色は#999
• フォントサイズは 12px
• 行送りは 36(=1.8)
• 行間は 0

カテゴリラベルと同じように、更新日の情報も調べます。

.post-date {
    color: #999;
    line-height: 1;
    font-size: 12px;
}

コードはこのようになります。

カテゴリラベルと更新日を横並び

最後にカテゴリラベルと更新日をFlexboxを使って横並びにします。

.post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

余白の16pxの測り方は既に説明した通りです。

Step6：タイトルを作ろう

• 文字色は#333
• フォントの太さは W6(bold)
• フォントサイズは 20px
• 上の余白は 16px
• 行送りは 36(=1.8)
• 行間は 0

これらの情報がわかりました。

.post-title {
    margin-top: 16px;
    font-weight: bold;
    font-size: 20px;
}

コードはこのようになります。

【実践編】デザインとwebページを比較してみよう！

出来上がったwebページとデザインを比較してみます。

PerfectPixelというクロムの拡張機能を使うと、デザインとwebページを重ねて比較することができます。PerfectPixel はこちらから入れる事ができます。

---

重ねて比較するするとこれだけズレています。

余白やサイズをXDの通りにしたのにズレてしまうのは、XDの行送りとwebのline-heightの仕様の違いが原因です。

XDの行送りとwebのline-heightは上の図のような違いがあります。webでは1行に対して、上下にスペースが入ります。

従ってこのスペース分調整しないと、ピッタリ合いません。

.post-title {
    margin-top: 8px;
    margin-bottom: -8px;
    font-weight: bold;
    font-size: 20px;
}

今回はタイトルの箇所だけ調整すれば良いので、上のようになります。

これでピッタリ合います。SCSSを使う場合は、擬似要素とmixinをうまく使うと毎回計算する手間が省けます。

line-height で出来るスペースを SCSS の mixin を使って効率よく消す方法

ただし、どんな環境でもピッタリ合わせることは不可能なので、どのデバイス基準でどこまで忠実に再現するかデザイナーと相談しましょう。

おすすめ書籍と動画紹介

この記事で紹介したXDの機能は、今回作るページに必要なもののみです。

実際はまだ多くの機能があります。デザイナーでなければ、それらを完璧に使いこなせる必要はありません。しかし、ある程度どんなことが出来るのかは知っておくと良いです。

最後におすすめの書籍と動画を紹介します。

Adobe XDではじめるWebデザイン プロトタイピング 一歩先行く現場のスキル

コーダーやフロントエンドエンジニアであれば、この書籍をしっかりやれば、OKだと思います。

独学に限界を感じていませんか？