AdobeXDデータのコーディングってどんな感じ?便利な点をまとめたよ【XDテンプレデータあり】

 

 

こんにちは!ノマドワーカーのちづみ(@098ra0209)です!

今はカンボジアに住みながら、お仕事はウェブデザイン多めのウェブ制作をしています。

デザインは主にAdobeのxdを使っているのですが、デザイナーはもちろん、コーダーにとってもかなり親切設計なので、とてもおすすめです。その魅力をコーダー目線で具体的に紹介します。

 

ちづみ
さらに2018年8月のアップデートでプラウザ上のデザインスペックから画像の書き出しができるようになったんだよ!!
この記事をざっくり言うと
  1. コーダーはXDを持っていなくても大丈夫!!
  2. コーディングに使う情報がとにかくわかりやすい!
  3. 実際どんなデータなのかURLから確認できるよ!

 

XDの簡単な説明

公式ページ

XDに使用することで、デザイナーはより早く、正確に、高い品質で作業できます。インタラクティブなプロトタイプをシームレスに反映し、Windows、Mac、iOS、Androidなどの様々なデバイスやプラットフォーム上でチームのメンバーやレビュー担当者と共有できるようになります。

(公式より)

XDはとにかくサクサク作れてサクサク共有できることに特化しています。クロワッサン並にサクサクしています。

とにかく共有させてあれこれミーティングしながら作りたい時にめちゃ便利なんですよね。デザイン案は基本変更や要望に合わせて変更していくのがデフォルトなので、パパッと作れてフィードバックもしやすい点でリリースから結構人気が上がってきています。

 

コーダーにとってのXDの便利な点

 

ねこ
XDいじったことないんだけど、XDデータからコーディングするのって難しいのかにゃ〜?

と言うのをちょくちょく聞くのですが、私はむしろやりやすいと思っています。そもそも、共有しやすいことに特化しているので、デザイナーとコーダーの情報共有にも特化して作られています。

具体的にどんな点が便利なのか説明していきます!

 

コーダーはXDを持っていなくても大丈夫!

 

正直これが一番デカイですね。

デザインデータはイラストレーターやフォトショップが主流ですが、ソフトを持っていないとコーディングできなかったり、データが重かったりするんですよね。画像の書き出しはもちろんソフトを持っていないとできない点からも、ソフトを持つことが基本となるのですが、

XDはデザインデータをウェブ上に共有できるので、XDのソフトを持っていなくても、urlを共有することでネット環境があれば基本コーディングできます。

またXDは2018年のアップデートにより、プラウザ上に共有されたデザインデータから画像を書き出せるようになりました!

個人的にこれ結構革命だと思っています。プラウザ上から画像落とせちゃうんですもん。

 

ちづみ
めちゃ便利やないかい!!

 

基本クリックで細かい情報がわかる。

XDはクリックだけでカラーやサイズがわかります。表示もわかりやすく、コーダーは迷うことなく作業できるかと思います。とても使いやすいです。

例えば画像内にある「インテリアの教科書」の部分をクリックすると、

以下のように一瞬で情報が出てきます。

 

テキストのコピペが一瞬!

 

コンテンツに出てくるテキストをポチッとするだけで勝手にコピペがされます。選択する手間が省けます。ほんの少しの手間の削減なのですが、テキストコピーは結構頻繁に使うので嬉しいですよね〜〜

 

 

と言っても百聞は一見にきかずなので、私の実際に作ったデザインデータを貼っておくので、実際どんな感じなのか参考にして見てくださいね( ´ ▽ ` )!

 

XDを学ぶなら

 

ねこ
XDを学びたいけど、どれがおすすめかにゃ?

XDに興味がある。コーダーだけどXDでデザインもかじってみたい。XDでデザインを作れるようになりたい。

という方におすすめなのがUdemyの誰でもかんたんに学べるAdobe XD入門講座コースです。わかりやすかったですよ!( ^ω^ )

これ一回受けるだけで充分わかります。XD自体本当にわかりやすく作られているので、倍速で見ながら手を動かせば半日もあれば基本操作はマスターできるかと思います。(`・∀・´)