Adobe XD プロトタイピング実践ガイド
~ユーザーの要求に応えるUI/UXデザイン

書籍の概要

この本の概要

Webサイト構築やアプリ開発の現場ではプロトタイプ制作の重要性についての認識が高まっています。背景には,ただかっこいいデザインを作ればいいというのではなく,ユーザーに配慮したUI/UXを基とするデザインの構築が主流になりつつあることがあげられます。
ユーザーの声をより早く形にできるプロトタイプは,クライアントとの意思疎通をはかる上でも重要な役割を担う方法として注目されています。
現在,さまざまなプロトタイピングツールが使用されていますが,プロトタイピングをするためにツールをどのように活用してよいのか試行錯誤している状況です。
本書はプロトタイプ制作の基礎知識を学びながら,プロトタイピングツールAdobe XDを使いこなす実践書です。ツールの使い方だけに偏らず,プロトタイピング制作をはじめるために必要な知識,構築の仕方についてもしっかり解説します。

こんな方におすすめ

  • プロトタイピングについて知りたい人
  • 今までPhotoshopでWebサイトのカンプを作成していた人
  • Adobe XDを導入検討している人

補足情報

※最新CC 2019(11月アップデート)対応。
※Adobe XDは毎月アップデートを実施し,新機能を追加したり機能を改善しています。本書をご覧になる前に,サポートサイトで最新の情報をご確認ください。特に機能名称の変更などは作業に影響しますので,レッスンを始める前に変更点を確認しておいてください。

目次

PART1 プロトタイピングの基礎知識

  • 01 プロトタイプとプロトタイピング
  • 02 スケッチからワイヤーフレーム/モックアップへ
  • 03 アイデアの発想や問題解決に役立つ考え方を知っておこう
  • 04 プロジェクトとアジャイル開発手法について学ぼう

PART2 プロトタイプ制作の基本を理解する

  • 01 モバイルアプリの基本的なUIパターン
  • 02 プロトタイピングのためのUIキットを活用しよう
  • 03 プロトタイプの忠実度とレベルについて理解しよう
  • 04 Webサイトのプロトタイプ制作の進め方を理解しよう

PART3 Adobe XDの基本操作

  • 01 Adobe XDのワークスペース
  • 02 アートボードの画面操作
  • 03 ツールとモードを切り替えながら作図する
  • 04 レイヤーパネルでオブジェクトを編集する
  • 05 [実習]フキダシのバリエーションを作る
  • 06 [実習]ページの角がめくれる形状を作る
  • 07 [実習]バナー広告のバリエーションを作成する
  • COLUMN XDの機能を拡張するプラグインの活用

PART4 Adobe XDで動くプロトタイプを制作する

  • 01 プロトタイプモードで簡単なインタラクションを設定する
  • 02 ドラッグジェスチャーと自動アニメーションの基本操作
  • 03 ドラッグ操作で動くカルーセルを作成する
  • 04 カルーセルに奥行き感とクリック(タップ)操作を追加する
  • 05 マイクロインタラクションを作成する

PART5 ケーススタディで作業の進め方を学ぶ

  • 01 ランディングページのプロトタイプを作成する
  • 02 ファーストビューを「高忠実度のプロトタイプ」で作成する
  • 03 OS環境に依存しないクラウドフォントを活用する

PART6 プロトタイプを公開・検証する

  • 01 読み込み機能と書き出し機能を理解する
  • 02 プロトタイプとデザインスペックを公開する

著者プロフィール

境祐司(さかいゆうじ)

URL:http://design-zero.tv/
Twitter:@commonstyle

インストラクショナルデザイナーとして講座企画,ID マネジメント,記事執筆,講演などを中心に活動。2012 年5 月,電子出版専門のパブリッシャーとして電子書籍のプランニング,情報設計,デリバリデザイン等を手掛ける。2014年,デジタル専門の一人出版社「Creative Edge School Books(クリエイティブエッジスクールブックス)」を立ち上げ,主にクリエイティブ系のオンライン学習コンテンツを企画・制作・販売し始める。2016 年より,AI(人工知能)本格導入のためのトライアルを開始し,AIシステムやロボティクス関連の実証実験に参加。
ニューラルネットワークを使った機械翻訳と画像置換処理(写真画像のイラスト表現など)を中心に小規模なテストを実施している。
2017 年より,Adobe Community Evangelist(https://adobe.ly/2Jmnsq7)として主にAdobe Sensei(AI)やAdobe XD 関連のイベント登壇,講演などを行なっている。英語圏では,Mr.Creative.Edgeという名前で活動中。