Adobe XD プロトタイピング実践ガイド

新着情報

投稿日：2019年1月9日（水）

投稿日：2018年12月27日（木）

投稿日：2018年12月22日（土）

投稿日：2018年12月20日（木）

• 本日（18日／火曜日）より発売です。
• 昨夜、Adobe XD の12月アップデートがあり、新機能が搭載されました。本書で学習を始める前に「XDの最新アップデート情報」のページでご確認ください

投稿日：2018年12月18日（火）

本書の内容

01 プロトタイプとプロトタイピング

02 スケッチからワイヤーフレーム／モックアップへ

03 アイデアの発想や問題解決に役立つ考え方を知っておこう

04 プロジェクトとアジャイル開発手法について学ぼう

01 モバイルアプリの基本的なUIパターン

02 プロトタイピングのためのUIキットを活用しよう

03 プロトタイプの忠実度とレベルについて理解しよう

04 Webサイトのプロトタイプ制作の進め方を理解しよう

01 Adobe XDのワークスペース

02 アートボードの画面操作

03 ツールとモードを切り替えながら作図する

04 レイヤーパネルでオブジェクトを編集する

05［実習］フキダシのバリエーションを作る

06［実習］ページの角がめくれる形状を作る

07［実習］バナー広告のバリエーションを作成する

Column XDの機能を拡張するプラグインの活用

01 プロトタイプモードで簡単なインタラクションを設定する

02 ドラッグジェスチャーと自動アニメーションの基本操作

03 ドラッグ操作で動くカルーセルを作成する

04 カルーセルに奥行き感とクリック（タップ）操作を追加する

05 マイクロインタラクションを作成する

01 ランディングページのプロトタイプを作成する

02 ファーストビューを「高忠実度のプロトタイプ」で作成する

03 OS環境に依存しないクラウドフォントを活用する

01 読み込み機能と書き出し機能を理解する

02 プロトタイプとデザインスペックを公開する

XD用の50種類のマイクロインタラクション

マイクロインタラクションとは、アプリやサービスに含まれる「最小限のやり取り」の仕組みのことです。ボタンをクリックしたときの凹みや、処理を実行しているときに進捗を視覚的に表現するプログレスバーなど、さまざまなものがあります。マイクロインタラクションは総じてモーションデザインと密接です。XDに搭載されている「トランジション」「自動アニメーション」「オーバーレイ」などのアクションはマイクロインタクションに適した機能です。

現在、XD用の50種類のマイクロインタラクションを作成しています。Adobe XDで、アプリやWebサイトの（インタラクティビティレベルの高い）プロトタイプを作成するときのテンプレートになります。公開スケジュールは以下のようになっています。

「Adobe XD 基礎編」の学習者向けに先行公開

※実際にXDを学んでいる方々からのフィードバックを反映しながらテンプレートの完成度を高めます。学習者のみなさま、よろしくお願いいたします。

本サイト「Learn Adobe XD」で2019年2月末に全て公開

※テンプレートとしての完成度が低いものは、引き続きフィードバックを頂きながらテストを継続しますので、公開が遅れる場合があります。

このサイトについて

XDはAdobe製品の中で最もアップデート数が多い製品です。2017年10月に正式版（バージョン1.0）がリリースされてから毎月アップデートが実施され、新機能が搭載されています。2018年11月現在、XDはバージョン13.1になっています。ChromeやFirefoxなどのWebブラウザーの更新頻度を上回る驚異的な開発スピードです。

搭載される新機能についてはAdobeの公式サイトで確認することができますが、操作方法やケーススタディはヘルプを見たりチュートリアルを探して学ぶしかありません。日本語に翻訳されていないチュートリアルが多いこともXDの教育コストを上昇させている要因の一つだといえるでしょう。また、2017年10月に対応した拡張プラグインの数も増えており、手間のかかった面倒な作業の自動化が次々と実現しています。

このようなXDの開発スピードに対応するため、本サイト「Learn Adobe XD」を公開しました。「Adobe XD プロトタイピング実践ガイド」のサポートサイトも兼ねていますので、まずは現在のXDの全体像をご確認ください。紹介している機能の使い方が変わった場合は、再学習の方法も掲載されますのでぜひご活用ください。

その他、XDの拡張に関する最新情報の共有やXDプラグインの日本語環境での検証、テストをおこなっている「XDエコシステム・リサーチグループ」やXDの初歩を動画で学べる「Adobe XD 基礎編」なども本サイトと連動していますのであわせてご覧ください。