Adobe XDの使い方が、これでよく分かる！WebページのUIを設計するワークフローに沿って学べる解説書

Adobe XDを使用してワイヤーフレーム、プロトタイプ、デザインカンプなど、WebページのUIを設計するワークフローに沿って学べる解説書を紹介します。

ワイヤーフレームを作るにあたっての準備から、実際の作り方、コンポーネント管理、画面遷移設計、プロトタイプ共有、デザインスペック共有など、Adobe XDの実践的な使い方を基礎からしっかり学べます。
Adobe XDの解説書を探していた人には、間違いのない決定版の一冊です！

本書はWeb制作に携わるすべての人、ディレクター、デザイナー、コーダーにお勧めの本です。Adobe XDをまだ使用したことがない、すでに使用しているけどもっと使いこなしたい、そんな人にぴったりの一冊です。

発売されて間もないのに、Amazonで☆5レビューが早くもかなりついています。

Kindle版も発売されています！

• Adobe XDではじめるWebデザイン＆プロトタイピング Kindle版

そんな紙面をキャプチャで少しだけ紹介します。

本書はAdobe XDユーザーグループのメンバーであり、大学の講師でもあり、UIデザイナーでもある著者が勉強会などで数年かけて集めたコツやノウハウが詰め込まれたものです。ワイヤーフレーム制作、デザイン制作、プロトタイプ制作、共有、画像書き出しまで、実際のワークフローに近い形で、Adobe XDの使用方法を学べます。

本書は10章構成で、1章はAdobe XDの基本情報とインストール・環境設定です。すでに使用している人も「フォント環境を整える」など、この機会に見直してみるとよいと思います。

2章から制作が始まります。架空のサイトをモデルとしてワイヤーフレームを制作します。本書の大きな特徴は、図が多く、解説が詳しいことです。ワイヤーフレームの完成形をぽんと見せて、たんたんと進めるだけでなく、そのワイヤーフレームの準備段階から本書では取り組みます。

解説の詳しさは、全ページに渡ります。ページの右側ピンク色のラベルはメモで、補足となる説明やヒントや操作のこつが充実しています。

もちろん、ページの解説も非常に詳しく、ステップごとに手順や操作方法が細かく画像入りで説明されており、操作の目的なども解分かるので、Adobe XDの作業に戸惑うことはないと思います。

ワイヤーフレームが完了したら、3章ではスマホ版のデザインカンプを制作します。Adobe XDには便利な機能がたくさんあり、実際に手を動かしながら学べます。

本書で使用しているファイルは、サポートサイトから無料でダウンロードできます。ただし、学習用途のみ利用可です。

トップページが完成したので、4章では下層ページ（コンセプト・一覧・プロダクト・よくあるご質問・店舗情報）を作成します。

5章ではプロトタイプ、Adobe XDではインタラクティブなプロトタイプを簡単に作成できます。ページ遷移させるリンク、ボタンやナビゲーションのアニメーションなど、コードを書かずに簡単に設定できます。

完成したプロトタイプの共有、デザインスペックの共有が簡単にできるのも、Adobe XDの大きな特徴です。チームのメンバーやクライアントと共有できます。

7章ではこれまで作成したスマホ版をベースに、デスクトップ版を制作します。

デザインカンプが完成したので、8章ではコーディングです。デザインカンプの書き出し、画像の書き出し、デザインスペックなど、Adobe XDは非常に便利なソフトウェアです。

Adobe XDの画像書き出しは、.png, .jpgだけでなく、.svgやRetinaディスプレイに対応した書き出しにも対応しています。

これで一通りの作業が完了です。
9章では、Adobe XDの自動アニメーションについてその仕組みと作り方について解説されています。動きのあるUIの事例がたくさん取り上げられており、実装方法も詳しく解説されています。

最後の10章では、Adobe XD用の便利なプラグインの紹介。2020年現在、200以上のプラグインがリリースされていますが、その中から厳選して紹介されています。

付録のキーボードショットカット一覧もありがたいですね！
WindowsとmacOSに対応しています。

Adobe XDではじめるWebデザイン＆プロトタイピングの目次

1. Adobe XDの基本と制作準備

   Adobe XDが必要になった背景

   Adobe XDの特徴

   インストールと環境設定

   フォント環境を整える

2. ワイヤーフレームの制作

   制作の準備をする

   トップページのワイヤーフレームを作成する

   コンポーネントについて理解する

   トップページのワイヤーフレームを完成させる

   下層ページのワイヤーフレームを完成させる

3. スマートフォン版デザインカンプの制作（1）トップページ

   共通パーツを作成する

   トップページデザインの作成

4. スマートフォン版デザインカンプの制作（2）下層ページ

   下層ページ共通デザインの作成

   コンセプトページの作成

   製品一覧ページの作成

   敏感肌用化粧水ページの作成

   よくあるご質問ページの作成

   店舗情報ページの作成

   「オンラインショップ」セクションの作成

   メニューページの作成

5. インタラクティブ・プロトタイプの制作

   プロトタイプモードに切り替えて作業する

   リンクを設定する

   共通部分のリンクの設定

   メニューページのプロトタイプ

6. プロトタイプとデザインスペックの共有

   プロトタイプを共有する

   デザインスペックを共有する

7. デスクトップ版デザインカンプの制作

   デスクトップ版を作成する準備

   デスクトップ版トップページを作成する

   下層ページの共通部分を作成する

   下層ページを作成する

8. コーディングの準備と画像の書き出し

   コーディングの準備

   差し替え作業をする

9. 動きのあるUIの制作

   自動アニメーションの基本

   スクロールダウンアイコン

   開閉式のアコーディオンメニュー

   ボタンホバー時のアニメーション

   アンカーリンク

10. プラグインの活用

    プラグインの使い方

    プラグインの紹介

Adoe XDはUIデザインに特化されたソフトウェアで、本書は実際のワークフローに沿ってAdobe XDの機能を存分に使用して制作手順を学べます。最近ではディレクターがAdobe XDでワイヤーフレーム作成して、デザイナーがそのファイルを元にデザイン作業に入るというフローも増えてきました。そして、コーダーはAdobe XDのデザインスペックで効率よくコーディング作業ができます。

献本の御礼

最後に、献本いただいた著者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス