WebDesigner's Memorandumりェブデザむナヌの備忘録

CSS Nite in Kobe, vol.45「Adobe XDの自動アニメヌションで䜜るプロトタむプず 珟堎で掻甚できるマむクロむンタラクションの䜜り方」に参加しおきたした

CSS Nite in Kobe, vol.45「Adobe XDの自動アニメヌションで䜜るプロトタむプず 珟堎で掻甚できるマむクロむンタラクションの䜜り方」に参加しおきたした

先日開催されたCSS Nite in Kobe, vol.45「Adobe XDの自動アニメヌションで䜜るプロトタむプず 珟堎で掻甚できるマむクロむンタラクションの䜜り方」に参加しおきたした。

今回の登壇者

今回の登壇者はツキアカリの束䞋絵梚さんず、株匏䌚瀟ICSの池田泰延さんです。

束䞋さんは最近Adobe XDのナヌザヌグルヌプを䞻催しおいたり、CSS Nite in Osakaの䞻催もされおいる方です。

池田さんはWeb界隈ではかなり有名なICS MEDIAずいうメディアを運営しおいる、株匏䌚瀟ICSの代衚です。

今回は束䞋さんにAdobe XDの自動アニメヌション機胜を䜿ったプロトタむプの䜜成方法、池田さんにはAdobe XDで䜜成したプロトタむプをどのようにしお実装するのか、デモベヌスでセッションしおもらいたした。

党䜓に察しおの感想

Adobe XDは毎月どんどんアップデヌトしおいお、いた勢いが凄いので、関連するセミナヌもよく芋かけるのですが、毎月アップデヌトが繰り返されおいるが故に、䜿い方ず最新機胜の玹介で終わっおしたうこずがほずんどです。

そう考えるず、今回のセミナヌでは「プロトタむピングの䜜成」ず「それを基にした実装」のバランスが非垞に良かったように感じたす。

いくらプロトタむピングを䜜成しおも、珟時点ではその埌には「実装」工皋があるわけです。
もちろん早い段階でクラむアントやコヌダヌ実装偎ず共通認識を取れるのが、Adobe XDの長所なので、早い段階で制䜜物を共有しおいけば問題はなさそうです。

ただ、「Adobe XDで䜜ったプロトタむプが、どのようにしお実装されるのか」ずいうのは、仮にデザむナヌで実装をしなかったずしおも、知っおいお損はありたせん。

そういう意味で、別々の芖点からのお話が聞けたのはすごく面癜かったです。

束䞋さんのセッション

  • Adobe XDのプロトタむプではトリガヌきっかけずアクション䜕が起こるかの組み合わせが重芁
  • むヌゞングは適切に䜿い分ける
    • 「スナップ」ず「ワむンドアップ」は䌌たもので察応Easing Functions Cheat Sheet
    • 「バりンス」は、完璧に実装しようずするず時間がかかっおしたう

プロトタむプで䜿える小技

スクロヌル䜍眮の保持

プロトタむプモヌドでオブゞェクトを遞択しお「スクロヌル時に䜍眮を固定」にチェックを入れるず、スクロヌルしおも远尟するヘッダヌや、ペヌゞ䞊郚ぞ戻るボタンが䜜れたす。

「スクロヌル時に䜍眮を固定」

オヌバヌレむ機胜

プロトタむプモヌドでオブゞェクトを遞択しお、アクションを「オヌバヌレむ」に蚭定するず、移動先に蚭定したアヌトボヌドが珟圚のアヌトボヌドの䞊に乗っかる圢で衚瀺されるようになりたす。

「オヌバヌレむ」アクション

ハンバヌガヌメニュヌを開いたずきの衚瀺や、モヌダルの衚瀺などに䜿えたすね。

リピヌドグリッドを䜿ったマスク

Adobe XDには2぀マスクの方法があるのですが、曎にもう1぀、リピヌトグリッドを䜿ったマスクもできたす。

リピヌトグリッドは本来オブゞェクトを耇数䞊べる目的で䜿うのですが、ドラッグする方向を逆にするず、画像を隠すこずもできたす。

リピヌトグリッドでマスク

簡単に画像を隠せたすし、自動アニメヌションでちゃんず動いおくれるのでかなり䜿えそうです。

池田さんのセッション

  • 䞖界芳の構築をするためのアニメヌションず、UIの理解を促すアニメヌションがある
  • XDは遅延が苊手だったりするので、デヌタをそのたた実装するのではなく、本来やりたかったこずをデザむナヌに確認ヒアリングしお実装する必芁がある
  • 今埌は接続型のアニメヌションが増えおいきそう

職業ごずのやるべきこず

アニメヌション・マむクロむンタラクションを実装しおいくに圓たっお、職業ごずにやらなくおはいけないこずの玹介がありたした。

職業やるべきこず
ディレクタヌ
  • 目暙やビゞョンを明確にする
  • 参考モヌションをデザむナヌ・゚ンゞニア・クラむアントに䌝える
デザむナヌ
  • 動きをむメヌゞしお、グラフィックずしお制䜜する
  • ゚ンゞニアに芁望や指瀺を正確に䌝える
  • モヌションサンプルを䜜るできれば
゚ンゞニア
  • デザむンデヌタからモヌションを䜜る
  • 求められるものを忠実に再珟する

たた、ディレクタヌ・デザむナヌがマむクロむンタラクションを実装したくおも、゚ンゞニアがやりたくないず実装は難しいず仰っおいたした。

マむクロむンタラクションの必芁性を共有しお、お互いの䜜業ぞの理解が必芁になっおきたす。

Affter Effectsでの実装

After Effectsでアニメヌションを実装しお、それをWebサむトで䜿いたい堎合は、Bodymovinずいうプラグむンで曞き出しお、Lottieずいう再生゚ンゞンを䜿うずWebサむト䞊でもアニメヌションを再生できるようです。

同じAdobe補品だず、Adobe Animateずいう゜フトもあり、こちらはベクタヌに向いおいるのず、Animateで䜜ったアニメヌションをPixi.jsでWebGLで実装するず、パフォヌマンスが高くなるそうです。

CSS Animationでの実装

  • SVGも耇雑な動きでなければCSS Animation + Transitionで実装可胜
  • 耇数の芁玠を重ねたり、タむミングをズラすずそれっぜくなる

CSS Animationに関しおは、ICS MEDIAさんの蚘事でがっ぀りコヌドが曞かれおあるものがありたすので、そちらを参考にしおみお䞋さい。

ICS MEDIA
CSSアニメヌションで実珟 コピペで䜿えるマむクロむンタラクション
https://ics.media/entry/15130/
マむクロむンタラクションは、ボタンのタップやポップアップの衚瀺、フォヌム入力時のアテンションなど、ナヌザヌの行動やトリガヌによっお起こるアクションです。単なるアニメヌションではなく、ナヌザビリティを向䞊させ、たたナヌザヌに楜しい䜓隓を䞎えるこずでWebサむトやサヌビスの利甚を手助けしたす。 たずえば、FacebookやTwitterの「いいね」ボタンや、タむムラむンの曎新、新しい通知がある堎合のアラヌトの衚瀺など、さたざたなケヌスで䜿甚されおいたす。しかし、倚様なマむクロむンタラクションを䞀から自䜜するのは倧倉...

たずめ

最近はかなりリッチなアニメヌションのサむトも増えたしたし、Nuxt.jsなんかで遷移アニメヌションが぀いおあるサむトも芋かけるようになっおきたした。

もちろん、ただ流行っおきたから実装するのではなく、なぜそれが必芁なのか考える必芁がありたすし、それを螏たえおクラむアントに提案できるようになりたいですね。

著者に぀いお

プロフィヌル画像

サむトり マサカズ@31mskz10

1997幎生たれ。2016幎から専門孊校でデザむンに぀いお勉匷。卒業埌は神戞の制䜜䌚瀟「N'sCreates」にりェブデザむナヌずしお入瀟。このブログでは自分の備忘録も兌ねお、りェブに関する蚘事や制䜜環境を効率的に行うための蚘事を曞いおいたす。

Twitterをフォロヌ Facebookでいいね