MdNCORPORATION

初心者からちゃんとしたプロになる Adobe XD基礎入門

初心者からちゃんとしたプロになる Adobe XD基礎入門

相原 典佳 著/沖 良矢 著/濱野 将 著
定価 2,970円
(本体 2,700円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2021-09-22
仕様 B5変形判/288P
ISBN 978-4-295-20197-7
Webサイトやモバイルアプリの分野で広く使われているデザイン・プロトタイピングツールであるAdobe XDの入門書。制作現場でXDを「初めて使うこと」を想定し、XDの画面構成や基本操作からプロの実践的な使い方までを、6章構成で解説したものです。

XDの特徴は、デザイン制作の機能だけでなく、プロトタイピング機能や共有機能が一体となっている点です。その特定性が十分に発揮されるのが、チームで協力し合いながらプロジェクトを進めていく場面。そのため、本書では、ディレクター、デザイナー、エンジニア、それぞれの立場でのXDの使い方、チームでの連携という切り口で解説しています。

1・2章で基本的な知識や画面の見方を学んだあと、3・4・5章ではお弁当の販売サイトを題材に、ワイヤーフレーム作成(ディレクター)、デザイン作成(デザイナー)、コーディング(エンジニア)の実践演習を進めて行く流れになっています。

分業化が進む現在の制作現場では、チームでのコラボレーションが必須なだけでなく、自分の「お隣さん」の仕事を理解しておく必要があります。

そうした場面でAdobe XDを中心に据えた制作・開発の“お供”になる1冊です。

【ダウンロードURLについて】
本書のサンプルデータは購読者様に限り利用可能としているため、ダウンロードURLを非公開にしています。ダウンロードURLは本書の8ページに掲載しておりますので、8ページをご確認ください。

■ページ見本






目次

------------------------------------------------------------
■Lesson1 制作のワークフローとAdobe XD
------------------------------------------------------------
01 Web制作の現場とAdobe XD
02 Web制作の現場のワークフロー
03 Webサイトの使いやすさとAdobe XD
04 本書で題材とする架空のサンプルサイト

------------------------------------------------------------
■Lesson2 Adobe XDの基本
------------------------------------------------------------
01 Adobe XDでできること
02 Adobe XDの特長
03 Adobe XDの基本操作の流れ
04 Adobe XDの画面構成と名称

------------------------------------------------------------
■Lesson3 ディレクター視点で使う
------------------------------------------------------------
01 ディレクターの仕事内容
02 Webサイト制作における画面設計
03 ワイヤーフレームの作成ー共通パーツ
04 ワイヤーフレームの作成ーヘッダー
05 ワイヤーフレームの作成ーフッター
06 ワイヤーフレームの作成ートップページ①
07 ワイヤーフレームの作成ートップページ②
08 ワイヤーフレームの作成ーその他のページ
09 ワイヤーフレームの作成ーPC用画面①
10 ワイヤーフレームの作成ーPC用画面②
11 ワイヤーフレームからプロトタイプを作成する
12 作成したワイヤーフレームを共有する

------------------------------------------------------------
■Lesson4 デザイナー視点で使う
------------------------------------------------------------
01 デザイン工程でのAdobe XD
02 デザインシステムを理解しよう
03 デザインシステムの作成ーヘッダーとフッター
04 デザインシステムの作成ー共通メインコンポーネント
05 トップページを作成する
06 スライドメニューを作成する
07 商品一覧ページを作成する
08 商品詳細ページを作成する
09 お問い合わせページを作成する
10 PC用デザインを作成する
11 デザインカンプからプロトタイプを設定
12 Adobe XDでアニメーションを作成する
13 Photoshop・Illustratorとの連携

------------------------------------------------------------
■Lesson5 エンジニア視点で使う
------------------------------------------------------------
01 仕様やデザインの事前確認
02 コーディング環境を構築する
03 レイアウトのコーディング
04 素材の書き出し
05 コンテンツのコーディン

------------------------------------------------------------
■Lesson6 さらに便利な機能&知識
------------------------------------------------------------
01 プラグインの使い方
02 定番プラグインの紹介
03 UIキットの紹介
04 コミュニティの紹介

用語索引

ダウンロードデータ

『初心者からちゃんとしたプロになる Adobe XD基礎入門』
サンプルのダウンロードデータ
このたびは、『初心者からちゃんとしたプロになる Adobe XD基礎入門』を
ご購読いただきまして、誠にありがとうございます。

以下に、本書のLesson3・4・5の解説で使用したサンプルデータをご用意しましたので、ご利用ください。
(Lesson1・2・6のサンプルデータははじめから含まれておりません)


▼サンプルデータ
chan-pro_XD.zip(約92.4MB)


【サンプルデータのついてのご注意】

○XDファイルに関しては、「XD バージョン 42」(2021年8月時点の最新バージョン)で動作確認したものです。

○Lesson5のサンプルデータではJavaScriptを利用しているため、ローカル環境上では一部の機能が正しく動作しません。Lesson5のサンプルデータはWebサーバー上に設置したうえで機能をお試しください。


【ダウンロードにあたってのご注意】

ダウンロードファイルは、ZIP形式で圧縮されています。

Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。
解凍したフォルダ内には、本書のLesson3・4・5の解説で使用しているサンプルのデータが、各記事のフォルダに分かれて収録されています(Lesson5のデータは完成ファイルのみを収録)。

フォルダ内に「readme.txt」が同梱されていますので、ご使用の前に必ずお読みください。


【ダウンロードファイル解凍時のご注意】

Windowsをご利用の場合は、ダブルクリックしてもダウンロードファイルを正しく解凍できない場合があります。
リンク画像が表示されないなど、サンプルファイルの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される


※弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただしサンプルデータ中に含まれるJavaScriptのプラグインなどの一般に公開されているライブラリ類については、各ライブラリのライセンス条件に従います。

※弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※本書に掲載されているHTML、CSS、テキストなどのコメントや改行位置などは、紙面掲載用として加工していることがあります。ダウンロードしたサンプルデータとは異なる場合がありますので、あらかじめご了承ください。

※サンプルのなかには、Webサーバーの機能を利用しているなどの理由から、ローカル環境上では正しく動作しないものがあります。このようなサンプルの場合は、Webサーバ上に設置したうえで機能をお試しください。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊