模写修行メディア

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

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

この記事をシェア:

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

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

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

この記事ではXDで作った簡単なデザインを、画像の書き出しや必要な情報を調べながら、実際の仕事と同じようにコーディングします。


🚀 記事構成

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

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

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

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

作るデザインのスクリーンショット

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

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

※ デザインデータは16MBほどあります

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

書き出したい画像をクリックしているスクリーンショット

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

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

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

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

PCショートカットキー
Mac⌘ を押しながらクリック
WindowsCtrl を押しながらクリック

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

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

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

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

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

1 枚ずつ書き出す方法

書き出したい画像をクリックしているスクリーンショット
PCショートカットキー
Mac⌘+E
WindowsCtrl+E

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

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

項目選択項目
フォーマットjpg
画質100%
書き出し先デザイン
デザイン倍率1x

今回のデザインの場合、赤枠の選択は上の表のようにします。各項目について、簡単に解説します。


💡 フォーマット

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

  • 写真はjpg
  • イラストや図形はpngかsvg
  • 簡単なイラストやロゴやアイコンはsvg

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

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


💡 画質

画質は100%だとサイズが大きくなるので、調整するケースもあるようです。

個人的には100%で書き出して、タスクランナーで圧縮する方法でやっています。

圧縮は『jpg 圧縮』などで調べると、ブラウザ上で圧縮できるサイトや圧縮方法を紹介しているサイトが見つかります。


💡 書き出し先

デザインを確認する場合はデザインを選択しますが、コーディングで使う際はWebを選択します。

Webを選択すると、等倍と2倍のサイズの画像が書き出されます。2倍は高解像度ディスプレイに対応するために使います。

iOSやAndroidはスマホアプリ開発の時に使います。試しに選択して書き出して違いを見てみると良いです。


💡 デザイン倍率

デザイン倍率は、アートボードを等倍にしている場合は、1xを選択します。

例えば、SPのデザインを360px、PCのデザインを1366pxなど実際の表示サイズで作っている場合は1xを選択します。

SPのデザインを720px、PCのデザインを2732pxなど、あえて2倍のサイズで作っている場合は、2xを選択します。(デザインを2倍のサイズで作るのは昔の風習で、今は2倍で作る必要はありません。

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

書き出したい画像を選択しているスクリーンショット

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

Macの場合、⌃+⌘+Eを使っても選択できます。(公式サイトに記載がなかったので、Windows はわかりません...)

PCショートカットキー
Mac⇧+⌘+E
WindowsCtrl+Shift+E

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

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

デバイス画像の横幅
SP324px
PC300px

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

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

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

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

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

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

今回は練習なのでそこまではやらず、SPの324pxの画像を書き出して、2倍サイズのみ使うことにします。

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

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

動画で見る方がわかりやすいので、動画を作りました。10秒ちょっとの短い動画なので、再生してみてください。

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

テキスト情報を調べる方法

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

テキスト情報を調べる方法

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

letter-spacingの計算
letter-spacing = ④ の値 / 1000
ex )
500 / 1000 = 0.2
letter-spacing: 0.2em;
line-heightの計算
line-height = ⑤ の値 / ② の値
ex )
36 / 20 = 1.8
line-height: 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になっています。これはbodyfont-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を使っています。Flexboxを使う場合、ネガティブマージンを使った方法がおすすめです。

Flexbox とネガティブマージンでカード型レイアウトを実装する方法!

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

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

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

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

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

paddingborder-radiusの情報は上の箇所から知ることができます。

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

コードはこのようになります。line-heightbodyで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;
}

コードはこのようになります。font-familyはbodyに指定しているので、特に書く必要はありません。


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

最後にカテゴリラベルと更新日を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 はこちらから入れる事ができます。


PerfectPixelを使って比較

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

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

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の機能は、今回作るページに必要なもののみです。

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

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

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

XDからコーディングする練習には「模写修行」を!

模写修行

コーディングの練習が出来るサービス「模写修行」を作りました。

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行はこんな方におすすめ!

  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 基礎学習を終えて実践的な経験を積みたい
  • 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
  • 現役で制作をやっている人のコードを見たい

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材