見出し画像

遊んで学ぶ Adobe XD 勉強法 | XDUFes2019

えび🍤


6/8(土)に行われたAdobe XD ユーザーフェス 2019 (大阪)にて登壇させて頂いたえびです！
この記事はその発表内容「遊んで学ぶ Adobe XD 勉強法」をまとめたものです。XDUFes2019はこの後も全国各地を巡り続けているので要チェックです！
もちろん僕がいる札幌でも開催されますので、是非LT枠でご参加ください。

前置き

XDはそもそも学習コストが低いことが売りですが、独自の機能やプロトタイプなど他のデザインツールには無い機能があるので勉強が必要なのは事実です。その勉強をするにあたって、

画像1

実案件で使うと初めて使うツールだとしても一定以上のクオリティを求められるのはもちろんですし、調べながら製作することになるため普段よりも時間が掛かってしまうかもしれません。
練習で1サイト丸々作ってもXDの機能を全て学べるとも限りません。なので、

画像2

遊びながらって何？って話ですよね。
実例で紹介します。

CSS Grid Layout × マリオ
CSSとHTMLだけでドット絵を描いています。

CSS animation × 水を吐くフグ
フグを長押しすると水を吐くフグです。

こんな感じで、コーディングなどの技術を使ってふざけて遊びながら学んでいきます！

なんで遊んで学ぶの？

遊んで学ぶ最大の利点はわかりやすく面白いものが出来ることだと思います。
普通に勉強してももちろん良いのですが、普通に作ったものでスゴイ！面白い！と思って貰うには凄く頑張らないといけないです。
平たく言うと遊んで学ぶと承認欲求が満たされやすいです。

画像3

上図のように遊んで作ったものをツイートすると反応が貰えるので嬉しいですよね？するとまたツイートしたくなります。ツイートするためにネタを探して再度ツイート…。
この流れを

画像4

と呼びます！

画像5

XDは共有する機能が豊富なので、承認欲求を満たしやすいです。

共有機能として代表的なものはリンク共有機能（プレビューURLを発行）とディスクトッププレビューの録画です。
プレビューURLだけでの共有でも良いのですが、SNSの特性上URLだけ貼っても見て貰えないことが多いのでディスクトッププレビューの録画で動画を添付出来るのはかなりの強みです。

実際に遊んでみよう！

画像6

このnote記事で紹介されている内容で遊んでみます！

上記の記事を読んで頂ければ分かるので割愛しますが、ざっくりいうとタイムトリガーを利用して遷移先をランダムに切り替えるということを行なっておみくじを作りました。

画像7

上段のアートボードが全て同じ見た目でこれがタイムトリガーでループしています。

実際に遊んでみよう！Part2

画像8

おみくじを作っている間にふと、こう思ってしまいました。

画像9

ここから話が複雑になってくるので、先に完成品を見てください。

何をしているのかというと1000個のアートボードをタイムトリガー0.01秒で繋ぎ00:00~10:00をカウントしています。
一時停止と再スタートはオーバーレイ機能で実現しています。

画像10

先述の通り00:00,00:01,00:02…09:98,09:99,10:00というテキストを1000個アートボードに用意する必要があります。

画像11

ですよね。なのでXDの機能を使って乗り越えます。

画像12

リピートグリッドは選択したオブジェクト又はグループを繰り返してくれる機能です。
リピートグリッドにはアートボードを跨いでグリッドを置いてリピートグリッドを解除することで、各グリッドを各アートボードに配置出来るという機能があります。

画像13

左で作成したリピートグリッドの各グリッドが他のアートボードに乗るようにマージンを調整し、リピートグリッドを解除

画像14

すると各アートボードが各オブジェクトを持つようになります。
これで1000個のアートボードにテキストが配置出来るようになりました！

画像15

リピートグリッドには.txtファイルをドラッグ&ドロップすると各グリッドに配置してくれる機能があります。

画像16

例えば、XDUF.txtというファイルをリピートグリッドにドラッグ&ドロップすると

画像17

1改行毎に1グリッドで配置されます。
つまり、

画像18

ということです。
これももちろん手打ちで実現することができますが、1000行も書きたくないので…

画像19

 for (let index = 0; index < 1001; index++){
  function count(i) {
    return String(i).padStart(4, '0')
  } 
  const countRes = count(index);
  const res = countRes.slice(0,2) + ':' + countRes.slice(2,4);
  document.write(res + '<br>')
}

これを使います。
このJSのコードをブラウザの開発者ツール、コンソールに入力して実行。

画像20

HTMLが数字に書き変わるのでこれをコピーして「StopWatch.txt」などの名前で保存します。

これであなたもストップウォッチを作ることができます！
まずはスタートのアートボート（左上）タイムトリガーで流れるアートボート（右上）オーバレイ用のアートボート（左下）の3つを用意します。
STOPボタンをオーバーレイに繋げて、RESETボタンをスタートへ繋げます。

画像21

右上のアートボートをコピーしまくります。1000個コピーします。
コピーが終ったらリピートグリッドで00:00が全てのアートボードに乗るように調整して、「StopWatch.txt」をドラッグ＆ドロップ。

画像22

リピートグリッド解除し、アートボード間をタイムトリガーで繋げましょう。
1000個のアートボードを繋げます。
え？無理？繋げたくない？自動的にやって欲しい？
分かります。
ただここは自動化できないので頑張りましょう。僕は1時間以上かかりました。

画像23

全てを繋げると…

画像24

完成！さぁ！皆さん作りましょう！
（マジで作った方いましたらご飯おごるので札幌まで来てください）

実際に遊んでみよう！Part3

画像25

上記はXD5月の新機能をまとめた動画なのですが、5月の新機能に「キーボードおよびゲームパッドトリガー」というものが登場しました。
これはゲームUIなどをゲームコントローラで直感的に操作出来る様になる機能です。そこで、

画像26

こちらもまず完成品を見てください！

プレイヤーを真上&近距離から見るスタイルの激ムズ迷路ゲームです。
まず、迷路を描く必要があるのですがこちらもXDで描いていきます。
ここで使う機能は方眼グリッドです。方眼グリッドをオンにした状態でペンツールを使うと方眼に吸い付くのでスイスイ迷路が描けます！

画像27

トリガーで「キーとゲームパッド」を選択すると、「キー」に好きなキーを設定出来るようになります。

画像28

三角マークに迷路のプレイヤーの移動の向きに合わせて←↓↑→を設定していきます。

画像29

背景は自動アニメーションで動かし、1回の移動につき迷路を描いた際の1方眼グリッド分を目安に動かしていきます。
そして、全体を繋げていくと

画像30

こんな感じが完成図です！大きい迷路がアートボード上に現れている感じで可愛いですね
ちなみに右上の端がゴールになっており、ゴール地点のアートボードがタイムトリガーでゴールという文字のアートボードに移動するようになっています。
作りたくなって来ましたね！

まとめ

画像31

についてまとめていきます。まず、実際に作ったものを見ていただけたら分かる通り、

画像32

イレギュラーなことをやろうと思ったら、自然と基礎的な知識が学べていきます。また、イレギュラーなことをやっているのでXDというツールの限界を知ることが出来るのでXDに関する質問に自信をもって答えることができます。

画像33

振り返りになりますが承認欲求の正のループにXDは入りやすいです。この承認欲求の正のループの本質は

画像34

ことにあります。
学びが習慣化して勉強を楽しめるようになることは最強のスキルだと僕は思っています。
そして、遊びながら学ぶということはあくまでも遊びなので

画像35

楽しい瞬間というのは、1000枚のアートボードを1時間掛けてひたすら繋いでいる時間のことではありません。
楽しい瞬間というのは、完成したものをアウトプットして皆さんからの反応を貰う瞬間です。（このnoteにいいねを貰ってフォローもして貰う瞬間です！）
この楽しさを知っているかどうかは学びを習慣化出来るかどうかに大きく関わっていると思います。

画像36

逆にデメリットはあるのでしょうか？

画像37

承認欲求のループからネタを探すという行動が抜けてしまっている図です。これを

画像38

と呼ぶことにします。
承認欲求の負のループとは、ツイートして反応を貰うために新しい技術などを取り入れずに、自分の持っている知識だけで何かを作りそれで反応を貰おうとすることです。

画像39

つまり、ネタを探すというのは面白いことをするという意味ではなく

画像40

新しいことを学ぶということなのです。

画像41

承認欲求のループに入り、勉強を習慣化するにはまずは作って小さくてもアウトプットすることが大事です。
これはXDの勉強に限らず全てに言えることです。
まずは楽しく遊んで、楽しく作って、アウトプットをしましょう！

2020年3月追記

この記事が何故か拡散して頂けているので、僕の遊びを追加しておきます！

2020年3月のアップデートで登場したアンカーリンクを使ってスロットゲームを作ってみました。新しい機能が来たらすぐ触りましょう！🦐🦐🦐

学びが何一つないアウトプットですね。
（ウィップを複数同時に移動できるのは知らなかった……！）

プラグインを使ってみるのも面白いです！有名じゃないプラグインも積極的に使ってみましょう

努力の割に承認欲求が満たされなかったアセットパネルでドット絵を描くというネタです。凄くないですか？？？

無限に一方向に動いていくループアニメーションを作ってみました。割と簡単に出来るので、研究してみてください！

まだまだありますが、これくらいにしましょう！

補足

今回のスライドで「面白いけど、ハードルが高い」という意見をいただきました。
1000枚のアートボードで作ったものを見せられて「さぁ、あなたも作りましょう！」って言われても、作れないですよね…
今回の例はかなり特殊な例として見てください。普通の人間は1時間もひたすらプロトタイプを繋げる拷問には耐えられません。
そこで、

このようなキャラクターをジャンプさせるアニメーションなどから初めてはいかがでしょうか？
使うアートボードはたったの3枚でこの可愛さです。

作るものはなんでもいいんです。
今回の登壇後に「おみくじの仕組みを使って毎日のお昼ご飯を決めるくじ引きを作ります！」言ってくれた方がいました。とても嬉しかったです。
自分が必要なもの、作りたいもの、なんでもよいのでアウトプットしてみてください。
その小さなアウトプットが何かのキッカケになるかもしれません。
（↓参考資料）

ここまで読んで頂きありがとうございました！
XDUFes2019最後まで楽しみましょう！

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

えび🍤
ここまで読んでいただきありがとうございました！ もし気に入っていただければ投げ銭よろしくお願いします🍤 投げ銭でエビフライを食べに行きます