お客さまがご利用のブラウザはサポートされていないため、正常に利用できない可能性があります。 お手数ですが、こちらをご確認いただき推奨環境のブラウザをインストールしてご利用ください。

Adobe XD 自動アニメーションで作る 動くプロトタイプ

対面 オンライン

ウェブデザイナー 松下絵梨氏登壇、Adobe XDの自動アニメーション機能を駆使し、「動くプロトタイプ」を共有する、Bau-yaの講座。

こんなことを学びます

日本全国や海外在住の方がご参加可能な、オンライン講座に対応しています。

受講お申し込みのすべての方が、講座開催後1週間、お好きなときに開催当日の収録動画をご視聴して復習いただけます。

--

今日のウェブやアプリのUI/UXデザインにおいて、「動く仕掛け」は必ずと言っていいほど設けられます。
もちろん、そのプロトタイプの制作においても、動く表現は重要。
画面遷移時のトランジションや、ユーザの操作に反応するマイクロインタラクションなど、チーム内では制作の段階から「動きの共有」が求められます。

では、どのような方法で、そのようなプロトタイプを実現し共有すればいいのでしょうか。

Adobe XD®は、ウェブページやアプリのワイヤーフレーム、ビジュアルデザイン、そして、プロトタイプを効率よく制作し共有することで、プロジェクトのコミュニケーションを円滑にするUI/UXのプロトタイプイングツールです。

Adobe XD
https://www.adobe.com/jp/products/xd.html

Adobe XDの『自動アニメーション』機能を使えば、動きのある画面遷移やアニメーションのマイクロインタラクションを、チーム内で共有しコンセンサスを取ることができるのです。

この講座では、デザイナー・クリエイターとして豊富な実績を持ち、『Adobe XD ユーザーグループ 大阪』の代表を務め、5月29日発売『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』を上梓された松下絵梨氏を招聘。
Adobe XDの自動アニメーション機能を使って、「動くプロトタイプ」を制作し共有する方法を徹底解説いただきます。

Adobe XD ユーザーグループ 大阪
https://xdug.jp/osaka/

『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』(翔泳社)
https://www.shoeisha.co.jp/book/detail/9784798158716

これでもう、ビジュアルが固まった後に動きの相談を後追いでする必要もなくなります。
これこそ、真のUI/UXの制作現場です。


Keywords: ウェブ, アプリ, デザイン, UI, UX, プロトタイプ, インタラクション, Adobe XD, マイクロインタラクション, トランジション


● この講座で学べること
○ Adobe XDの「自動アニメーション」機能
○ 動きのある画面遷移のプロトタイプ制作方法
○ アニメーションするマイクロインタラクショ のプロトタイプ制作方法
○ 動くプロトタイピングの共有方法

● この講座で得られること
○ 「自動アニメーション」の基本が理解できる
○ マウスオーバーやページ遷移時などの、アニメーションするUIを作成できるようになる
○ 簡単なローディングアニメーションが作成できるようになる
※ 配布資料がある場合は、配布やダウンロードなどで入手いただけます。
※ 講座内で利用するデモなどのサンプルファイルがある場合は、ダウンロードで入手いただけます。
※ 各種受講証明書への署名・発行に対応します。

● この講座の特徴
○ ハンズオンでも聴講でも、お好きなスタイルで受講可能な『技術講座』です。
○ 実践的な技術や方法を、要点をまとめて具体的にわかりやすくお伝えします。
○ 操作の解説は、デモンストレーションを実演して解説します。
○ 講座開催の後でも1週間、講義の様子をすべて収録した動画の視聴ができ、グループメッセージで登壇者宛に質問が可能です。

● 協賛企業・ブランド
株式会社翔泳社
https://www.shoeisha.co.jp/

#bauya123
続きを読む

開催日程がありません

開催予定エリア

六本木・赤坂

価格(税込)

¥3,800

受けたい
10人が受けたい登録しています

対面受講日程

開催日程はありません。開催リクエストを送ってみましょう。

価格(税込) ¥3,800
場所 六本木・赤坂

オンライン受講日程

開催日程はありません。開催リクエストを送ってみましょう。

価格(税込) ¥3,800

この講座の先生

松下 絵梨のプロフィール写真
ウェブデザイナー,UIデザイナー,講師

松下 絵梨

大阪出身大阪在住のウェブ/UIデザイナー 

東京理科大学理工学部卒業 

京都造形芸術大学 非常勤講師 
デジタルハリウッド大阪校 主幹講師 
コンピュータ専門学校HAL 非常勤講師 

通信機器メーカーで開発・サポート業務に従事したのち、デザイン・広報秘書業務に転身。
2010年よりフリーランスとして独立し、DTP、ウェブ、アプリデザイン、ディレクションを行なっている。 

ウェブに関する様々なセミナーを行っているCSS Niteでは、「CSS Niteベスト・セッション2018」「CSS Niteベスト・セッション2019」でベスト10セッションに選出された。 

『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』著者
https://book.tsukiakari.design/xd/ 

CSS Nite in Osaka 実行委員長 

Adobe XD ユーザーグループ大阪 代表 

Twitter
https://twitter.com/matsu_eri

この講座の主催団体

クリエイターの学び舎 Bau-ya

プロとプロを目指すクリエイターの学び舎、Bau-ya™(バウヤ)。
アートやデザイン、ITやウェブなどの、トップクリエイターや著名講師らの『いま、伝えたいこと』を、そのまま講座にして催します。


■ Bau-yaが招聘する実力派講師陣

業界の最前線で活躍している、実績や経験が豊富な著名クリエイターを招聘。
人気書籍の執筆者や、有名スクールの講師としてお馴染みの面々も登壇します。
現場主義やベテランだからこそ聴ける情報が満載です。


■ Bau-yaにある『知識講座』『技術講座』『ワークショップ講座』の3つのスタイル

『知識講座』は、ふんだんな資料や図解で解説する座学形式。
業界人として必須の教養や情報を学べます。
スライドや資料などを見ながら、じっくり学ぶスタイル。
提示されるスライドや資料はダウンロードして、何度でも復習いただけます。

『技術講座』は、ふんだんに実演デモを駆使するハイブリッド・ハンズオン形式。
制作の現場で必須のテクニックを学べます。
一緒に実習しながらでも、または聴講のみでも、どちらでも参加できるスタイル。
使... もっと見る >>

主催団体に質問する 教室ページをみる
  • 当日の流れとタイムスケジュール

    ■ 開始準備・開場時間
    開演15分前から

    ■ 所要時間
    約1.5–2時間程度(途中参加、途中退出も可能です)

    ■ 講座の流れ(予定)
    1. オープニング(Bau-yaおよび講座について説明,登壇者紹介など 約5分)
    2. 講義(約35–50分)
    3. 休憩(約5分)
    4. 講義(約35–50分)
    5. 質疑応答(約5分)
    6. エンディング(約5分)
    ※ 講義時間や時間割は、変更する可能性があります。
    ※ 予定よりも早く終了、または長引く可能性があります。
    • こんな方を対象としています

      □ ウェブデザイナーやUIデザイナーの方

      □ ウェブディレクターやウェブ制作関係者の方

      □ ウェブデザイナーを目指す初学者や学生の方

      □ 動きのあるウェブデザインやUIデザインのプロトタイピングを制作したい方
      
□ 動きのあるウェブデザインやUIデザインのプロトタイピングを共有作業したい方
    • 受講する際は以下をお読み下さい

      ■ ご用意いただくもの
      □ オンラインで受講いただく場合は、インターネット環境とコンピュータなどのデバイスおよびウェブブラウザ。
      □ ハンズオンスタイルで受講の方は、以下のアプリケーションがインストールされたコンピュータ。
      ・Adobe XD

       「スタータープラン」はAdobe CCを利用していなくても、無料でダウンロードが可能です。
      ※ OSやウェブブラウザー、各種アプリケーションなどは、最新のバージョンのものをご使用ください。
      ※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。
      □ 対面講座へ来場受講で電源を使われる方は、電源タップをご持参ください。
      □ 対面講座へ来場受講の場合、メモを取るための筆記用具やデバイスはご持参ください。

      ■ その他
      □ 参加者さまによる動画の収録や録音、撮影などの、一切の収録行為を禁じています。
      □ 講座内で配布する資料やファイルなどの一切の二次利用、再配布、無断転載などを禁じています。
      □ 対面講座へ来場での受講の際、お名刺をお持ちでしたら講座終了後に登壇者や主宰者とご交換ください。
    ※ストアカでは講座に適用される保険を用意しています。詳しくはストアカ補償制度をご覧ください。

    レビュー6

    • 楽しかった!( 4 )
    • 勉強になった!( 6 )
    • 行く価値あり!( 4 )
  • W2

    女性 40代

    この講座は「とてもとても分かりやすい講座」でした

    先生のご説明が本当にとても分かりやすくて、
    気が付くといろいろな機能の使い方を知ることができている、
    という感じでした。

    こんなにひとつひとつ明確にしてくださる先生に
    尊敬です・・・。

    たのしく勉強させていただきました。
    ありがとうございました!

  • W3

    女性 30代

    この講座は「初心者に優しい講座」でした

    全くXDの知識がない状態で講座をうけましたが
    教材を使いつつツールの機能や使い方をわかりやすく説明いただけました。

  • W3

    女性 40代

    この講座は「このひとなら、安心して受けられる講座」でした

    本の執筆もなさっているせいか、スライドも素材も美しくアタマに入ってきます。動画を繰り返しみようと思います。

  • M2

    男性 40代

    この講座は「XD自動アニメーションがしっかり学べる講座」でした

    用意されたサンプルがしっかり作られていて、解説もわかりやすかったです。
    収録動画を見て復習したいと思います。
    また次の講座もあれば受講したいと思います、ありがとうございました。

  • M3

    男性 50代

    この講座は「XDアニメーションを習得したい方向けの講座」でした

    松下さんの講座は分かり易く、実際のWEBデザインでよく使われる動きをXDで再現するための基礎的な講座として安定感がります。

    リアルのUI/UXデザインをコーデイングの前に確認することは紙からリアルな動きを見てもらうことで手直しが減る一方、コーダーさんと事前の確認にも必要です。

    紙ベースのデザイン提案の時代と比べると仕事がしやすくなるため、デザイナーの基礎知識として動きを覚えることは重要です。

    松下さんの講座は事前のデータもしっかりできているので、見返してデモ素材を使って復習することで確実に見につきます。

    発売中のXD書籍と併用しながら習得するのにお勧めのな講座でした。

  • この主催団体の他の講座

    11

    開催リクエスト受付中

    銀座・大手町 / オンライン
    17

    開催リクエスト受付中

    六本木・赤坂 / オンライン
    111

    開催リクエスト受付中

    六本木・赤坂 / オンライン
    81

    開催リクエスト受付中

    新宿・代々木
    32

    開催リクエスト受付中

    六本木・赤坂 / オンライン
    54

    開催リクエスト受付中

    六本木・赤坂 / オンライン

    関連講座

    この講座を見た人は、こんな講座も見ています

    お探しの講座が見つかりませんでしたか?