【Adobe XD】コーディングに適したデザインデータが作れる！現場で通じるスキルを磨こう

2022-11-242024-04-19

みなさん、自分のデザインデータに自信ありますか？

Web制作の際私はデザインのみ担当し、コーディングはコーダーさんにお願いしています。
なので、スムーズにコーディングできるデザインデータが作れているかいつも不安に感じていました。

サコ

Web制作にXDは最適なので、コーダーさんと連携するためにもいち早く使い方をマスターしたいですよね！

そんなとき出会ったのがこちらの本。

楽天で購入

現場でAdobeXDを使っている人、これからWebデザインを学びたい人、XDの機能や現場のフローを知るのにおすすめな本です。

この記事はこんな人におすすめ

現場のWeb制作フローに沿って学べる

本書ではダウンロードしたサンプルサイトを作りながら、現場のWeb制作ワークフローに沿って学べます。
実際に手を動かしながらやるので、現場経験が浅い方にもかなり参考になります。

サコ

私はAdobe XDを使い始めて半年くらいのときに購入しました！

ディレクターが用意する「プランニングシート（要件定義）」も掲載されているので、単なるデザイントレースにならず、現場のフローに近い形で制作できます。

これらを詳しい手順で解説してくれています。

今回はオーガニックコスメ「AKARI organic」の商品紹介サイトの制作という架空の案件を想定して進められます。

こちらは、Webデザインでよく使われる形のヘッダー・フッター・ギャラリー・CTAなどを含むシンプルなサイトです。
なので、実際の案件でも本書で学んだことがそのまま使えます。

きれいめのデザインで用意された写真も高品質だったので、形になっていくとどんどん楽しくなっていきますよ！

XDにはWeb制作を効率化する機能がたくさんあります。
これまでPhotoshopでデザインしてきた人からすると驚くほど作業がスピーディーになります！

本書ではサンプルサイトを作りながら下記の機能について詳しく学べます。

リピートグリッド	要素の繰り返しを効率よく行える機能
コンポーネント	ヘッダーやフッター、ボタン、見出しなど、Webページ全体で繰り返して使うデザイン要素を管理できる機能
デバイスプレビュー	デザインやプロトタイプをUSB経由でスマホでリアルタイムに確認できる機能
プロトタイプ	複数のアートボードを接続し、ユーザーがWebページ上でどのような操作をするか体験できる機能
自動アニメーション	マイクロインタラクションのプロトタイプが作成できる
デザインスペック	デザイナーと開発者のコミュニケーションを強化する機能
プラグイン	Adobe製、サードパーティ製のプラグインが用意されており、機能拡張できる