宮野 聡美
Adobe XDデータを受け取ったら最初に確認していること
目次
はじめに
デザインデータを受け取ったら、すぐにコーディングを始めていませんか。
私も以前は、XDを開いたらそのまま実装に入っていました。ですが実務を重ねるうちに、「最初に少し確認しておけば防げた修正」が意外と多いことに気付きました。
途中で仕様に気付くと、
- レイアウトを組み直す
- CSS設計を変更する
- 数値を全体的に修正する
といった手戻りが発生します。
この記事では、Adobe XDのデータを受け取ったときに、コーディング前に私が確認しているポイントをまとめました。
作業時間を増やさないための“最初の数分チェック”として参考になれば嬉しいです。
① アートボードサイズを確認する
まず最初に見るのがアートボードのサイズです。
確認している内容：
- PCデザインの横幅（1440 / 1366 / 1280 など）
- SPデザインの基準幅（375 / 390 など）
- コンテンツ最大幅の想定
この情報は、後のCSS設計に直接影響します。
例えば、
- `vw`を使うか
- 固定幅コンテナにするか
- ブレークポイントをどこに置くか
といった判断がここで決まります。
最初に把握しておくだけで、途中の設計変更を避けやすくなります。
② フォント指定が実装可能か確認する
XD上では問題なく見えていても、実装時に同じ表示にならない原因の多くがフォントです。
チェックしている点：
- Webフォント指定があるか
- font-weight が存在するウェイトか
- OS依存フォントになっていないか
よくある例として、Mac環境で作られたデザインでは意図せず別フォント表示になることがあります。
この段階で確認しておくと、後から「文字の見た目が違う」というやり取りを減らせます。
③ 余白やサイズの数値をざっと見る
次に、余白やサイズの値を軽く確認します。
XDデータでは次のような数値が出てくることがあります。
- 23px
- 17px
- 29.5px
見た目では問題ありませんが、実装では基準ルールを決めておかないと管理が難しくなります。
特に小数点付きのサイズは、
- 中央揃えが微妙にズレる
- SVGサイズと合わない
- 計算が複雑になる
といった原因になることがあります。
この時点で「丸めるか」「そのまま使うか」を判断しておくと後が楽になります。
④ コンポーネントの再利用状況を見る
同じ見た目のパーツが、別オブジェクトとして作られていないかも確認します。
見るポイント：
- 同じカードUIが複数存在している
- ボタンのサイズ違いが混在している
- hover状態の指示があるか
ここを把握しておくと、
- 共通クラス化できる
- CSS設計が整理しやすい
- 修正範囲を予測できる
といったメリットがあります。
⑤ 画像とSVGの扱いを判断する
次に確認するのが画像素材の種類です。
チェック内容：
- 写真はjpgかpngか
- アイコンはSVGか画像か
- 同じアイコンが複数使われているか
アイコン系はSVGとして扱える場合が多く、`symbol`化して管理すると実装が楽になります。
ここで方針を決めておくと、後から画像差し替えをする手間が減ります。
⑥ レスポンシブの意図を読む
XDは静的なデザインですが、レスポンシブのヒントが含まれていることがあります。
確認している場所：
- グループ構造
- 要素の並び順
- リサイズ設定
- SP版との違い
単純に見た目を再現するだけでなく、「どう変化させたいデザインなのか」を読み取る意識で見ています。
これを先に理解しておくと、ブレークポイント設計が自然になります。
⑦ transformや座標ズレの有無を軽く確認
細かい部分ですが、SVGやオブジェクトに余計な座標情報が含まれていないかも見ています。
XD由来のデータでは、
- transformが付いている
- グループが多重構造になっている
- 中央配置なのに座標がずれている
といったケースがあります。
表示は問題なくても、アニメーションや位置調整の際に扱いづらくなることがあります。
必要に応じてIllustratorなどで整理する前提で把握しておくと安心です。
実際に行っているチェックフロー
現在は次の順番で確認しています。
- アートボードサイズ確認
- フォント確認
- 余白・サイズ数値チェック
- コンポーネント整理の把握
- 画像・SVG方針決定
- レスポンシブ意図の確認
- SVGや座標構造を軽く確認
全部合わせても数分程度ですが、この工程を入れるだけで後戻りがかなり減りました。
まとめ
Adobe XDのデータは、そのままでもコーディングを始められます。
ただ、最初に少しだけ全体を確認しておくことで、実装中の迷いや修正を大きく減らせます。
特別な分析をする必要はなく、「どんな設計で作られているか」を軽く把握するだけでも十分です。
コーディングを早く進めるためというより、途中で止まらないための準備として、最初のチェックを習慣にしています。
MIYANO SATOMI Front-end Engineer / 宮野 聡美
Our Signature Products, Born from Insight.
提案から生まれた、
MARBLEの代表プロダクト
お客様の課題を起点に、MARBLEが自ら構想し、
仕組みからデザイン、開発、運用まで一貫してつくり上げたプロダクト群です。
業務改善、運営効率化、新たな顧客体験の創出など、
企業の事業成長に直結する“実装された解決策”を形にしています。
-
01 入退場システム
Entry System
全国15店舗、会員数50万人以上のこども向けパークで稼働する入退場・決済・顧客管理システム。
受付の効率化と回転率の向上を実現し、運営データの一元管理を可能にしています。 -
02 自動配送システム
Delivery Routing
50台のトラック、年間350日の配送を最適化する自動ルート生成システム。
紙のFAXで届く約500件の配送情報をデジタル化し、最適ルートを自動で算出することで、大幅な業務効率化を実現しました。 -
03 会話型コマース連携
Auto Routing
ライブチャットでの接客からEC購入までを一つの導線でつなぐ会話型コマースシステム。
リアルタイムの対話で顧客の購買意欲を高め、高いコンバージョン率につながる仕組みを構築しています。