Adobe XDではじめるWebデザイン&プロトタイピング

指示に沿ってサイトを作ることで、Adobe XDの使い方をマスター!!初学者にもおすすめの一冊!

書籍の表紙
松下 絵梨[著]
2020年5月29日発売(翔泳社)

news

お知らせ

01

内容紹介

introduction

Adobe XDを使って、コーディングに適したUIのプロトタイプを作る! Adobe XDを使って、コーディングに適したUIのプロトタイプを作る!
  • 高品質なサンプルを
    作りながら学べる
  • Web制作のワークフロー
    に沿って学べる
  • コーディングに適した
    プロトタイプが作れる

本書はAdobe XDを使ったWebデザインとUIのプロトタイピングを、高品質なサイトを作りながら、現場のワークフローに沿って学んでいく本です。

ワイヤーフレームの作り方から、ビジュアルカンプ制作、デザイン要素の効率的な制作と管理、インタラクティブなプロトタイプ制作、 画面遷移やコーディングに必要なデザインスペックの共有、さらに動きのあるUI設計やプラグイン活用まで、現場レベルで求められるスキルを、より実践的な学び方で習得できます。

初学者から、現場経験が浅い新人デザイナー、さらにグラフィックデザインからWebへキャリアを広げたい方まで、しっかりWebデザインを学びたい、あらゆる方のための一冊です。

XDの特徴

  • 01

    誰でも簡単な操作!

    Adobe XDはPhotoshopやIllustrator のように専門性が高くなく、かつWeb制作に厳選された機能しかないため学習コストが低く、デザイナーだけでなく、ディレクターやコーダーも問題なく使うことができます。

  • 02

    地味に面倒な作業をラクに!

    同じレイアウトを繰り返して作る。まだ決まっていない画像箇所にダミー画像を入れる。単純な作業ですが面倒です。
    このような、めんどくさい作業を効率的に行える機能がAdobe XDには備わっています。

  • 03

    関係者との共有が簡単!

    Adobe XDの「共有」機能を使えば、クライアントやディレクター、コーダーなどの関係者と簡単に共有できます。
    デザインやプロトタイプを共有し、フィードバックをもらうことも可能な機能が備わっています。

Adobe XDには、これまでのPhotoshopを使った制作が中心だったWebデザインの常識を覆すような、「ワイヤーフレームやデザインを効率的に制作できる機能」が数多くあります。

また、遷移が確認できるプロトタイプや、アニメーションを作れるといった、ほかにはない機能もあります。

本書では、そのような機能を活用して効率的にデザインカンプを作っていきます。

  • リピートグリッドのアイコン

    リピートグリッド

    リピートグリッドを使って効率的に作業を進めます。

    リピートグリッドを使用したデザイン制作の動きのアニメーション
  • 自動アニメーション機能のアイコン

    自動アニメーション機能

    Adobe XDの自動アニメーション機能で、動きのあるプロトタイプを作成することができます。

    自動アニメーション機能を使用した事例

02

書籍の内容

book contents

Chapter 1
Adobe XDの基本と制作準備
Chapter 2
ワイヤーフレームの制作
Chapter 3
スマートフォン版デザインカンプの制作①トップページ
Chapter 4
スマートフォン版デザインカンプの制作②下層ページ
Chapter 5
インタラクティブ・プロトタイプの制作
Chapter 6
プロトタイプとデザインスペックの共有
Chapter 7
デスクトップ版デザインカンプの制作
Chapter 8
コーディングの準備と画像の書き出し
Chapter 9
動きのあるUIの制作
Chapter10
プラグインの活用
  • Point

    Adobe XDを初めて操作する人でもわかりやすいように、なるべく簡単な言葉で解説しています。
    作業手順やクリックする場所なども分かりやすいように、細かく画像が入っており、作業に迷わないように表示されています。

    画像が多用されているページの画像 画像が多用されているページの画像
  • Point

    Adobe XDの「アセット」機能を使って、共通パーツを効率的に作っていきます。
    アセット機能を使用することで、1回の変更で、対応しているパーツ全てを変更することが可能など、Adobe XDの機能を活かした作成を学ぶことができます。

    マスターコンポーネントを使って作業を進めることについて記載されたページの画像 マスターコンポーネントを使って作業を進めることについて記載されたページの画像
  • Point

    デザインカンプ作成だけでなく、関係者と簡単にデータ共有できる機能など、チームで連携するためのツールについても学びます。

    プロトタイプを共有する事について記載されたページの画像 プロトタイプを共有する事について記載されたページの画像
  • Point

    Adobe XDを作成したプロトタイプを実際にWebページとして公開するためには、コーディング作業が必要です。
    XDで作成されたデータがどうコーディングされるのかのイメージをつかむために、カラーと画像の差し替え作業を行い、コーディングデータを完成させます。
    [コーディングデータ作成協力:鹿野 壮(ICS)]

    コーディングについて記載されたページの画像 コーディングについて記載されたページの画像

03

著者

author

松下絵梨の写真

松下 絵梨

eri matsushita

大阪出身大阪在住のWeb/UIデザイナー。東京理科大学理工学部卒業。
京都造形芸術大学 非常勤講師、デジタルハリウッド大阪校 主幹講師、コンピュータ専門学校HAL 非常勤講師。

通信機器メーカーで開発・サポート業務に従事したのち、デザイン・広報秘書業務に転身。2010年よりフリーランスとして独立し、DTP/Web/アプリデザイン、ディレクションを行っている。

ウェブに関する様々なセミナーを行っているCSS Niteでは、「CSS Niteベスト・セッション2018」「CSS Niteベスト・セッション2019」でベスト10セッションに選出された。