こいつ動くぞ…！AdobeXDの「Hero」プラグインでさらにリッチなプロトタイプを作成！

はじめまして、株式会社YUZURIHA(ユズリハ)でディレクター／UIデザイナーをしているサイトーです。

プロトタイプってなに？

アプリやウェブサイトなど何かプロダクトが始まるときに、より素早く手で触れるプロトタイプ(試作)を作り、

・リアルな体験からのフィードバック　＝(触ってみると○○だな！)
・素早い軌道修正や新しい気づきを促す＝(○○のほうがいいんじゃね？)
・想像と現実の差をできるだけ減らす　＝(思ってた○○と違うねコレ)

というのがUIデザイナーの仕事の一つだと思います。
そこで最近話題になっている「Hero」というプラグインはよりリッチなプロトタイプが作成できるらしいので試してみました。

01：ダウンロード方法

画面左下のプラグインボタンより「+」マークを押し「参照」タブから「Hero」と入力して検索します。

コンテンツとプロトタイプに命を吹き込みましょう。Heroを使用すると、動的データとカスタムスクリプトを使用してリビングプロトタイプを作成できます。

的なことが書いています。

02：「Hero」プラグインで何ができる？

これは公式ページの「ショールーム」をみたほうが分かりやすいです。
https://xdhero.com/showroom

・インタラクションの強化
　→ タップするとエフェクトがでる、XDに無い弾むような動きを作れる
・アニメーションの強化
　→キャラが歩いたり、オブジェクトが動いたりタイムラインで細かくアニメーション調整やループが可能。
・スクリプトで動きを制御できる
　→独自にスクリプトを記入して制御できます
・実際のコードとして書き出すことが出来る
　→制作物をHTMLなどで吐き出します。
※(引用)レンダリングは純粋なHTMLとSVGです。アニメーションは、最も人気があり堅牢なアニメーションエンジンGreensock（GSAP）を使用します

従来のAdobeXDは最低限のアニメーションに留めていたものをより実装時に近いかたちでデザイナーが再現でき、コーダーを補助するようにHTMLも作成します。

03：実際に使ってみた。

デフォルトでキャラのアセットがあったので、表情アニメーションを作ってみることにします。

01：表情パターンを適当に並べます。

02：中心をあわせて、グループ化。

03：「Effects」をクリックして

04：「Sequence」を選択。右側にリピート設定などのオプションコードの書き方が記載されています。

05：こいつ・・・動くぞ！！(ブラウザで確認)

04：「Hero」プラグインで出来ないこと、今後の課題

まず、AdobeXDのプレビュー上ではアニメーションは動作しません。
なぜなら「Hero」プラグインは、
01：指定したキャンパスをパブリッシュして
02：ローカルにHTMLデータを吐き出し
03：それをブラウザで開く
ことをメインにしているためです。

これは今後のXDプレビューから動作するようになるか？は
AdobeやHero側の対応次第といったところでしょう。

05：今後どうなるか？メリット・デメリット

■メリット
・コードがほとんど書けないデザイナーでも、XDで完結して、実際のコードに基づいた動きの表現が可能になる。
・コーダー側がある程度コピペで済むようになる。

■デメリット
・HTMLをパブリッシュするので共有方法に工夫が必要。テストサーバーを用意する、共有フォルダを用意するなど。
・操作方法が難しい。少しバグがあったり操作が複雑。しかし運営側はもっとシンプル化していく予定とのこと。
・HTMLでパブリッシュするが、ディレクトリ構造はサイトごとに違うので微調整は必要になる

リアルに考えられる使い方は？(2020/01/28時点)
・通常の方法でプロトタイプを作成し、全体の流れを確認。
・TOPページなど特別に動きを見せたいページだけ「HERO」でパブリッシュする

まだ日の浅いプラグインなので、今後に期待します～