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

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

Cat_Maru
December 08, 2020

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

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

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

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アニメーション紹介〜

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  11. XDを楽しもう!

    View full-size slide

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

    View full-size slide