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を使ってワイヤーフレームやモックアップを作成するための操作方法を完全習得する
[受講する]ボタンをクリックすると、学習ビデオのページが表示されます(YouTubeの限定公開URLが埋め込まれています)。レッスンデータ(素材データ)のダウンロードリンクは、各学習項目のページに掲載されています。
学習コンテンツは14本に分かれていますので、スマホなどを使って空き時間を利用して学ぶことができますが、機能が少ないため80分間集中して一気に習得することをお奨めします。
デザインモードには、テキストを入力したり、作図するためのツールが搭載されています。選択ツールや描画ツール(長方形、楕円形、線、ペン)、テキストツール、アートボードを追加するためのツール、ズームツールなどです。このステップでは、ツールの基本操作を学習します。
画像素材(PNG、JPEG、GIF、SVG)はデスクトップやフォルダから直接ドラッグして配置することができます。メニューから選択したり、他のアプリケーションソフトからコピー&ペーストすることも可能です。また、配置した画像は拡大縮小だけでなく変形させることもできます。
XDは、IllustratorやPhotoshopからコピー&ペーストで画像を取り込むことができます。Photoshopでは特定のレイヤーを選択してペーストしたり、1回の動作で結合して貼り付けることも可能です。Illustratorからペーストした図形などは、XDで色を変更することもできます。
XDのテキストツールは、見出しやタイトルに適した「1行テキストフレーム」と、折り返し処理される複数行のテキストフレームがあります。この2つを使い分けることで作業を効率化することが可能です。このステップでは(後で詳しく学習する)リピートグリッド機能も使用します。
XDは、長方形ツールや楕円形ツールで描いたシェイプに(デスクトップやフォルダから)画像素材をドラッグするだけでマスク処理されます。また、配置した画像に描シェイプを重ねて、マスク処理のコマンドを実行するだけでトリミングされ、切り抜く領域も簡単に調整できます。
リピートグリッドは高速プロトタイピングを実現する強力な支援機能です。Webやアプリの画面には、繰り返し表示されるパターン化された構成要素が多用されています。コンテンツのカラムやナビゲーションメニューなどです。このステップではリピートグリッドの基礎を学びます。
リピートグリッドは直感的に操作できるだけでなく、複数の画像やテキストファイルをまとめてドラッグするだけで繰り返し表示される構成要素の該当箇所に自動挿入してくれます。ただし、比率が異なる画像を使う場合は少し注意が必要です。ここでは、素材のつくり方を学びます。
ビジュアルデザインにおいて「ぼかし」やグラデーションなどは必要不可欠な効果です。ぼかした画像を他のツールで処理して読み込むより、XDで直接処理できたほうが効率的です。グラデーション設定などは、Illustratorが優れていますので、ペーストして活用することができます。
XDのワークスペースは、ペーストボード(デザインモードのグレーの領域)上に、アートボードを配置していく仕様になっています。アートボードは状態によってロックされたり、編集可能になります。このステップでは、アートボードの特性について理解し、操作方法を学びます。
プロトタイプモードでは、デザインモードで描画した画面をワイヤーで接続しながら画面の遷移やアクションを設定していきます。トランジションが用意されていますので、さまざまな効果を選択できます。ハンドルからワイヤーを引き出して、つなげていくだけの簡単な操作です。
このステップは、レッスンです。スマホコミック(縦スクロールで読む漫画)のサンプルデータを使ってプロトタイピングしていきます。アートボードの高さが14,760ピクセルある巻き物のようなページですが、Step-02で学習したズームインアウトで効率よく作業していきましょう。
作成したプロトタイプは、PNGやSVG、PDFで書き出すことができます。全てのアートボード、あるいは個別のアートボード、さらにアートボード上に配置された画像やテキスト(アセット)も選択可能です。また、iOSとAndroidの仕様に沿った倍率で書き出すこともできます。
プロトタイプをオンラインで共有する場合は、リンクを生成します。生成されると、HTML化されたプロトタイプが公開用のページに埋め込まれ、ブラウザーで実際に動かすことができます。生成したリンクは、Creative Cloudのマイアセットのページで、削除することが可能です。
「Adobe Experience Design(XD)プロトタイピング[基礎編]」は、スクリーンキャスト(操作を収録したビデオ)とレッスンデータで構成されています。
本商品は書籍(アプリケーションソフトの解説本)の半額程度で設定しています。特別価格で提供するため、PayPalのみとなっています。尚、銀行振込は手作業で対応できますので、ご希望の方は[ebookcast@gmail.com]までお知らせください。
特別価格:800円(税込)
※当サイトでは購入者の個人情報を取得しませんので、こちらからメールは送信されません。ダウンロードURLのリンクは、PayPalの決済完了ページに表示されます。
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日(水)
Open Education Platform - Creative Edge School Books