トップ
ズームイン
オンラインでもできる！Adobe XDで「防災アプリを作ろう」授業案ワークショップ

2020年9月24日

オンラインでもできる！Adobe XDで「防災アプリを作ろう」授業案ワークショップ

【PR】
Adobeは8月22日、高等学校の教員を対象にAdobe XDを使ったプロジェクト学習『防災アプリを作ろう』授業案のワークショップをオンラインで開催した。

同ワークショップは、2022年度の高校「情報Ⅰ」の必履修化を見据え、Adobe XDのモデル授業「防災アプリを作ろう」を体験するワークショップ。コロナ禍ということもあり、授業体験と共にオンラインでのグループワークを体験できるものとなった。

講師は、Adobe Community Evangelistとして企業や大学・高校でも数々の研修実績をもち、「防災アプリを作ろう」授業案を作成した境祐司氏。

Adobe Community Evangelist
境祐司氏

アイデアを早く簡単に相手に伝える

今回の授業プランは「情報Ⅰ」の中の、特に「情報デザイン」に関する部分にスポットをあてた内容。きれいに作るというより、自分の思っていることを形にして相手に伝える能力、作りながら考える、創造的問題解決能力を育成していくカリキュラム。

ポイントは、しっかり作るのではなく、アイデアを早くたくさん出して、それを形にし、発表し、色々な意見をもらって修正して、また作るという試行錯誤のサイクルを何度も繰り返すこと。この手法はソフトウエア開発などではアジャイル開発と呼ばれ一般的になりつつある。これからはデザイナーなどの専門職でなくてもこの考え方と手法が必要になると境氏は言う。そこで必要となるのが試作品を素早く作り共有できるAdobe XDのようなプロトタイピングツール。XDは単にビジュアルを作るのではなく、「効果的な協働作業とコミュニケーションを支援するツール」であり、直感的な操作で早く簡単に「作りながら考えることができるツール」である。

「自分ごと」のテーマ設定

授業テーマを設定するポイントは5つ。①現実に起こりそうな問題②すでにある程度の知識を持っている③例示がある④応用できる⑤振り返る機会がある。生徒自身が「自分ごと」として、積極的に取り組むテーマがいいと境氏。

日本は災害の多い国であることから、今回のテーマの「防災アプリを作ろう」は、まさに「自分ごと」として取り組めるという。

また、防災アプリは既に数多く存在するが、使いやすさなど課題も多い。それだけ改善の余地があり、取り組みがいのあるテーマということだ。

生徒の気持ちになってオンライングループワーク・共同編集を体験

Adobe XDの簡単な使い方を学んだあとに、グループワークが始まった。今回は、アイデアを出すことに15分。プロトタイプを作るのに30分。最後はZoomの画面共有を使ったプレゼンテーションを各グループ5分といった流れで進められた。

オンライングループワークで助言する境氏とメンバー

グループワークでは3つのチームに分かれ、各チーム約3~4人の教師たちが生徒の気持ちになってAdobe XDに触れてみた。オンラインでのグループワーク・共同作業が初めての先生もいる中、最初はお互いの様子を伺いつつも徐々に打ち解け、短い時間の中で意見やアイデアが飛び交い、話し合いながら分担して作業を進め、時間ギリギリまで試行錯誤が続けられていた。

BチームのXD制作画面

ABC3チームのXD制作画面

グループワークのプレゼンテーション

限られた時間の中で完成した「防災アプリ」のプロトタイプを、各チーム代表がプレゼンテーションしていく。

出典：気象図は気象庁ホームページ　https://www.jma.go.jp/jma/　から引用、加工して使用。

Aチームは、災害時の「状況の把握と情報の通知」にスポットを当てたアプリを提案した。
①自分がいる現在地や周辺地域の状況を知り（状況の把握）、②避難すべきか・待機すべきかを判断し（避難の判断）、③避難する際の安全なルートや持ち物を調べる（避難経路・持ち物）という、災害時の各段階に応じて、必要最低限かつ正確な情報を速やかに得られることに注力したのが特長だ。トップメニューで①～③の各段階に応じたボタンをおき、すばやく必要な情報にアクセスできるのは、混乱が多く判断力が鈍りがちな災害時の状況がよく考慮されている。

続くBチームのテーマは「みんなでつくる防災アプリ」。災害が起きる前・災害時ともに地域住民の声・情報を蓄積して、実際に役立つ情報を提供することにフォーカスしたものだ。「みんなで作る防災マップ」としてハザードマップに「川のこのあたりは、大雨時に増水しやすい」などのコメントを記入できたり、優先的に安否確認をとりたい人を地図上に事前登録できたり、日頃から防災意識を高めることにつながりそう。

災害時には、河川の氾濫状況など住民の声でリアルタイムに最新情報を得られることが期待され、ニーズも非常に高いが、一方で登録された情報の正確さを担保する仕組みづくりがいまだ課題、と境氏から運用面の難しさについてフィードバックがあった。

ラストのCチームは、防災マップ・安否確認など防災アプリの基本的な機能に加えて「ボランティア」をメニューに加えたのが特徴的だ。不足している物資や人手の情報を公開することで、ボランティアを求める人、届けたい人の最適なマッチングが図れる。境氏からもコロナ影響下における災害ボランティアの現状について言及があった。感染対策情報とセットで、必要なボランティアの情報を整理して届けられることが今まさに求められている、とコメント。

各チームのプレゼンテーションを終えて境氏は、状況把握、みんなでつくる防災マップ、ボランティアなど、今すぐにでも実装したい機能であると称賛した。オンラインでのグループワークは慣れるまで多少トラブルがあるが、慣れてしまうと、今まで発言できなかった人が発言できるなど、オンラインならではの色々な効果が見られると述べた。

全体の質疑応答では、「生徒が作ったプロトタイプをアプリにしたいという場合、どうしたらいいのか」という質問がでた。Adobe XDには共有機能があり、プロトタイプのURLを公開すれば、Adobe XDのアプリ不要で誰でもブラウザ上で試したりコメントを記入したりすることが可能。いろいろな人に試してもらった後、実際にモバイルアプリを作るようであれば、紹介できるツールやサービスがあるので相談してほしいという。

ワークショップを終えて

今回初めてAdobe XDを使ったという、市立札幌旭丘高等学校の高瀬敏樹先生は、「最初は少し戸惑ったが、グループで一緒にいろいろやっていく中で、1つ1つ細かく教わらなくても、実際に触りながら感覚的に機能や操作がわかってきたので、初めてでも問題なく使えました」と使い易さを語る。

市立札幌旭丘高等学校高瀬敏樹先生

札幌市の場合、札幌市教育委員会がAdobe Creative Cloudのサイトライセンスを購入しているため、先日Adobe XDを使用する希望を出し、間も無くAdobe XDが使えるようになるとのこと。

使う前は、使い方が複雑で生徒には敷居が高いのではと思っていたが、Adobe XDなら生徒に操作を細かく説明しなくてもすぐ使えそうだという感触を得たという。

また、オンラインでグループワーク・共同編集するのは初めての経験だったので、今回ワークショップに参加し、Adobe XDがオンラインでのグループワークに使えるのを実体験できたことで、「Adobe XDがあれば対面授業でなくてもグループワークができる」という新たな発見があったと語った。

滝川第二中学校・高等学校和田彰子先生

学校法人瀧川学園　私立滝川第二中学校・高等学校の和田彰子先生は、同校もAdobe Creative Cloudを導入したので、情報の学習指導要領改訂により、今後際立つことになりそうな「情報デザイン」の分野でAdobe XDを情報の授業で活用できないかという話が情報科から出たため、試しに今回のセミナーに参加したという。

情報の授業の一環で、あるテーマに則ったwebページを生徒に作成させ、ワイヤーフレームを提案する授業を行っているが、授業の流れによってはhtmlコーディングに集中して終わることもある。今後、「情報デザイン」の分野をクローズアップするのならば、生徒がもっと手軽にUIを操作し、気づきを増やせるような方法がないか、探していた。

Adobe XDを使うと、シンプルな操作でボタンやバナー位置を変えることができるので、生徒にいろいろな視点を持ってもらいやすいという意味で、とても手軽で面白いと感じたそうだ。

またAdobe XDを使うことで、細かく指示をしなくても、勝手に「こうするんじゃない？」と生徒同士で探ってくれる予感がするという。

コロナの影響でオンライン授業をしている最中、ワークショップなどの実習授業をオンライン授業にも取り入れたいものの、様々な準備が必要で短時間ではなかなか難しいと思っていたが、Adobe XDの共同編集機能を活用すればグループワークを簡単に取り入れられるという気持ちに変わったそうだ。

最後に境氏は、授業で使うコツは、教室でもオンラインでも「クラウド上にあるデータをみんなで編集する」という共同学習が重要で、その作業に慣れてもらうために、最初に共同編集の練習を何回かし、簡単なグラフィックを作ってもらうのもいいと語る。

「毎月アップデートされるAdobe XDはチュートリアルが充実していて、共同編集の練習題材などサンプルをカスタマイズすれば、先生の負担にならず、またAdobe XD検定というのもあるので、自己学習でも学校の中でも活用してほしい」と境氏は締めくくった。

高校生の柔軟な頭で、本当に使いやすい防災アプリが誕生する日も近いかもしれない。

《編集長の体験報告》
グループワークの様子は、先生方と一緒に参加してプロトタイプ作成体験をした、ICT教育ニュース編集長の山口が報告します。私は普段、ニュースで使用する写真をPhotoshopで加工したり、媒体資料を作成するのにPowerPointを使ったりする程度のデジタルスキルです。「Adobe XD」は未経験でも使えるということで、参加することにしました。私は3名の先生方とBチームになりました。Zoomのセミナーモードからグループワークモードのブレイクアウトルームに切り替わると私と先生方の顔が並んでいます。自己紹介がひと段落したところで早速、ホワイトボードにテーマの「防災アプリ」に求めることを書き出します。便利なことに、4人が一度に書き込むことが出来ます。「家族や親しい人たちの位置を知りたい」「地図上でも最新情報がわかる」「地域の最新情報はリアルタイムで投稿・掲載できるといいな」など、境先生が話した「自分ごと」や「リアルタイム」がプロトタイプ作成のキーワードになっていきます。「SNSやCOCOAとのリンクも必要かも」などと機能追加のアイデアも出てきます。今回のワークショップは制作時間が30分しかありません。とにかく作り始めましょうとなり、画面を仮配置済みのプロトタイプモデルに切り替えます。「地図持ってきました」。1人先生がプロトタイプの画面に地図の画像を貼り付けていきます。私が数行の見出しをタイピングしている間に、他の先生は、地図の上に図形を貼り付けてハザードマップ風にしたり、吹き出しを配置して投稿情報を表示できるようにしたり、どんどん進んでいきます。流石に授業を仕切る先生方です。段取りがいい。私はコピペしようとしているんですが上手くいきません。「誰かここのタイトルコピペしてください」と叫ぶと、サッと貼り付けられました。チームワークもいいです。最後の3分間の追い込みは凄かった。アイデア出して～話合って～コンセプトまとめて～プロトタイプを作成する。短時間で「みんなでつくる防災アプリ」のプロトタイプが出来上がりました。確かにこれは、Society5.0時代を生き抜くのに求められるスキルだと感じられました。