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

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

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

Transcript

1. Creators MeetUp AdobeXD LT会 #25 まんまるねこ＠Maru_Cat 素早くカッコイイアニメーション作れるXD最⾼ 〜業務のXD使⽤と流⾏りのXDアニメーション紹介〜
2. アジェンダ 1.⾃⼰紹介 2.業務使⽤におけるXDのTips 3.アニメーション紹介
3. ⾃⼰紹介 まんまるねこ＠Cat_Maru(まる) ・マネーフォワードケッサイ プロダクトマネージャー プロダクト開発の仕様決めたり、UXデザイン考えたり ・過去：アプリUI/UXデザイナーやWebディレクター(何でも屋) Web、モバイルApp両⽅でXDを使⽤
4. 2.業務使⽤におけるXDのTips
5. XDの強み 1. デザインイメージの共有 2. デザインカンプの作成 3. UIのプロトタイプ コンペ案提出でカッコよく魅せる 業務連携のしやすさ 静⽌やちょっとしたアニメーションも表現しやすい 素早く作れるのは⼤事！
6. XDのアンチパターン 1. ⽂字装飾やキラキラ効果の多いLP 2. Webコーディング⽤アニメーション作成 psd、aiファイルは効果が外れることが多い チームみんなで1つのデザインツール使いましょう。 所感：Webから探したほうが早い！ コードもあるので、エンジニアが真似しやすい。 テキスト＋アニメーション指定もOK！
7. 3.アニメーション紹介
8. 3D変形(3D Transforms)の例 ⾃動モーションの例 Adobe公式サイト：https://letsxd.com/3d-transforms 2020年10⽉の新機能 XDで画像をクリック、command+T(ctrl+T)で3D変形のON/OFF
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なので原理が似ている
10. ⾃動モーションの例 XDで画像をクリック、command+T(ctrl+T)で3D変形のON/OFF
11. XDを楽しもう！
12. ご静聴ありがとうございました！