XDで楽しい“お家時間”　子どもの教育にも使えるAdobe XDの活用法

おうち時間の過ごし方

佐藤修氏（以下、佐藤）：「『お家時間』の活用法　〜Adobe XDで考えるこれからの学びのカタチ〜」のテーマでお話しします、佐藤です。どうぞよろしくお願いいたします。

まず、簡単に自己紹介から。十数年間自宅でデザイナー中心の仕事をしていましたが、昨年末から株式会社ヤプリにジョインして、現在は、ブランド系の活動をやっております。

今は外出自粛ということで、みなさん大変苦しい思いをしているのではないでしょうか。私もどの程度運動をしているのかと思って、調べてみたらビックリするぐらい歩く量が減っていました。以前は5、6,000歩だったのが最近は500歩前後という、危機的な運動不足に陥っているのでちゃんと運動しなきゃなと思っています。

ただ、困っているのは僕ら大人だけではありません。家の中に籠っているお子さんたちもやっぱりお困りだと思います。遊びにも当然限りがあるので、飽きてきたりするんですよね。

そこが今日の話の出発点です。そういった状況なので、クリエイティブな特技とかでサポートできたらいいのかな思っています。ちょっとXDとは関係ないんですが、うちの子どもが塗り絵がしたいというので絵を描いてプリントアウトしたら、楽しく遊んでもらえました。

「やったぁ！」という感じで、こういうことで時間を潰していました。今回はXDの会なので、今Adobe XDで何ができるかについてちょっと考えたいと思います。

今日の背景と本日の流れですが、外出自粛でお家時間が増えてお子さんたちが退屈している状態です。なので、XDを使って何かできることを探してみるのが今日のメインのテーマになっています。XDを少し使ってみたら教育方面に可能性を感じたので、そちらについても話を広げていきたいです。

XDで太陽系の距離感を体験する

XDで退屈しのぎのコンテンツを作りました。2つほどを実際のデータと合わせて紹介します。

最初に神奈川県の地図を作りました。私は神奈川から今回登壇しています。せっかく子どもたちを楽しませるのに近い距離のスケールの話をしてもおもしろくないと思ったので、もうちょっと大きい話、日本かな？　いや、世界かな？　いや、どうせだったら宇宙まで行ってしまえ！　というので、宇宙のコンテンツを作りました。

太陽から冥王星までの距離の比率をスクロールで体験できるものです。星の大きさは適当なので全部同じですが。アンカーボタンが付いていてスクロールで行き来ができるコンテンツを作りました。

このコンテンツについて、操作面の機能的な部分を紹介したいと思います。アンカーリンクの設定は比較的最近のアップデートで付いてきたものです。古いユーザーさんだと、もしかしたら見落としている可能性もあるので説明します。

オブジェクトをタップしたら「ここにスクロールしてね」がパラメータの見方です。アンカーボタンを押すとスクロールが止まります。これをどこで見ているのかというと、Y-オフセットの部分です。こちらの数字を見ていて、こちらを例えば-380とかに変更してあげると、ボタンをタップしたときのスクロール位置を変更できます。アンカーリンクの使い方の説明でした。

3蜜BUSTERSでXDを体験

次に紹介するのが「3蜜BUSTERS」というゲーム。けっこう前にTwitterとかでも流したものです。そのときに「いいね」が付いて見てくれた方がたくさんいたのですが、今日も改めてこちらを紹介したいなと思っています。みなさんお手元にスマートフォンはありますか？

少しこちらの体験タイムを取ろうかなと思っています。実際に触っていただいて、これがどんなゲームなのか体験していただければうれしいです。

表示しているQRコードを読んでいただくとXDのプロトタイプ共有の画面に行けます。こちらを体験していただいて「どう作っているのかな」かをなんとなく感じ取ってください。それから、どう作っているかを解説します。3分ほど時間を取りますので、ぜひ参加してください。

その前にどんなゲームか説明すると、いわゆる『ウォーリーをさがせ！』的なゲームです。ターゲットを探して見つけたらタップするうゲームで、全編XDだけで作れています。

（参加者がゲームで遊び中）

3分経ちましたかね？　そろそろ終わりましょうか。

では種明かしから。実際の実データをご覧ください。こちらが実際のXDになっているデスクトッププレビューを見ています。

「このゲームはターゲットを探すゲームだよ！」。この「ターゲットを見つけてタップしよう！」というゲームです。ちょっと反応が悪いときがあるけど諦めずにタップしてみてください。じゃあ始めましょう。3、2、1。

どこだどこだと、みんな同じような服装ですね。どこにいるかわからない、あー！　と言っているうちにタイムアップというかたちで「密閉　密集　密接」の三密状態になってゲームオーバーになるゲームです。

実際にこちら。ステージ1のターゲットはここにいらっしゃるんですが、ポチっとやるとミッケ！　というかたちで1ST STAGEはクリアできます。続いて2ND STAGEに行きましょうと。そんな他愛もないゲームを作りました。

こちらが実際に作った画面の全体像になります。構成的にはこんな作りです。左上にこのゲームはこういうゲームだよというイントロ。あとはステージごとにまとまっていて、右下にエンディングがある構成になっています。実際にその中の1ステージを見てみましょう。

この中はどうなっているのかというと、最初はこれがターゲットだよという説明、次に3、2、1とプレイ準備のためのカウントダウン。10秒以内に探してくださいというのをこの3枚でやっています。これはなぜ3枚かというと、XDのタイムアウトトランジションは5秒が限界なので、5秒を2枚で割って3枚目はあとの流れの分岐のために用意している感じになっています。

最後のこちらがバッドエンドとハッピーエンドの分岐。以上がステージ全体の作りです。

アニメとオーディオを活用する

紹介したゲームの中でノウハウ的なものがあるので、それを数点紹介しようと思います。

アニメーションとオーディオのところなんですが、オーディオ機能も比較的最近追加された機能です。簡単に説明すると、プレイ時にボタンを押したらピコッと音が鳴ったと思います。なぜ鳴るのかは、ボタンをタップしたら次のアートボードに自動アニメーションしてねと設定しているからです。そのときにここにもう1個オプションがあって、「ピコッ！」って音も鳴らしてねと、こういう作りになっています。

インタラクションの設定のところでトリガーに対して2つ以上のアクションがつけられるようになっています。しかし、ものによってはできないものもあるので注意が必要です。

例えば、「三密状態になってしまいましたよ」というトリガーのところも、アートボードが表示されたらすぐに次のアートボードに自動アニメーションしてねという設定になっています。こちらは追加でアクションができません。こちらは時間トリガーにはアクションが1個しか設定ができない、アクションが複数付けられるものと付けられないものがあります。そこは注意してください。

2つ目のトピックスは、異なるスピードの自動アニメーションについてです。カウントダウンが始まって探してくださいとなったときにサーッと人がいっぱい動きましたよね。そのときにスピードの速い人と遅い人がいたと思います。アートボードのAとBで移動距離が遠いほど移動速度が速くなって、移動距離が近いほど速度が遅くなる特性があります。

そのときの2枚のアートボードの中間アニメーション。中間アニメーションとは何のことかと言うと、実は移動中の重なりでターゲットが隠れることも計算して作っていました。わかりやすく説明すると、移動中にモーションが掛かって重なる瞬間があるからです。

ただ、この重なっている瞬間ってアートボードを作っているときには見えなくて。アートボードの左側が1枚目、2枚目は右側というようにアートボードを作ると思います。実は重なる瞬間はアートボードだけを見るとわからなくて、実際にプレビューとかで動かしてみないとわかりません。なので中間のアニメーションを想像するのが、今回の肝になっていました。

こういうゲームを作ると当然お子さんたちも喜んで楽しんでくれる。「よかったよかった」ということなんですけど、実はこれちょっとした副産物があります。プレイしたお子さんはどんなリアクションをするかというと、「スゲー！　父ちゃん母ちゃん、こんなの作れるんだ！」と尊敬の眼差し。こういったことが起きます。その価値なんとPRICELESS！

これ1回言ってみたかったんですよ。「PRICELESS」って。もう1回言っていいですか？

PRICELESS！（笑）

そうなんですよ、こういう付加価値があるんです。お父さんお母さん、お子さんの前で株を上げるチャンスですよ！　XDで物づくりに挑戦してみてはいかがでしょうか？

XDは教育でも活用できる

とはいえ自粛期間が長引いているので、お子さんの学習面も心配になってきますよね。というところで、この「楽しく体験する」というのを勉強にも何か取り入れられないかな。これが後半のテーマになってきます。

ということで、教育での活用についての話です。ここでの教育の定義的なものは、教育＝学びだと思います。いわゆる新しいことの吸収作業かなというところで、吸収効率のいい方法としてXDを使ってみたらどうかなという考え方です。具体的に教材っぽいものを作ってみました。

例えば算数。みなさんいいですか？　今から小学2年生の気持ちになってください。いいですか？　今から小学2年生です。はい、小学2年生になりました！　ではどんな問題が。

初めてひっ算を教えるときみたいな。これを実際に小学生が触る画面だと思って見てください。

（システム上での音声案内）位ごとに縦に並べると計算しやすいよ。

縦にすればいいのか。しかも音声でガイドもしてくれると。

（システム上での音声案内）一の位だけ見ると7＋2で9だね。

なるほど。

（システム上での音声案内）では、十の位はいくつになるかな？　答えの数字を入れてみよう。

なるほど、そういうかたちで来ましたか。これを実際に私が当ててもいいんですけど、決められたものが出来レース的にできていると思われるのはいやなので、ロシアンルーレットを作りました。これでいくつがあたるか、それでいこうと思います。いきます！　せーの！

1！　じゃあ1でいきましょう。ドラッグで充てていきます。「本当かな？」と言われちゃいます。ダメでした。もう1回いってみましょうか。9！　いかなかった。7。すみません、7いきますね。7をドラッグしました。「本当かな？」。間違えていると戻されるんですが、3＋1の答えは4ですね。4をドラッグしてあげるとせいかーい！　となりますね。こんなことができました。

今のやり方はXD側が用意したものしか、児童は触れることができません。やっぱり書く作業も必要かなと思って、XDにどう取り込もうかなと考えました。そこで紹介したいのがWhiteboardというXDのプラグインになります。

XDを使った教材のメリット

こちらは本来カスタマージャーニーマップやマインドマップが、テンプレートで予め登録されています。さらに1クリックでこの状態でアートボードに出してくれる素晴らしいプラグインです。その中の機能の1つにこちらのスケッチの項目があります。これを使うと、選択したアートボードのときにスケッチの機能を使うと、いわゆる鉛筆ツールで描けるようになります。

実際に児童が書いたものを先生と共有が可能です。先生からコメントをもらって、児童がそれに対して返信するコミュニケーションができます。インタラクションを使ったコンテンツを提供できて、しかも共有でオンラインコミュニケーションができます。

全部紹介はできないかもしれないので飛ばしながらなんですけど、例えば体育。

最近は、ダンスも必修科目になったりしていますが、ダンスの振り付けをどうやって説明します？　テキストだとわからないですよね。テキストだけを見てどんなダンスかみなさん想像できますか？　できない。じゃあ静止画で絵が付いてきます。でもこれでも動きがわからないとなったらやっぱりアニメーションがいいじゃないかと。

アニメーションは伝達する情報量が多いので、よりわかりやすく伝えることができます。

静止画で見たり、希望に応じてアニメーションで見たりできるコンテンツが用意できると思いました。静止画とアニメーションのハイブリッドで利用できるのが、XDのファイルとしての強みの1つであると思います。

あとは音楽。これは単純に僕がほしいと思って作ったものですが。音楽はCマイナーとかのコードがありますよね。五線譜に書かれていてもちょっとわからないなと思っていて、「これ！」って音を聞かされてもそれもわからない。

これの感覚は何かなと思ったときに、僕らで例えると、カラーコードだけを見せられて色を想像しろ、と言っているのと同じようなものだと思っています。じゃあこうしたほうがいいんじゃないの？　としたものが、実際に何のコードは五線譜で、どこに記号で、鍵盤は最終的にどれを押すの？　これがあると覚えやすいなと思ったので、こんな使い方もあるかなと。コードと押す鍵盤音の3情報を同時に得られる。

たくさんの情報が同時に一斉に得られるメリットもあると思いました。

時間の関係で他は割愛しますが、「楽しく体験する」を勉強に取り入れられないかとなったときに、できるんじゃないの？　と思いました。今紹介した通りいろいろな機能があります。その中で一番大事だと思っているのが、充実のメディア機能で体験設計に困らないこと。何かやりたいなと思ったことはだいたい叶えられるような性能を持っているのが、XDのいいところだと思いました。

国際競争に勝つために必要な「IT力」

ただし、Adobe XDが本当に教育に必要なのか疑問が出てきます。機能が充実している＝教育の現場で使えるわけではありません。実際どうなのかというと、文部科学省が公開している資料に『高等学校情報化「情報I」教員研修用教材』というものがあるそうです。こちらを紹介していただきました境祐司さん、貴重な情報をどうもありがとうございました。

こちらの情報を境さんに教えていただいて、僕なりに解釈した話をこれからしたいと思います。「はじめに」の部分を読むと、人工知能のAIやIoTが広がったりしてSociety5.0とも呼ばれる新たな時代が来る。と書いてあります。しかし、Society5.0はどういったものなのかと思って調べました。

日本経団連（日本経済団体連合会）で見つけたんですが、その昔、人類誕生の頃は狩猟社会で、それがSociety 1.0。紀元前13000年の頃にSociety 2.0で農耕社会。工業社会があった18世紀末がSociety 3.0で、20世紀後半が情報社会でSociety 4.0。それで21世紀後半がSociety 5.0という文脈になっています。

その5.0って何？　内閣府でこう定義しているそうです。サイバー空間とフィジカル空間、仮想空間と現実空間を高度に融合させたシステムにより、経済発展と社会的課題の解決を両立する人間中心の社会。こんなものが提唱されていました。そういう時代が来るから文科省でも高校の学習指導要領を見直しして、情報活用能力を評価しましょう。

そのために新しい科目として情報Iを必修科目にする流れです。そういう流れがあるので、生徒に教える前に教員の方の研修用の資料として配布されているのが、『高等学校情報化「情報I」教員研修用教材』になります。その中身は非常に興味深いものがありました。「コミュニケーションと情報デザイン」という項目です。

中身はどうなっているの？　と思って見てみると（ア）メディアの特性とコミュニケーション手段。（イ）情報デザイン、（ウ）効果的なコミュニケーション。いわゆる問題解決や人間中心設計、ペルソナとかプロトタイプとか今の僕らの仕事に親和性の高い単語がいっぱい並んでいます。

実際に中身でプロトタイプ、ペーパープロトタイピングや何かしらツールを使ってやってみよう、といったものも研修の資料としてはあるようです。

ざっくりまとめると、Society5.0という時代に備えて情報活用能力を育てましょう。それを実行するのが2年後……つまり令和4年度の高校で必修科目になる。その内容の一部では「コミュニケーションと情報デザイン」というのを扱います。そこで、主体的な試行錯誤や協働的な解決力の習得をする。

さらに高校だけではありません。小学校にも別の取り組みがあります。プログラミングについてです。文科省、総務省、経産省がコラボしてポータルサイトを作っていました。いわゆるプログラミングについて小学生に学んだり楽しんでもらうためのサイトです。その中の座長挨拶のところに書いてありました。

小学校のプログラミング教育は、プログラミング言語そのものを学ぶだけではありません。課題の発見と解決する力に向けてのプロセスを身につけてもらうことが狙いだそうです。それはなんでやるの？　目的についても書いてありました。国際社会における競争力を左右するのは、「IT力」である。それを強化するために、プログラミングの教育とかに力を入れるそうです。

今ご紹介した2つだけでも、共通して国際社会における競争力を高めるためにこういったものを学習教材として取り扱うそうなんですね。試行錯誤をして協働的に解決する力や、誰かに伝える伝達力。それを最新のデジタル技術を用いて学びましょうというのが目的だそうです。

でもそれはけっこうXDがカバーしているフィールドじゃないかなと思っています。これは間接的にXDでこういったプロセスを改善やトライアンドエラーをしましょう。みなさんで協力してコミュニケーションを取りながらよくしていく動きは、間接的に国力を上げていると言っていいと思いました。

そういった意味でAdobe XDは教育に必要なのかと言ったら、これはYesかなと思います。

XDは日本を成長させる

今日のおさらいです。

まず「お家時間」に退屈する子どもたちがいたので、何か物づくりで笑顔にしたいのが今回の話の始まりになります。「お家時間」の長期化が心配になったので、物づくりを使って学びのサポートができないかを模索しました。そのときにXDを使ったこともあるんですが、XDの機能に学びのサポートという可能性を感じました。その中で国も時代に合わせて教育も変化しようとしていると、そんな流れです。

今日ご紹介したコンテンツはいわゆる娯楽から始まり、そこからもうちょっとエンタメ的な要素が加わります。教育とエンタメのコラボの話が出てきて、それで教育という流れがありました。そう考えると最初に自分がやっていた視野はめちゃくちゃ狭いなと思っています。結局教育として考えると世界に対しての日本の国力みたいな、経済にどれだけ貢献できるかみたいな話になってきました。

すごい大きい話で、XDを使ってみなさんが知りたいこととかでよく上がっていると思います。試行錯誤や協力してモノをよくしていく、そんな文脈があるのではないでしょうか。そういうのは総じて、世界に対する日本の競争力向上に貢献していると言っていいのではないでしょうか。そう考えたらXDを教育で使ってもいいと思います。

誰かと誰かが手を合わせて何かを作っていく。そんな教育をAdobe XDでできたらいいなと思いました。「Make Education with Adobe XD」。私の話は以上です。

ご清聴ありがとうございました。