・これからXDを覚えたい人
・XD初心者の人
・新人WEBデザイナーの人
当時のXDのレベル
まず最初に、私のXDのレベルから紹介します。
XDの基本的な操作はAdobeのチュートリアルで覚えて、そのほかはCocoda Trainingという学習サービスで学びました。学習した後にXDでLPを作ったのですが、当時はまだ実務経験が少なく、基礎レベルでした。
【XDは基礎レベル】
- ワイヤーフレームの制作は経験済み
- ボタンやフッターなど基礎的なデザインは経験済み
- 動きのあるアニメーションは勉強済み
- プラグインは導入済み
本を買ったきっかけ
2023年の夏頃、お仕事で某女性アーティストのモバイルサイトを作ることになりました。
Cocoda Trainingではアプリのデザインについては学べたのですが、実際に現場で使うコンポーネント置き場（デザインシステム）やコーディングのための画像の書き出しについては全く知らなかったので、勉強のために「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」を買うことにしました。
本の内容
この本では、オーガニックコスメ「AKARI organic」の商品紹介サイトの制作という架空の案件をこなしながら、XDの操作やデザインが学べます。
ワイヤーフレームの作り方から、デザインカンプ制作、コンポ―ネントの管理、画面遷移の設計、プロトタイプ制作と共有、デザインスペックの共有、UI設計やプラグイン活用まで幅広く解説しています。
私はXDの基本的な操作内容を習得していたので、じっくり読むというよりは、復習をかねてパラパラッと読み進める感じでした。
良かったところ
この本の良かったところを3つ紹介します。
①デザインデータがダウンロードできる
本を買うと、デザインデータをダウンロードして確認することができます。私の場合フリーランスで活動していることもあり、普段他のデザイナーのデザインデータを見ることがあまり無いので勉強になりました。
特にコンポーネント置き場（デザインシステム）はこれといったルールや正解も無いため、どう配置するか初心者は迷いがちですが、参考になりました。
②コーディングの準備の解説がある
コーディングの準備について触れていない本やYouTubeもありますが、この本ではコーディングの準備について詳しく解説していました。実務でコーディング用の画像を書き出す作業は発生しなかったのですが、「画像を書き出す場合はこうする」という知識を頭に入れておくのも大事だと思います。
また、Retinaディスプレイについてよく分からなかったのですが、この本ではRetinaディスプレイに対応した画像の書き出しについて詳しく解説していました。
③XDに関する細かい情報がたくさん載っている
補足情報みたいな感じで、XDに関する細かい情報がたくさん載っていました。
本の内容と違ったところ
この本では、Illustratorからアイコンを読みこんで配置する項目があったのですが、WEB系の制作会社ではFont Awesomeを必ず使っていました。実際はFont Awesomeが一般的みたいです。（2024年現在）
そのほか購入したXDの本
「初心者からちゃんとしたプロになる Adobe XD基礎入門」という本も購入しました。
基本的な内容は「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」と大体同じで、こちらは架空のショッピングサイトを制作しながらXDを学ぶことができます。
この本では
・ディレクター視点で使う
・デザイナー視点で使う
・エンジニア視点で使う
といったように、職業ごとに各章が分かれているので、デザイナー以外のディレクターやエンジニアも読みやすく分かりやすい本だと思います。特にエンジニア向けの内容が「Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル」と比べてかなりのページがあるので、デザイン＋コーディングの両方やるデザイナーはこちらの本が良いかもしれません。
このほかXDやデザインに関する良さそうな本があれば、また紹介したいと思います！
グラフィックデザイナー/WEBデザイナーのアマノです。
今回は、高評価のXDの本の感想を書きたいと思います。