こんにちは！ノマドワーカーのちづみ(@098ra0209)です！
今はカンボジアに住みながら、お仕事はウェブデザイン多めのウェブ制作をしています。
デザインは主にAdobeのxdを使っているのですが、デザイナーはもちろん、コーダーにとってもかなり親切設計なので、とてもおすすめです。その魅力をコーダー目線で具体的に紹介します。
- コーダーはXDを持っていなくても大丈夫！！
- コーディングに使う情報がとにかくわかりやすい！
- 実際どんなデータなのかURLから確認できるよ！
XDの簡単な説明
XDに使用することで、デザイナーはより早く、正確に、高い品質で作業できます。インタラクティブなプロトタイプをシームレスに反映し、Windows、Mac、iOS、Androidなどの様々なデバイスやプラットフォーム上でチームのメンバーやレビュー担当者と共有できるようになります。
（公式より）
XDはとにかくサクサク作れてサクサク共有できることに特化しています。クロワッサン並にサクサクしています。
とにかく共有させてあれこれミーティングしながら作りたい時にめちゃ便利なんですよね。デザイン案は基本変更や要望に合わせて変更していくのがデフォルトなので、パパッと作れてフィードバックもしやすい点でリリースから結構人気が上がってきています。
コーダーにとってのXDの便利な点
と言うのをちょくちょく聞くのですが、私はむしろやりやすいと思っています。そもそも、共有しやすいことに特化しているので、デザイナーとコーダーの情報共有にも特化して作られています。
具体的にどんな点が便利なのか説明していきます！
コーダーはXDを持っていなくても大丈夫！
正直これが一番デカイですね。デザインデータはイラストレーターやフォトショップが主流ですが、ソフトを持っていないとコーディングできなかったり、データが重かったりするんですよね。画像の書き出しはもちろんソフトを持っていないとできない点からも、ソフトを持つことが基本となるのですが、
XDはデザインデータをウェブ上に共有できるので、XDのソフトを持っていなくても、urlを共有することでネット環境があれば基本コーディングできます。
またXDは2018年のアップデートにより、プラウザ上に共有されたデザインデータから画像を書き出せるようになりました！
つつついにXDがプラウザ上のデザインスペックからアセット画像書き出しできるようになっとる〜〜／(^o^)＼鬼便利〜〜マスクで形作ったやつとかもそのままいける〜〜
もちろんコーダーはXD持ってなくても大丈夫なので、これはすごい。しかし画質がちょい荒くなる感じかな？🤔 pic.twitter.com/r3ejMioBxn
— ちづみ🇰🇭ノマド女子 (@098ra0209) 2018年8月31日
個人的にこれ結構革命だと思っています。プラウザ上から画像落とせちゃうんですもん。
基本クリックで細かい情報がわかる。
XDはクリックだけでカラーやサイズがわかります。表示もわかりやすく、コーダーは迷うことなく作業できるかと思います。とても使いやすいです。
例えば画像内にある「インテリアの教科書」の部分をクリックすると、
以下のように一瞬で情報が出てきます。
テキストのコピペが一瞬！
コンテンツに出てくるテキストをポチッとするだけで勝手にコピペがされます。選択する手間が省けます。ほんの少しの手間の削減なのですが、テキストコピーは結構頻繁に使うので嬉しいですよね〜〜
と言っても百聞は一見にきかずなので、私の実際に作ったデザインデータを貼っておくので、実際どんな感じなのか参考にして見てくださいね( ´ ▽ ` )！
XDを学ぶなら
XDに興味がある。コーダーだけどXDでデザインもかじってみたい。XDでデザインを作れるようになりたい。
という方におすすめなのがUdemyの誰でもかんたんに学べるAdobe XD入門講座コースです。わかりやすかったですよ！( ^ω^ )
これ一回受けるだけで充分わかります。XD自体本当にわかりやすく作られているので、倍速で見ながら手を動かせば半日もあれば基本操作はマスターできるかと思います。(｀・∀・´)
XDのコーディングを体験するなら
XDのコーディングを体験したいなら、ぜひ私の出しているnoteをご活用ください！
コーディング実績の掲載可能、入門、初級、中級をnoteで販売していますのでよろしければみていってくださいね！
累計500部以上売れているコーディング専用noteはこちら！↓
