Creative Edge School Books

Photo by ivan Torres on Unsplash

XD基礎編

Adobe XDとプロトタイピング/UXデザインの基礎を短時間で習得するための講座コンテンツです。初心者が学ぶべき重要な操作をピンポイントで解説しています。

Fundamentals of Adobe XD

Creative Edge School Books Webcast 2018

Let's Learn

Design at the speed of thought.

Curriculum

カリキュラムは、学習者からのフィードバックやXDのアップデート(新機能追加、機能改善など)を考慮しながら、常に更新しています。最新情報は、アップデートスケジュールでお知らせしています。

UX概論

XD実習

Adobe XDの実習を開始する前に「なぜプロトタイピングが必要なのか」を学習します。講義形式になっていますので、スマートフォンでも学べます。

Adobe XDの使い方を学習します。機能数が少ないため、操作は容易に習得可能ですが「効率よく」「素早く」作成するためのテクニックを重視しています。

総再生時間:2時間3分

総再生時間:2時間15分

Part-1

デザイン思考

Part-1

Adobe XDの基本操作

Part-2

暗黙知

Part-2

作業効率化のためのテクニック

Part-3

協働

Part-3

プロトタイピング基礎

Part-4

アジャイル

Part-4

XDアップデート追加版

Part-5

リーン

Part-5

スペシャル

Part-6

パターンランゲージ

PART-4以降順次公開中

学習内容

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

達成目標

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

Facebookグループを開設準備中

  • XDの拡張に関する最新情報の共有
  • XDプラグインの日本語環境での検証・テスト
  • デザイナー向け学習コンテンツ(プラグインの作り方など)に反映・提供
  • 当面は「XD基礎編」の皆さんを対象とし、参加希望の方はグループに申請していただく流れになります(こちらで購入時の個人情報を取得していませんので招待することができないため)
  • 開設に関するお知らせは、専用ページのアップデートスケジュールに掲載します

追加コンテンツ

12月末まで毎月新しい学習コンテンツ及び期間限定コンテンツを追加します

Adobe XD アップデート

タイムライン(9月19日現在)

PDFのダウンロード:

XD-Update-Timeline.pdf

新しい実習を追加中

Adobe XD プロトタイピング実践〜ランディングページ編

企業で実施しているXD研修(2日間コース)を1時間程度で学べるように再構築した「速習」コンテンツです。研修の講師向けに作られた「虎の巻」をベースにしており、XDを使ったプロトタイピング作業を分解し、特に重要なスキルを取り出して構成しています。

※企業30社のXD研修から得られた「つまずきやすい操作」「プロトタイピングで習得すべき知識・スキル」の最新アップデート版です。

 

今回は最も研修依頼が多かった実習1「ランディングページのプロトタイピング」の速習コンテンツを追加します。学習コンテンツは、XDのレッスン用ファイル/素材ファイル、資料(PDF)、操作スキル習得のための解説動画などで構成されています。

企業の2日間コースはハンズオン形式で進めていますが、速習コンテンツは1時間で学べるように圧縮していますので、解説動画は重要なポイントに絞り、再生時間を短くして速習に最適化しています。

  • 実習1:ランディングページのプロトタイピング(今回追加)
  • 実習2:バナー広告/インフィード広告のプロトタイピング(予定)
  • 実習3:モバイルアプリのプロトタイピング(予定)

達成目標

素早く段取りを組む力

  • プロトタイピングの流れを「素早く」紙に書き出すことができる
  • 誰が見ても「全体像を把握できる」プランニングシートを作成できる
  • 扱う商品もしくはサービスの特徴を箇条書きできる

素早く作業準備できる力

  • ランディングページを構成するモジュールを理解している
  • 必要な仮素材をストックコンテンツサービスを活用して「素早く」調達することができる
  • ファーストビューの構成要素を理解している

高速プロトタイピングできる力

  • XD上で「素早く」アイテムを整列したり、リピート表示できる
  • コンバージョンボタンなどをシンボル化して作業を効率化できる
  • レイヤー操作だけでアイテムを選択したり、グループ化することができる
  • XDの非破壊編集を最大限に活用してスピードアップできる

素早く企画書や仕様書に反映できる力

  • 作成したプロトタイプを適切なフォーマットで書き出して企画書に追加できる
  • 印刷用のアートボードを作成し、PDFで書き出すことができる
  • プロトタイピングで使用した素材を「再利用できるように」管理できる

Part-0

作業を進めるための準備をする

Part-1

目的を明確にする[知識獲得]

  • ランディングページから取得できる情報を決める
  • プランニングシートを作成する

Part-2

扱う商品・サービスの特徴とニーズを確認する[知識獲得]

  • ランディングページで扱う商品・サービスの名称と特徴を書く
  • 訪問者の悩みや問題を明らかにして解決方法を示す
  • 固有名で検索するブランドワードについて知る
  • ビッグワード/ミドルワード/スモールワードを考える
  • ファーストビューの構成要素とキャッチコピーを決める

Part-3

ワイヤーフレームを描く[知識獲得]

  • ランディングページを構成する8つのモジュール
  • ファーストビューセット
  • コンバージョンセット
  • 固定バー
  • ストーリーセット
  • データセット
  • ソーシャルプルーフ
  • Q&A/よくある質問
  • クロージングセット

Part-4

プロトタイプ制作の準備[スキル習得]

  • ランニングシートとワイヤーフレームを確認する
  • モジュール管理用のフォルダを作成する
  • コンバージョンボタンの作成
  • ストックコンテンツサービスの活用
  • Adobe StockとCreative Cloudマーケット
  • キーワード検索とイメージ検索の組み合わせ

Part-5

ファーストビューを完成させる[スキル習得]

  • キャッチコピーを配置する
  • サブキャッチコピーを配置する
  • コンバージョンボタンを配置する
  • リード文を配置する
  • ラベル(ステッカー)を作成して配置する

Part-6

ストーリーセットを完成させる[スキル習得]

  • 画面構成を確認する
  • 問題提起ストーリーを完成させる
  • 区切り用アイテムを配置する
  • 解決策ストーリーを完成させる

Part-7

クロージングセットとフッターを完成させる[スキル習得]

  • データセット・モジュールを完成させる
  • ソーシャルプルーフ・モジュールを完成させる
  • FAQ/よくある質問・モジュールを完成させる
  • クロージングセット・モジュールを完成させる
  • フッターを完成させる

Part-8

プロトタイプをプレビュー/共有[スキル習得]

  • プロトタイプを公開する
  • デザインスペックを公開する
  • プロトタイプの画像を書き出して企画書に追加する
  • XDで企画書・仕様書を作成してPDFで書き出す

期間限定コンテンツを追加中

高度な視差効果を使った特設サイトなどの

プロトタイピング

AppleのMac Proの製品ページをご覧ください。
このような高度な視差効果を多用した特設サイトのプロトタイピングは、大変難易度の高いものでしたが、Adobe XD とMuseを使うことで大幅に作業時間を短縮することができます。

作業に何時間もかかったり操作が難しい場合は、プロトタイプの段階でやる意味はないのですが、30分程度で(しかもマウスドラッグだけで)試作できるのなら使わない手はありません。

現時点では、XDと連携するどのサードパーティよりも簡単に作成可能です。

 

ただ、Museの開発終了が決まっていますので、「便利なのでMuseを使ってください」とはお奨めできません(エバンジェリストという立場で)。開発終了後も使い続けることができるツールなので大変もったいないのですが、やむを得ません。

 

視差効果を多用した特設サイトのプロトタイピングはとても要望が多いので、今回は期間限定の学習コンテンツとして追加したいと思います。公開期間は学習ページに記載いたします。

2018年12月までのAdobe XDのアップデートに対応していますので、新機能が搭載されたり、操作方法が変わった場合、カリキュラムに反映していきます。

販売価格:1,800円 (税込)

銀行振込をご希望の方は「ebookcast@gmail.com」まで「XD基礎編希望」というタイトルでメールを送ってください。

振込確認後、すぐにログインできます。

購入する

更新日:2018年9月8日(土)/公開日:2018年4月7日(土)

ホームに戻る

Creative Edge School Books(クリエイティブエッジスクールブックス)は、コンテンツの企画から取材、執筆、編集、オーサリング、ストアの運用、販売、プロモーション、デジタルマーケティングなどのすべてのプロセスを一人でこなしているインディペンデントのコンテンツパブリッシャーです。2016年より、AI Creative(クリエイティブ分野における人工知能の活用)に関する取材・プロジェクト参加・エバンジェライズ活動に力を入れており、現在はAdobe Community Evangelistとして講演などもおこなっています。

Creative Edge School Books

 http://design-zero.tv/

ebookcast@gmail.com

Photo by

Aaron Barnaby on Unsplash

© 2018 Creative Edge School Books