Adobe XDによるUIデザイン・ワイヤーフレームの制作方法を豊富な実例から学べる、UIデザイナーにお勧めの良書
Post on:2021年4月2日
Adobe XDでWebサイトを制作したい、ワイヤーフレームの作り方を具体的に知りたい、コミュニケーションやプレゼンテーションツールとして活用したい、基本操作から実務レベルの使い方まで詳しくていねいに解説した一冊を紹介します。
Adobe XDは、Webサイトやアプリの制作で欠かせないツールの1つとして多くのユーザーに支持されています。Adobeユーザー(登録無料)なら無料で利用でき、Webサイトやアプリの制作だけでなく、コラボレーションツールやコミュニケーションツールとしても活躍します。

本書は現役のデザイナー・ディレクター陣が執筆した、Adobe XDの解説書です。基本的な操作から、WebサイトやスマホアプリのさまざまなUIデザインやワイヤーフレームの作成方法、オンラインディスカッションやプレゼンテーションなどの活用方法まで、実務で役立つテクニックが詳しく解説されています。
学べるだけでなく、解説されているXDのファイルは、サポートサイトからダウンロードできます。ワイヤーフレームなどすべて、実際のプロジェクトで利用できます。
Kindle版も発売されています!
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書はAdobe XDを初めて触れる人でも大丈夫、Adobe XDで何ができるのか、どう便利なのか、基本的な操作、環境の構築方法からやさしく解説されています。
Adobeのアカウント(登録無料)があれば、Adobe XDは無料プランもあるので、単体で無料で利用できます。

本書は7章構成で、1章は準備、2章は基本操作です。基本的な操作は他のAdobeツールと同じですが、Adobe XD独自の操作もあるので目を通しておきましょう。

3章からいよいよ制作、Adobe XDで動くWebサイトのプロトタイプをUIパーツごとに制作します。

まずは、現在位置機能付きのナビゲーション。

制作の解説は非常にていねいで、分かりやすいです。目的のものを作成するために、何が必要で、どのように操作するかステップごとに解説されているので、戸惑うことはないと思います。

ナビゲーションがはじまり、カード、フォーム、レスポンシブのグリッド、ローディングアニメーション、ハンバーガーメニュー、タブ、アコーディオンなど、最近のWebサイトでよく使用されるUIパーツが揃っています。

作成するUIパーツはシンプルながらデザインもしっかりされているので、イメージがつかみやすいです。

4章はAdobe XDの共有機能を使ったデザインのコミュニケーション。デザイン素材をドキュメントで管理したり、作成したドキュメントのバージョンを管理したり、1つのドキュメントで同時に共同作業をしたり、便利な機能が揃っています。

5章は業種別に作るWebサイトで、Adobe XDでのワイヤーフレームの作成方法です。この章がもっとも充実しており、さまざまな業種のワイヤーフレームが揃っています。

まずは、コーポネートサイトのワイヤーフレーム。Webページに使用するコンポーネントを収録したアートボード、使用するレイアウトをセクションごとにまとめたテンプレート、各ページのワイヤーフレームで構成されています。

ワイヤーフレームはすべて、サポートページからダウンロードできるのも嬉しいですね。

他にも、プロダクトやサービスに特化したサイト、リクルートサイト、キャンペーン用のランディングページ、ECサイト、ニュースサイト、ブログなど盛りだくさん!

そのサイト独自の機能なども制作手順がていねいに解説されており、実際のプロジェクトですぐに使えると思います。

6章はAdobe XDを使用した思考の整理方法。ワイヤーフレームを作成するだけでなく、Adobe XDの便利な機能やプラグインを使用して、さらに活用します。
Adobe XD Webデザイン入門の目次

Adobe XD Webデザイン入門の目次

Adobe XD Webデザイン入門の目次
Adobe XDを初めてという人、なんとなくしか使えていない人に特にお勧めします。便利なツールなのは知っているけど、具体的にどういう風に何ができるのか、その手順までよく分かります。
購入した際には、XDのファイルがサポートサイトからダウンロードできるので、お忘れなく。ワイヤーフレームなどすべて、実際のプロジェクトで利用できます。
献本の御礼
最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors