Adobe Experience Design(XD)プロトタイピング[基礎編]

Creative Edge School Books


Creative Edge School Books Webcast

 

Adobe XDプロトタイピング[基礎編]のカバーグラフィック

Adobe Experience Design(XD)プロトタイピング[基礎編]

Adobe Experience Design(通称XD)は、Webサイトやモバイルアプリのプロトタイプを作成するためのオールインワン、かつ徹底的にパフォーマンスを追求して開発中のプロトタイピングツールです。

まだ正規版の製品ではありませんが、パブリックプレビュー版として無償公開されており、Adobe IDを取得すれば誰でも使用することができます。UXデザイナーに限らず、広告代理店や広告デザイン会社、マーケティング会社などでも企業コンペや制作会社に発注する際に利用し始めており、PowerPointの代替ツールとして取り入れたところもあります。


本講座は、広告代理店向けに実施してきたウェブキャストの「XDの操作を習得する」カリキュラムを学習コンテンツにしたものです。6回の開催、受講者300名ほどのフィードバックで、XDの習得しにくい機能や覚えておくべきテクニックなどを集めました。

集中学習で完全習得できるように「80分」に凝縮しましたので、映画1本分の時間でXDを使いこなせるようになってください!




学習内容と達成目標:

プロトタイピング[基礎編]では、Adobe Experience Design(通称XD)を完全習得します。まだ機能が少ないため「完全習得」を目指します。XDのツールや基本的なテクニックをカリキュラムに沿って、約80分で学びます。XDを使いこなして「ワイヤーフレームやモックアップを作成できること」「オンライン共有できること」が達成目標です。



対象者:

  • Adobe XDを完全習得したいと考えている全ての人
  • PhotoshopやSketch、PowerPointなどのツールでプロトタイプを作成しているデザイナーやディレクター
  • プロトタイピングでFireworksに代わるツールを探している人
  • 広告代理店やマーケティング会社の企画・プランニングなどに携わる人
  • Adobe XDが現在のワークフローで使用できるかどうか確かめたい人


学習内容:

Adobe XDを使ってワイヤーフレームやモックアップを作成するための操作方法を完全習得する



達成目標:

  • Adobe XDは何をするためのツールなのか理解できる
  • Adobe XDがどんなことに役立つのか他人に説明することができる
  • Adobe XDを現在のワークフローに組み込めるかどうか判断できる
  • デザインモードとプロトタイプモードの違いを理解できる
  • アートボードとペーストボードの特性について理解できる
  • ピンチ操作やショートカットを使って効率よく作業を進められる
  • XDのツールを使って図形を描画したり、テキストを入力できる
  • IllustratorやPhotoshopから素材画像を取り込むことができる
  • リピートグリッドを使って連続するカラムやナビゲーションなどを素早く作成できる
  • プロトタイプモードで画面遷移や意図したアクションを設定できる
  • アートボードや特定のアセットを書き出すことができる
  • 作成したプロトタイプのリンクを生成してオンライン共有することができる
  • 生成したリンクを削除したり、修正したプロトタイプのリンクを更新できる


学習カリキュラム:

[受講する]ボタンをクリックすると、学習ビデオのページが表示されます(YouTubeの限定公開URLが埋め込まれています)。レッスンデータ(素材データ)のダウンロードリンクは、各学習項目のページに掲載されています。




総再生時間:

  • 1時間20分

学習コンテンツは14本に分かれていますので、スマホなどを使って空き時間を利用して学ぶことができますが、機能が少ないため80分間集中して一気に習得することをお奨めします。



確認事項:

  • ※学習教材として制作されたものではありません。オープンテラスで実施された講座の収録です。周辺の環境音が若干含まれていますが、気になるレベルのものではありません。視聴可能なStep-02Step-03Step-05でご確認ください。
  • ※Adobe XDは現在、パブリックプレビューとして無償提供され、誰でも使用できますが、毎月アップデートしていますのでインストールされているXDのバージョンをご確認ください。講座では8月にアップデートされたバージョンを使っています。

デザインモードの基本機能とツールの使い方

Step-01:デザインモードの基本機能とツールの使い方

デザインモードには、テキストを入力したり、作図するためのツールが搭載されています。選択ツールや描画ツール(長方形、楕円形、線、ペン)、テキストツール、アートボードを追加するためのツール、ズームツールなどです。このステップでは、ツールの基本操作を学習します。

  • 再生時間:8分18秒
  • レッスンデータ:なし


素早くズームイン・アウトするテクニックを習得

Step-02:素早くズームイン・アウトするテクニックを習得

XDはパフォーマンスを徹底的に追求したツールで、驚くほど軽快に動作します。プロトタイピングでは、ズームインアウトや画面スクロールを頻繁に繰り返しますので、トラックパッド上のピンチ操作やショートカットキー操作など、効率化のためのテクニックを習得しましょう。

  • 再生時間:4分39秒
  • レッスンデータ:なし


画像素材の読み込みと加工する方法

Step-03:画像素材の読み込みと加工する方法

画像素材(PNG、JPEG、GIF、SVG)はデスクトップやフォルダから直接ドラッグして配置することができます。メニューから選択したり、他のアプリケーションソフトからコピー&ペーストすることも可能です。また、配置した画像は拡大縮小だけでなく変形させることもできます。



IllustratorやPhotoshopから画像を取り込む方法

Step-04:IllustratorやPhotoshopから画像を取り込む方法

XDは、IllustratorやPhotoshopからコピー&ペーストで画像を取り込むことができます。Photoshopでは特定のレイヤーを選択してペーストしたり、1回の動作で結合して貼り付けることも可能です。Illustratorからペーストした図形などは、XDで色を変更することもできます。

  • 再生時間:6分42秒
  • レッスンデータ:[XD-Import.zip]


テキスト素材の追加とテキストフレームの操作方法

Step-05:テキスト素材の追加とテキストフレームの操作方法

XDのテキストツールは、見出しやタイトルに適した「1行テキストフレーム」と、折り返し処理される複数行のテキストフレームがあります。この2つを使い分けることで作業を効率化することが可能です。このステップでは(後で詳しく学習する)リピートグリッド機能も使用します。



マスクの特性とトリミングを調整する方法

Step-06:マスクの特性とトリミングを調整する方法

XDは、長方形ツールや楕円形ツールで描いたシェイプに(デスクトップやフォルダから)画像素材をドラッグするだけでマスク処理されます。また、配置した画像に描シェイプを重ねて、マスク処理のコマンドを実行するだけでトリミングされ、切り抜く領域も簡単に調整できます。

  • 再生時間:5分12秒
  • レッスンデータ:[XD-Mask.zip]


リピートグリッドの概念を理解して基本操作を習得

Step-07:リピートグリッドの概念を理解して基本操作を習得

リピートグリッドは高速プロトタイピングを実現する強力な支援機能です。Webやアプリの画面には、繰り返し表示されるパターン化された構成要素が多用されています。コンテンツのカラムやナビゲーションメニューなどです。このステップではリピートグリッドの基礎を学びます。

  • 再生時間:5分33秒
  • レッスンデータ:[XD-Repeat-Grid.zip]


リピートグリッドの注意点と調整する方法

Step-08:リピートグリッドの注意点と調整する方法

リピートグリッドは直感的に操作できるだけでなく、複数の画像やテキストファイルをまとめてドラッグするだけで繰り返し表示される構成要素の該当箇所に自動挿入してくれます。ただし、比率が異なる画像を使う場合は少し注意が必要です。ここでは、素材のつくり方を学びます。

  • 再生時間:6分20秒
  • レッスンデータ:[XD-Repeat-Grid-2.zip]


特殊効果(ぼかし)とグラデーションの設定方法

Step-09:特殊効果(ぼかし)とグラデーションの設定方法

ビジュアルデザインにおいて「ぼかし」やグラデーションなどは必要不可欠な効果です。ぼかした画像を他のツールで処理して読み込むより、XDで直接処理できたほうが効率的です。グラデーション設定などは、Illustratorが優れていますので、ペーストして活用することができます。

  • 再生時間:-分-秒
  • レッスンデータ:-


アートボードの特性とペーストボード上の操作方法

Step-10:アートボードの特性とペーストボード上の操作方法

XDのワークスペースは、ペーストボード(デザインモードのグレーの領域)上に、アートボードを配置していく仕様になっています。アートボードは状態によってロックされたり、編集可能になります。このステップでは、アートボードの特性について理解し、操作方法を学びます。

  • 再生時間:4分20秒
  • レッスンデータ:ありません


クリックして画面を切り替える方法〜プロトタイピング

Step-11:クリックして画面を切り替える方法〜プロトタイピング

プロトタイプモードでは、デザインモードで描画した画面をワイヤーで接続しながら画面の遷移やアクションを設定していきます。トランジションが用意されていますので、さまざまな効果を選択できます。ハンドルからワイヤーを引き出して、つなげていくだけの簡単な操作です。

  • 再生時間:5分16秒
  • レッスンデータ:ありません


スマホコミックのプロトタイプをつくる〜プロトタイピング

Step-12:スマホコミックのプロトタイプをつくる〜プロトタイピング

このステップは、レッスンです。スマホコミック(縦スクロールで読む漫画)のサンプルデータを使ってプロトタイピングしていきます。アートボードの高さが14,760ピクセルある巻き物のようなページですが、Step-02で学習したズームインアウトで効率よく作業していきましょう。

  • 再生時間:10分02秒
  • レッスンデータ:[XD-Lesson-Artboard-Comics.zip]


アートボードとアセットの選択と書き出す方法

Step-13:アートボードとアセットの選択と書き出す方法

作成したプロトタイプは、PNGやSVG、PDFで書き出すことができます。全てのアートボード、あるいは個別のアートボード、さらにアートボード上に配置された画像やテキスト(アセット)も選択可能です。また、iOSとAndroidの仕様に沿った倍率で書き出すこともできます。

  • 再生時間:6分39秒
  • レッスンデータ:[XD-Export.zip]


プロトタイプを共有する方法〜リンクの生成と管理

Step-14:プロトタイプを共有する方法〜リンクの生成と管理

プロトタイプをオンラインで共有する場合は、リンクを生成します。生成されると、HTML化されたプロトタイプが公開用のページに埋め込まれ、ブラウザーで実際に動かすことができます。生成したリンクは、Creative Cloudのマイアセットのページで、削除することが可能です。

  • 再生時間:2分57秒
  • レッスンデータ:[XD-Create-links-to-share.zip]3.0MB


Payment

購入方法

「Adobe Experience Design(XD)プロトタイピング[基礎編]」は、スクリーンキャスト(操作を収録したビデオ)とレッスンデータで構成されています。
本商品は書籍(アプリケーションソフトの解説本)の半額程度で設定しています。特別価格で提供するため、PayPalのみとなっています。尚、銀行振込は手作業で対応できますので、ご希望の方は[ebookcast@gmail.com]までお知らせください。

  • 内容:学習ビデオ(14本)+素材データ
  • 学習ビデオの総再生時間:1時間20分
  • 特別価格:800円(税込)

特別価格:800円(税込)
※当サイトでは購入者の個人情報を取得しませんので、こちらからメールは送信されません。ダウンロードURLのリンクは、PayPalの決済完了ページに表示されます。


Creative Edge School Books

一人出版社は全てのプロセスを一人でこなす小さなインディペンデント


Creative Edge School Books(クリエイティブエッジスクールブックス)は、コンテンツの企画から取材、執筆、編集、オーサリング、ストアの運用、販売、プロモーションなどのすべてのプロセスを一人でこなしている「一人出版社」。「本をつくる」出版社と「本を売る」本屋さん、そして誰でも自由に参加できる「学びの場」の3つを融合させたプラットフォームになっています。
2014年の秋にスタートした小さなインディペンデントです。

Creative Edge School Booksのコンテンツは「学びの場(デジタルクリエイティブ)」で公開しています。利用者から意見や感想、要望をもらって、新しいコンテンツに反映していくというビジネスモデルを実践中。クリエイティブ分野が中心ですが、今後はビジネスや社会分野のコンテンツを充実させる予定です。現在、AI(人工知能)を導入する準備を進めており、一人出版社の40%〜50%をAIでこなすために日々テストを重ねています。


投稿者:境祐司(Creative Edge School Books)
ご連絡:ebookcast@gmail.com
情報発信:@commonstyle
更新日:2016年9月8日(木)/投稿日:2015年9月30日(水)

Creative Edge School

Open Education Platform - Creative Edge School Books