Adobe XDで高校生がアプリのプロトタイプを制作〜「情報Ⅰ」の新内容に対応した授業案「防災アプリを作ろう」を足立学園で実施
高校の情報1必履修化に対応し、アドビが開発・リリースしたAdobe XDを使ったプロジェクト型学習「防災アプリを作ろう」授業案を元に、アプリの企画、デザイン、プロトタイプ作成、改善までの6時間プログラムを実践された足立学園中学校・高等学校の公開授業をレポートします。
高等学校で2022年度入学者より実施される新学習指導要領では、「情報Ⅰ」が必履修となります。アドビでは昨年5月に新たな学習項目「コミュニケーションと情報デザイン」に対応し、Adobe XDを使用する実践的な授業案「防災アプリを作ろう」の無料公開を開始しました。全６時間のプロジェクト学習で、アプリの企画からデザイン、プロトタイプの作成、改善までを行い、実践的に情報デザインを学べるプログラムです。そしてこのたび2020年11月から足立学園中学校・高等学校の高校１年生全員が情報科の授業でこのプロジェクト学習に取り組みました。2021年2月5日（金）に行われた1年B組の公開授業の様子をレポートします。
1人1台のPC環境でリモートの共同編集も
同学園はMicrosoft Showcase School認定校でもあり、1人1台のPC環境をBYAD（Bring Your Assigned Device：学校指定購入機器の持ち込み）で整え学校活動の様々なシーンで活用しています。今回の授業では、生徒機であるMicrosoftのSurface GoでXDを利用しています。
生徒所有のSurface GoにXDをインストールして使用
授業や課題など日常的な先生・生徒間のコミュニケーションもMicrosoft Teamsで円滑・活発に行われている
すでにここまでの授業で、3〜4人のグループごとに、機能やデザインを検討して防災アプリのプロトタイプを作成してきました。XDの共同編集機能を生かして、毎回の授業との授業の間に少なくとも１度はグループごとにリモートでの制作作業も行っています。学校で作業できない日に各家庭からMicrosoft Teamsでつながり、会話をしながらXDで共同作業するというスタイル。情報科の杉山直輝先生は「まさに実際の社会でいま行われているテレワークのスタイルで、生徒にとって良い経験になりました」と話します。オンラインコミュニケーションに慣れている今の高校生たちは、リモートの共同作業にも抵抗がなかったようです。
この日はいよいよ、制作したプロトタイプを評価し合いブラッシュアップする活動が行われました。
Surface GoとモニターをType-Cケーブルで接続し拡張でモニターを使用する様子。グループ内で役割分担してプロトタイピングが完成した
ユーザーの視点をもつ
グループごとに、他のグループのプロトタイプをチェックして良い点と悪い点をあげ、Microsoft OneNoteに書き残します。皆和気あいあいと自由に意見を交わしながら率直なコメントを残していきます。2グループまわったあとに自分たちのプロトタイプに戻り、コメントを参考に修正を加えることになりました。杉山先生は「今回は限られた人からの意見なので、もっといろいろな層の人が見たら違う意見も出るということを想像しましょう」と声をかけます。
コメントを見ながら意見を交わし修正方針を検討する生徒たち。参考にするために実際に世の中で使われている防災関連アプリをチェックしている姿もあります。話を聞いてみると「自分で作ったものは愛着があるので第三者の視点で見られないところがありました。気づけなかった部分が見えてよかったです」という声もあれば、「便利にするために考えた部分をわかりづらいと言われたときはちょっとイラッとしました。でも、作っている側にとっては簡単でも、初めて使う人にとっては難しいのだと気づきました」という声も。
自分が真剣に考えて制作したからこそ、他の人から意見をもらうと、最初は素直に受けとめられず痛みを感じることもあります。そんな心情を経て、作り手側の思いだけで終わらせずに使う人の側の視点を持つきっかけになった様子が伝わってきました。デザインや開発の重要な工程であるユーザーテストの貴重な経験です。
他者からのフィードバックを参考に、グループ内で話し合いながら1つのプロトタイピングをブラッシュアップしていく
グループごとにコンセプトを決め、メニューや画面デザイン・遷移などをプロトタイピングで表現
生徒にとってアプリは身近な存在
今回グループ学習を実施してみて、杉山先生は「こんなに意見を言う生徒が多いのだということに気づきました」と、個人制作との違いを実感しています。わからないところを教え合うのとは違い、機能やデザインについて自然と活発な意見交換が生まれます。また、スマートフォンに慣れている今の高校生にとってアプリはとても身近な存在。アプリを題材にした今回の授業は、印刷物やホームページを題材にしたときよりも生徒の高い意欲を感じたということです。
足立学園中学校・高等学校 情報科主任・技術家庭科主任 杉山直輝先生（Microsoft認定教育イノベーター）
生徒からは、「自分で作ってみて、頭の中のアイディアを形にするのは意外と難しいことだと感じました」「ふだんアプリを使うときに、こういう作りだったんだな、と思うようになりました」など、機能やデザインを自分で考えたからこその実感の声があがります。また、「防災アプリはいろいろな人が使うので、直感的にわかりやすく操作できる必要があると思いました」という声も。見た目を整えるだけでなく、ユーザーを想定し、使いやすい画面の構成や、配置を考えることが情報デザインの大切な要素だという実感が得られたようです。機能・画面デザインの設計から実際の挙動を確認できるプロトタイピングまで一気通貫にでき、ユーザー目線で評価・改善をしやすいXDならではの利点が学びに活かされた形です。
XDで制作したプロトタイプはスマートフォンでの表示や挙動も確認可能
杉山先生は、「XDを初めて知りましたが、ここまでイチから考えて作りこめるというのはいいですね。アプリ制作を授業の題材にできるとは考えていませんでした」と話します。現在行っている授業ではデザインを深く扱わないので、「情報I」の新項目「コミュニケーションと情報デザイン」でこの授業案を活用することに可能性を感じているということです。
「思ったより簡単！」
生徒のみなさんに聞いてみると、アプリというとプログラミングのイメージが強く、開発過程に、機能やデザインを検討してプロトタイプを制作する工程があることはこの授業で初めて知ったそうです。XDを使ったのは皆初めてでしたが「やってみたらシンプルで簡単にできました」「操作自体は難しくないと思いました」と戸惑いなく操作できた様子。
一方、先生にとっては、新しいツールの導入段階においてXDの習熟が負担に感じられがちです。杉山先生も生徒に指導できるように先回りして機能を把握しようと苦心されたそうです。が、アプリの画面と遷移についての簡単なマニュアルを作り、生徒は冬休みの課題としてXDの基本操作を自習して覚えられたとのこと。アドビではXDの使い方を生徒自身が個別に学べるように、基本的な操作が学べるスターターキットや操作方法の動画を豊富に公開しています。生徒の皆さんは「簡単」という感想を持っているほどですから、きっかけさえあれば自ら吸収し、わからないことは自分で調べる力があります。先生の負担を減らすためにも、ツールの操作方法は生徒自身が動画で習得するというのが、これからの新しい授業スタイルになりそうです。
(文／狩野さやか)
こちらもぜひご覧ください。
Microsoft Surface×Adobe XDが創造力を養う協働学習を実現…足立学園の取組み
▼関連リンク