Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fbca6257ea170fe36741b49c99782892?s=47 Cat_Maru
December 08, 2020

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

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

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

Fbca6257ea170fe36741b49c99782892?s=128

Cat_Maru

December 08, 2020
Tweet

More Decks by Cat_Maru

Other Decks in Design

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. ご静聴ありがとうございました!