Webデザイン講座Webデザイン講座

黒野明子 のAdobe XDへの理解を深める「プロトタイピング&アニメーション」

講座レベル2

2020年5月からの新しい試みとして、これまで1回6時間だった授業を分割し、平日夜の2時間で受講いただけるように構成を変更しました。Adobe XDのシリーズすべてを受講してもよし、お好きなものだけ選んでもよし、お好きなスタイルで学んでください。

シリーズ全3講座
【夜間2時間講座新設】ゼロからはじめるAdobe XD「描画の基礎を習得しよう」
【夜間2時間講座新設】Adobe XDへの理解を深める「プロトタイピング&アニメーション」
【夜間2時間講座新設】Adobe XDへの理解を深める「スタイルガイド構築と過去のデザイン資産活用」

この講座【Adobe XDへの理解を深める「プロトタイピング&アニメーション」】は、Adobe XDの基礎的な描画方法を知っている方に向けた講座です。あなたのスキルレベルが【ゼロからはじめるAdobe XD「描画の基礎を習得しよう」】の内容と同等であれば、この講座内容を理解することができます。

この講座では、XDで作成されたサンプルのアプリUIデザインを利用し、プロトタイプ制作とXDのアニメーション機能について学びます。XDで「プロトタイプモード」と呼ばれるUIの特徴を知り、画面遷移の設計手法を実際に手を動かして学びましょう。できあがったプロトタイプをローカル環境やiPhoneなどの実機でプレビューし、関係者のフィードバックをもらえるように共有する方法についても解説します。

XDスクリーンキャプチャ
XDスクリーンキャプチャ

また、XDでは、プロトタイプ制作時に「自動アニメーション」を設定することができます。After Effectsなどの映像制作アプリで制作するほど精緻な設定はできませんが、初心者でも理解しやすくアニメーションを制作でき、工夫次第では表現を深めることもできます。

XDスクリーンキャプチャ
黒野明子

修了目標

本講座の受講修了時に、以下のスキル習得を目指します。

  • Adobe XDを使ったプロトタイピングの手法を知る
  • 制作したプロトタイプをローカル環境や実機でプレビューする
  • 制作したプロトタイプを関係者に共有しフィードバックを得る
  • XDプラグイン+サードパーティのサービスを使って画面遷移図を作る
  • XDを使ったアニメーションの基礎を知る
お得なプリペイド受講チケット

カリキュラム概要

  1. レッスンで利用するサンプルUIの説明
  2. プロトタイピングモードと共有モードについて知る
  3. コンポーネントのステートについて知る
  4. 画面遷移の設定を知る
    • トリガーの種類を知る
    • アクションの違いを知る
      • オーバーレイについて知る
      • ひとつ前のアートボードに戻す
  5. デスクトップでプレビューする
    • 操作の様子を録画する
  6. 実機でプレビューする
    • ライブプレビュー
    • クラウドドキュメントのプレビュー
  7. プレビューへのリンクを発行して共有する
    • デザインレビュー、開発、プレゼンテーション、ユーザーテストの違い
    • パスワードの設定
    • Adobe IDがない人のログイン方法
    • コメントの投稿、返信、管理
    • 開発者がコードやアセットを取得できるように設定する
  8. XDが苦手なユーザーフローの制作方法を知る
    • XDは画面遷移図を作成するのが苦手
    • Overflowプラグインを活用する
  9. アニメーションの設定
    • 自動アニメーションを設定できる条件
    • イージングの設定
    • アニメーションをループさせるには
    • オブジェクトを円形に沿って動かすには
  10. 声で操作できるUIを作ってみよう
    • 音声トリガーの設定方法
    • 音声でフィードバックを設定する
    • 話しかけると返事をするプロトタイプを作成する
      • アニメーション表現も加える

*カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。


使用OS
Mac
※普段使用しているOSと異なっている場合でも講座内容の習得に大きく影響はありません。
PCの持ち込みも可能です。講座内で使用するソフトウェアの設定、環境構築をしておくようお願いします。
講師
黒野明子
定員
6名
対象
・プロトタイピングに興味のあるディレクター、プロダクトマネージャー、企画職の方
・プロトタイピングに興味のあるウェブデザイナー、UIデザイナー、プロダクトデザイナー
・SNSに投稿したりVJに利用するアニメーションを簡単な手法で作ってみたい方
対象OS
受講環境のOSは、最も機能を豊富に利用できるmacOSとしますが、Windows版との違いなどもお伝えします。
会場
ロクナナワークショップ
東京都渋谷区神宮前1-1-12 原宿ニュースカイハイツ 204号室
JR山手線「原宿駅」・東京メトロ副都心線「北参道駅」から徒歩7分

受講料

29,800円(税込み)

受講料には、テキストやノートPCの使用料金などを含んでおります。入会金などは一切必要ありません。

最大30%OFFまでの割引あります

  • 早割30
  • 早割10
  • 遠方割
  • 学割
  • 主婦割

開講日・お申し込み

この講座には現在募集日程がありません。次回開講日程は 67WSカレンダー共有 などでご確認ください。また、企業研修などで開講をご希望の場合はお気軽に ご相談 ください。

受講希望の方は 受講規約 および よくある質問 のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。また お申し込みの流れ もご参照ください。


講師

  • Twitter
  • Instagram
  • Facebook