11月のXDUG沖縄はミニハンズオン講座ということで、久しぶりのオフライン開催！
会場は沖縄勢にはおなじみのStartup Lab Lagoonをお借りました。こちらのスペースは10月から2FスペースはAzureを活用したソリューションの展示、実証実験、Teams Live Studioの情報提供なども行う「Azure Okinawa Base」としてオープンしていますので、興味のある方はぜひ見学へ！
当日は６名の参加者さんと２名のXDUG沖縄スタッフ、計8名でのイベント開催でした。
リフォームが入り、以前にも増しておしゃれな空間、スクリーンも完備で完璧すぎます。
なんと、オンライン配信ブースも！そして、会場にイベント張り紙を作成して貼ってくださるスタッフさんのホスピタリティに感謝。
アニメーション機能でゲームつくってみよう会
今回は、AdobeXDのアニメーション機能で簡単なゲームにチャレンジ！ということで、前半は基本的なアニメーション昨日のレクチャー、後半は事前に共有したサンプルファイルをアレンジしてオリジナルのゲームをつくることをテーマにしたミニハンズオン企画です。
軽くレクチャーしたあとは、わいわいと自主制作タイムにしようと思いましたが、伝えたいことのボリュームが多くなりガチ寄りな講座になりました。
ゲームのサンプル
ゲームのプレビューはこちら
XDサンプルデータ ※利用規約に同意の上ご使用ください
※プレビュー、及びサンプルデータのダウンロード期限は未定です。気になる方はお早めにご覧ください。
０１．XDアニメーションのレクチャー
今回はやや中級者向けの内容ということで、XDの基本機能は省略しアニメーション機能にフォーカスした内容にしました。
かなりざっくりですが、個人的にXDのアニメーション機能を使いこなす上で意識している３つのポイントをご紹介。
最初はプロトタイプモードのツールパネルが、どれに対して何をするのか覚えておくと習得が早い気がしています。上記の図のように文章を考えると、どこに何を設定するのか自然と覚えられるのでおすすめです。
XDの自動アニメーションは、設定するとなんだかいい感じにアニメーションしてくれます。この「いい感じ」の正体は数値を補完することを意識すると、こういう動きをするときは、こういう設定かな？とアタリをつけることができます。
座標、透過、角度など数値がある場合は、色々実験してみると面白いと思います。
動いてほしいものが動かないときは、レイヤーパネルをチェックしてレイヤー名が同じが必ずチェックしましょう！XDの自動アニメーションでお伝えしたいことはこれだけよ言っても過言ではないくらい重要です。
こんな内容をレクチャーしつつ、サンプルデータを元にプロトタイプモードをみんなで設定して、ボールを動かすアニメーションにチャレンジ。コードを一行も書かず、さくっと動くプロトタイプが作れるのは本当にありがたいです。
０２．ゲームのサンプルを元にアニメーションを設定してみよう
基本レクチャーが終わったところで、あらかじめダウンロードいただいたサンプルデータを元に、プロトタイプモードでアニメーションを設定していきました。ひとつひとつのアニメーションに複雑な設定をしていないのですが、基本を詰め込んだ(ちょっと詰め込みすぎた感)ので、予想時間を２０分くらいオーバーしてしまいました。
サンプルデータには、プロトタイプモードでアニメーションを設定した完成形の「お手本」と、何も設定していないサンプルデータを用意しているので、もし気になる方はお手本の設定を見ながら、ぜひチャレンジしてみてください！
アニメーションの設定が終わったら、オリジナルのゲームにアレンジできるお題を用意しました。
商用フリーの素材に差し替えたり、自分でイラストを描いてみたり、色を変えてみたり。どれもとってもかわいい。
こういう表現をしたいんだけどXDではどうやって再現できるんだろう？と質問もいただき、XDというツールがきっかけで創作意欲が湧くことはとても素敵だなと自分も刺激をいただいました。
さいごに
今回は定員人数に対して半分くらいの規模でしたが、その分参加者さん同士でのコミュニケーションや、より詳しいレクチャーを行うことができアットホームな雰囲気でイベントを進行することができました。
また、参加者さんがハロウィンなのでー！とお菓子を持ち寄ってくださり、本当にありがたい。次回以降も、運営チームも参加者のみなさんも楽しんでいただけるXD関連企画をしていこうと思います。
（左）お菓子スポンサーの笑顔が素敵なお二人
（右）今回は突発で、XDUG大阪代表のまつえりさん著書Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキルをじゃんけん大会優勝者(しかも一発で決まった)さんにプレゼントしました！