見出し画像

XDのアニメーションをイチからつくれるようになった話

さんみ

この記事はAdobe XD Advent Calendar 2020の20日目の記事です🎄

XDで基本的なデザインはできるけれど、凝ったアニメーションをつくるのは難しい。
そんな状態から、想像したアニメーションをXDでつくれるようになった、数ヶ月間の流れをご紹介します。

「XDをもっと使えるようになりたい。けどちょっと難しく感じる」
という方への、ちょっとしたヒントになれば嬉しい、そんな内容です。

XDを思ったより使えていなかった

「XDを使いこなせてないのかな」
と気づいたのは、Webデザイナーとして転職して少し経った頃でした。

転職先のメインツールはPhotoshopで、XDは使用されていませんでした。
前職のツールがXDだったため、Photoshopで行うエンジニア、ディレクター間の確認に、密かに効率の悪さを感じていました。

チームMTGで、XDの存在をそれとなく伝えるも、反応は芳しくありません。
というのも、業務はグラフィカルな広告系LPが主で、そこにプロトタイピングツールを導入するメリットを説明しきれなかったからです。

現状で足りている環境に新しいツールをプレゼンできるほど、XDの機能も効果も活用できていない（操作もイマイチ）。
その事実に、ユーザー2年目にしてやっと気づいたのでした。

最初のチャレンジは失敗

そんな中、社内でプロトタイピングを推奨する動きがあり、XDに積極的に関わる人たちもいました。
自分よりずっと情報感度が高くて、現実的な思考で業務への落としこみを考えている。
その様子を見て、だんだん焦りが生まれてきました。

そこから少しずつ、情報をチェックするように。
XDのユーザーグループや公式のスターターキットの存在を教えてもらい、イベントに行ってスピーカーがどう機能を解説しているか観察したり、基礎的な操作を洗い出したりしました。

また、アップデートも以前よりまめにチェックするようになりました。

ちょうどその頃、Adobe XD Creative ChallengeというUI/UXのデザインチャレンジが開催されていました。 

さっそくデザイナー何人かでチャレンジしてみることに。

いや、待って、難しすぎる。

まず動画で課題の説明を見てもよく分からない。
自分がつくりたい動きをXDでおこせない。
隣でやっている方がうますぎる（MVPとってる！）

結局、出せたのはギリギリでつくったシンプルなアニメーションだけでした。

2度目のチャレンジ。夜な夜な練習。

自分の力不足にがっかりした頃、XDチャレンジのシーズン2が始まりました。
そして少しずつ、XDへの関わりに嫌気がさし始めていました。

チームのXDへの反応は変わらず微妙。
業務は現状で十分回っている。

続けるかやめるか迷い、「そもそもどうしたかったんだっけ」をしばらく考えていました。
業務が効率よくなればいい、あと、XDを上達したいと思っている。

じゃあ、自分の下手さは忘れて、もう1回だけやってみよう。
1回目は中途半端に取り組んでダメだったから、2回目はできるところまでやってみよう、と決めました。

そこから、Pinterestやdribbbleで、良いと思うUIを大量に集めました。
自分が見て楽しい！と思えるものになるまで、ワイヤーを書き、アニメーションの想定をしました。

想定したアニメーションは、その時点ではほぼつくれませんでした。
似た動きのUIキットを探し、それをトレースしたり分解したりして、どうにかこうにかつくりました。

※今だったらLet's XDやdribbbleを活用すると思います。

夜な夜な手探りでやっていたため、データはぐちゃぐちゃでしたが、何とかWeek1〜3すべてに提出できました。

続けていくうち、アニメーションを見ると、こうすればできるかも、と思いつくようになりました。
制作にかかる時間もどんどん短くなっていきました。

チャレンジ成功と社内導入

集中したおかげか、シーズン2ではシーズンMVPをもらうことができました。
すると、社内の人に声をかけてもらう機会が増え、チーム内でのXDへの捉え方が良い方向に変わってきたのを感じました。

それをきっかけに、社内でXD導入のプレゼンの話が出た時、プレゼンターの1人に選んでもらうことができました。
XDを使う案件も出てきて、本当に少しずつですが、当初の目的は達成できたのかなと思います。

小さな変化と、チャレンジに共通すること

できないことを、できるようになりたいと行動した後、いくつか変化が生まれました。

・チャレンジへのハードルが低くなった
・完璧主義から、中途半端で良いと思えるようになった
・楽しいと思うことに、自分から関わっていくことが大事だと気づけた

器用に上手に、すぐ結果を出せる人もいるけれど、そうじゃない人もとにかくやってみて良いんだ。
そう思えるようになりました。

その後、社内のツールがFigmaに変わったり、MVPの賞品としていただいたCreative Cloud 1年分をなくしたりするのですが...🎅
それでも、XDに集中して取り組めたのは楽しいことでした。

今改めて学ぶなら

当初は手探りでアニメーション習得を進めましたが、今だったらLet's XDとAdobe XD Trailを活用すると思います。

Let's XD（英語サイト）は膨大な量のUIキットや学習動画が載っているサイト。

年末の予定はこれで埋まります。やったね！

日本語で学習したい場合はAdobe XD Trailがおすすめです。
各機能を短い動画で解説し、定期的にオンラインワークショップが行われています（初学者向け）。

もし少しでも気になっていたら、ハードルは考えずちょっとやってみる。
そんな学び方が手軽でおすすめです🎁

いいなと思ったら応援しよう！