XDの業務使用と流行りのアニメーション紹介

2020/11/26（木）株式会社メンバーズキャリアさん主催の
Creators MeetUp AdobeXD LT会 #25の登壇資料です。

Adobe XDの業務利用で良いところ・気をつけたいところ及びアニメーション紹介をしました。

Transcript

1. Creators MeetUp AdobeXD LT会 #25
   まんまるねこ＠Maru_Cat
   素早くカッコイイアニメーション作れるXD最⾼
   〜業務のXD使⽤と流⾏りのXDアニメーション紹介〜
   

   View Slide

2. アジェンダ
   1.⾃⼰紹介
   2.業務使⽤におけるXDのTips
   3.アニメーション紹介
   

   View Slide

3. ⾃⼰紹介
   まんまるねこ＠Cat_Maru(まる)
   ・マネーフォワードケッサイ プロダクトマネージャー
   プロダクト開発の仕様決めたり、UXデザイン考えたり
   ・過去：アプリUI/UXデザイナーやWebディレクター(何でも屋)
   Web、モバイルApp両⽅でXDを使⽤
   

   View Slide

4. 2.業務使⽤におけるXDのTips
   

   View Slide

5. XDの強み
   1. デザインイメージの共有
   2. デザインカンプの作成
   3. UIのプロトタイプ
   コンペ案提出でカッコよく魅せる
   業務連携のしやすさ
   静⽌やちょっとしたアニメーションも表現しやすい
   素早く作れるのは⼤事！
   

   View Slide

6. XDのアンチパターン
   1. ⽂字装飾やキラキラ効果の多いLP
   2. Webコーディング⽤アニメーション作成
   psd、aiファイルは効果が外れることが多い
   チームみんなで1つのデザインツール使いましょう。
   所感：Webから探したほうが早い！
   コードもあるので、エンジニアが真似しやすい。
   テキスト＋アニメーション指定もOK！
   

   View Slide

7. 3.アニメーション紹介
   

   View Slide

8. 3D変形(3D Transforms)の例
   ⾃動モーションの例
   Adobe公式サイト：https://letsxd.com/3d-transforms
   2020年10⽉の新機能
   XDで画像をクリック、command+T(ctrl+T)で3D変形のON/OFF
   

   View Slide

9. CSS 3D Transform rotateでやる例：
   https://qiita.com/7968/items/eddfeb4b424d7c2d2d34#rotatex関数の記述
   OOO（英語）＋Codingをつけるとやり⽅が出てきやすい。
   Flip Cardも含めてよく使う効果が⾊々あるサイト：
   https://www.w3schools.com/howto/howto_css_flip_card.asp
   Flip Design Coding, 3D Flip Card Codingで検索：
   https://www.youtube.com/watch?v=uGgRhKN5_Ao
   3D変形-回転コーディング⽅法例：
   3D変形の英語も3D Transformsなので原理が似ている
   

   View Slide

10. ⾃動モーションの例
    XDで画像をクリック、command+T(ctrl+T)で3D変形のON/OFF
    

    View Slide

11. XDを楽しもう！
    

    View Slide

12. ご静聴ありがとうございました！
    

    View Slide