概要
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 プロトタイプとデザインスペックを公開する
サポート
ダウンロード
(2018年12月17日更新)
以下のファイルをダウンロードできます。圧縮ファイルをダウンロードしていただき,適宜解凍してご利用ください。
- ダウンロード
- サンプルファイル(Lesson-Data.zip)
サンプルファイルのご利用方法は本書P.4「本書の使い方」およびP.6「サンプルファイルのダウンロード」をご覧ください。
サンプルファイルは圧縮されていますので,お使いのコンピュータにダウンロードしたあとは,フォルダを展開してからご利用ください。解説のみの章,節はサンプルファイルがないものがあります。
あらかじめご了承の上,ご使用をお願いいたします。
※Adobe XDは毎月アップデートを実施し,新機能を追加したり機能を改善しています。本書をご覧になる前に,サポートサイトで最新の情報をご確認ください。特に機能名称の変更などは作業に影響しますので,レッスンを始める前に変更点を確認しておいてください。
サポートサイト:http://design-zero.tv/AdobeXD/
機能改善や新機能が追加された場合,本書のどのパートに影響するのか記載していますのでご確認ください。2018年12月のアップデートから対応しています。