境祐司（Instructional Designer / Adobe Community Evangelist）
インストラクショナルデザイナーとして教育設計、IDマネジメントなどを中心に活動。2016年より、クリエイティブ活動におけるAI（人工知能）活用のプロジェクトに参画、AIシステムやロボティクス関連の実証実験に携わる。
2017年より、Adobe Community Evangelistとして、主にAdobe Sensei（AdobeのAI技術の総称）やXD関連のイベント登壇、講演などをエンタープライズ対象に開始。また、高校生向けのクリエイティブ講座コンテンツ（Photoshop、XD等）を提供、毎月数回のZoomライブを配信中。
2020年3月以降、コロナ禍におけるオンラインを前提としたビジネススタイルに完全移行し、クリエイティブ作業のリモートワークやプロジェクト管理システムを実践導入、教育機関やパートナー企業へのオンライン化に関するアドバイスを行っている。
2022年度から必履修化する「情報デザイン」
2022年度から適用される新学習指導要領では、高等学校における「情報科」の授業内容が改訂されます。新たに必履修科目となる「情報I」では、プログラミング、ネットワーク、情報セキュリティの基礎に加えて、コンテンツの制作および発信の基礎となる「情報デザイン」をすべての生徒が学ぶことになります。
アドビは、この「情報I」の授業で、情報技術による社会問題解決の方法を、生徒がより実践的に学べるテーマとして「防災アプリを作ろう」と題した授業プランを開発。無料で公開しています（アドビ ブログ）。
「防災アプリを作ろう」は、少人数のグループで情報を収集し、アイデアをまとめ、防災アプリのプロトタイプを完成させてプレゼンテーションするというプロジェクト学習を行う授業プランとなっており、その過程ではアドビのプロトタイピングツールである「Adobe XD」を活用します。
アドビは、8月22日に、この授業プランを使った、主に高等学校で情報科に関わる先生向けのオンライン研修会を実施しました。研修会は、集った先生方がオンラインミーティングツール「Zoom」と「Adobe XD」を同時に使い、防災アプリをプロトタイピングしていく過程を体験するワークショップ形式で行われました。
「情報デザイン」を学ぶためにAdobe XDが有効な理由
ワークショップの講師は「防災アプリを作ろう」の著者である、Creative Edge School Booksの境祐司氏が務めました。境氏は、Adobe XDを含むAdobe Creative Cloudについての豊富な知識と実践経験を元に、Adobe Community Evangelistとして、多くのイベントでの登壇や講演、書籍執筆などを手がけています。
グループワークの開始に先がけ、境氏は、情報Iで学ぶことになる「情報デザイン」が、自分のアイデアをうまくまとめ上げて他者に伝えるコミュニケーションスキルとして、企業や社会に広く必要とされるものになっているため、学生の時にこのようなスキルを身に着けておくことが大切だと改めて強調しました。また、情報デザインを学ぶためのツールとして「Adobe XD」を利用するメリットを、次のように述べました。
「現在、ソフトウェア開発やビジネスの現場では、短い期間の中で、チームのアイデアを素早く形にして世に出し、評価して、改善するというプロセスを繰り返すという進め方が主流になってきています。その中では、作りながら考え、考えながら作るという作業を何度も行います。こうした『アイデアをスピーディーに形にする』過程は『プロトタイピング』と呼ばれますが、Adobe XDはチームでのプロトタイピングのためのツールであり、学習の場でも効果的に活用できます」（境氏）
授業プランのテーマとなっている「防災アプリ」は、災害が日常生活の中で現実に起こり得る課題であること、これまでの体験からある程度の知識を持っていること、例示として実際の防災アプリがあることといった理由から、すべての生徒が「自分に関係のある課題」として積極的に取り組めるものとして選ばれています。
「手書き感覚」で直感的に素早くアイデアを形にする
授業プランは、各回50分、計6回の構成となっており、それぞれ
- オリエンテーションとプロジェクト学習の準備
- 情報を集めてグループで共有する
- アイデアをカタチにする
- プロトタイプを作成する
- プロトタイプを改善する
- グループ・プレゼンテーション
といった内容で進めることが想定されています。今回のワークショップは、約3時間という限られた時間の中で、そのエッセンスを体験することが目的です。また、昨今では新型コロナウイルス感染症の影響で、教育現場でもインターネットを利用したリモート授業を実施するところが増えています。今回のワークショップは、ZoomとAdobe Creative Cloudを同時に利用し、リモートでの授業とチーム作業を、どのように進められるかを実体験する場にもなりました。
参加者には、あらかじめ境氏から「教材」として、Adobe XDの2つのドキュメントファイルがAdobe Creative Cloud上で共有されました。1つは、グループ内で議論したアイデアを書き出していく「ホワイトボード」の役割を果たすファイル。もう1つは、グループのアイデアを「防災アプリ」の画面イメージとしてまとめ上げていくテンプレートです。
Adobe XDには豊富な機能がありますが、今回のワークショップでは、「ワイヤーフレーム」と呼ばれる、線画をベースとした最も初期のプロトタイプイメージを作成することを目的に、最低限の機能にしぼって説明が行われました。
ワイヤーフレームとは、アプリ画面のどの部分に、どのような情報を配置するかを大まかに示した「枠組み」のことです。Adobe XDでは、アプリの画面を模した「アートボード」と呼ばれる領域に、線や四角や丸、画像やテキストなどの構成要素を紙に描き込むように直感的に配置して、素早くワイヤーフレームを作成します。
また「ボタン」などを押した場合、次にどんな画面に変化するかという「画面遷移」の設定も行えます。これは、Adobe XDの「プロトタイプ」画面で、アートボード上の要素と、他のアートボードとを「線」で結ぶという直感的な操作で実現できます。
Adobe XDの「共同編集」機能でグループワークを行う際のユニークな点としては、他の参加者がアートボード上に行った変更が、他のユーザーの画面にもリアルタイムに反映されることが挙げられます。今回のワークショップでも、講師の境氏が「お手本」として、アートボードに追加した図形やテキストが、他の参加者が開いているAdobe XDの画面にも即座に表示されました。参加者も、それにならって思い思いに機能を試すのですが、その様子は他の参加者からも見ることができます。教室でのグループワークでは、床に模造紙を何枚も広げ、その上でグループごとに発表物を作り上げていく作業を行うことがありますが、Adobe XDの1ファイルを参加者全員で共有することで、それと非常に近い環境を、オンラインに作ることができます。
短時間の議論で生まれたアイデアがすぐさま形に
Adobe XDの基本的な使い方について理解した後は、Zoomのブレイクアウトセッション（Zoomの参加者を小人数のグループに分けて、それぞれで話し合ってもらう機能）を利用したグループ作業に移ります。今回は、A～Cの3チームに分かれ、それぞれに「どんな特徴を持った防災アプリにしたいかの議論」から「チームでまとめたアイデアを反映したプロトタイプの作成」を1時間弱で行いました。
Aチームでは、各先生の簡単な自己紹介のあと、さっそく「どのような機能が必要か」の議論に入りました。茨城県から参加し、特別支援学級向けの防災アプリ開発に携わっているという先生は、防災アプリには大きく「防災に関する知識の提供、体験やシミュレーションを通じて学習効果を期待するもの」と「災害が起きた際に、今の状況を把握し、それに応じた必要な情報を提供するもの」の2種類があると指摘。Aチームでは、後者の「リアルタイムな状況の把握と、情報提供」をテーマとしたアプリにすることで合意しました。
では、災害が起きた場合に、ユーザーにとって必要な情報とはどのようなものなのでしょう。まずは、自分が置かれているのが「一刻も早く避難するべき状況」なのか、それとも「しばらく様子を見るべき状況」なのかを把握できたほうがいいという意見が出ました。Aチームでは、そのための仕組みとして「質問に対してイエスかノーかで答えていくと、自分がとるべき行動が提案される」というアイデアが出ました。
まとめ役の先生は、メンバーから出されたアイデアを、ホワイトボードに書き出すように、Adobe XDのアートボード上にテキストとしてまとめていきます。先生方からは、状況判断の基準となる情報の入手先はどこにすべきか、その情報はどのように画面に出せば分かりやすいか、自分だけでなく家族の状況も把握したいのではないか、といったアイデアが次々と出てきます。
今回のワークショップでは、全参加者が同じファイルを共有しているため、他チームの進捗状況も見ながら作業を進めることになります。Aチームでは、ディスカッションに他チームよりも少し長めの時間を使い、残りの十数分ほどでプロトタイプの作成を行いました。
先生方は「文字の入ったボタンを作って色をつける」「サイトからキャプチャしたダミー画像を貼り込む」といった操作を、アドビの担当者から簡単なアドバイスをもらいながらこなし、あっという間に形にしていきます。
また、アイデアをプロトタイプ化する段階で「この部分には、こういう情報があったほうがいい」「こういう情報を伝えるのであれば、画面はこうしたほうがいい」といった新たなアイデアも次々に出てきます。先生方は、そういった気付きも随時反映しながら、プロトタイプを完成させました。
多くのアイデアが反映された3つのプロトタイプが完成
ワークショップの最後は、各チームによるプレゼンテーションです。Adobe XDでは「デスクトッププレビュー」機能を使い、各アートボードの内容をアプリ画面に模した形で表示し、実際の操作に応じた画面遷移をシミュレーションすることができます。プレゼンテーションは、各チームの代表者により、このプレビュー機能を使って行われました。
Aチームのアイデアは「状況把握をサポートするアプリ」です。GPSで把握した現在地の情報と、周囲の地図情報、気象庁が出している気象データなどのリアルタイム情報を組み合わせて利用し、ユーザーが今、取るべき行動を提案します。ポイントは、ユーザーが自分の状況を把握するにあたって「質問にイエスかノーで回答する」という分かりやすい仕組みを導入している点です。また、自分の身の安全が確保できた後で、家族間で安否情報を共有できる機能なども取り入れています。
Bチームのアイデアは「みんなでつくる防災アプリ」でした。近年起きた災害において、公式情報よりもSNSなどで発信された情報のほうが、現場での判断に役立ったという事例に着想を得たといいます。プロトタイプには、地図上に現場の状況を直接投稿できる「みんなで作る防災マップ」や、事前にアプリへ登録しておいた人たちの安否情報や最終確認場所を共有できる機能、避難場所に関する公式情報と、その避難場所にいる人たちが発信する情報を統合表示できる機能などが盛り込まれました。
Cチームでは、テンプレートにあらかじめ含まれていた「防災マップ」「安否確認」「最新の災害状況」「防災を学ぶ」といった項目ごとに、どこから得た情報をどのように表示すれば便利かというアプローチでプロトタイプを作りました。チームで独自に追加したのは「支援・ボランティア情報」に関する項目です。この項目は、災害発生後の被災地各所で、不足しているものやボランティアに関する情報を集約し、より早い復興を支援するためのものになります。現在は、新型コロナウイルス感染症の影響で、復興支援ボランティアの募集や参加にも、コロナ以前とは異なる配慮が求められます。そうした状況を加味した上で、支援を求める側と支援したい側とをつなぐ仕組みとして、発展が見込めそうなアイデアでした。
今回のワークショップは、あくまでも「アイデアをプロトタイプ化する」過程の体験を目的としたものですが、各チームが作成したプロトタイプには、わずか1時間弱のグループ作業の中で生まれた、発展が期待できそうな多数のアイデアが反映されていました。
境氏は「今回体験していただいた、Adobe XDによるプロトタイピングは、あくまでもグループで意見を集めて、その中にあるアイデアを確かなものにしていくための最初のプロセスです。より上級の内容になりますが、他の開発ツールなどと組み合わせながら、このアイデアを実際のWebサイトやアプリとして作り上げていくこともできます。また、オンラインでのグループワークは、システムや回線のトラブルなども起こりがちですが、実際に経験を重ねることで、オンラインならではの新しいグループワークの進め方が見えてくると思います。今回体験したことを、ぜひ授業で役立てていただければと思います」と述べて、ワークショップを締めくくりました。
オンラインならではの「新鮮な体験」が情報Iの授業スタイルを変える
今回のワークショップでは、Zoomのチャット機能を使って、参加した先生方のコメントや質問を受け付けていました。グループワーク後には「オンライン実習の可能性を感じられた」「オンラインで同じ画面を見て、話しながら協働制作というのはとても刺激的な体験だった」との感想が多数寄せられていました。
研修終了後に、Aチームでグループワークに参加した、筑波大学附属駒場中学校・高等学校の植村徹先生と、兵庫県立西宮今津高等学校の白井美弥子先生にお時間をいただき、研修の感想をお聞きしました。
既にオンライン授業化を進めているという筑波大学附属駒場中学校・高等学校の植村先生は、「『プロトタイピング』という言葉は聞いたことがありましたが、それが情報Iで扱う『情報デザイン』とどのようにつながるのかは、十分に理解できていませんでした。今回、短い時間でしたが、実際に他の人とディスカッションしながら、もやもやした考えを形にしていく過程を体験して、理解を深めることができました」と話してくれました。
また、兵庫県立西宮今津高等学校の白井先生は、「ZoomとAdobe XDを同時に使って他の人と何かをやるというのは初めてでしたが、会話による議論とAdobe XD上での作業が、どちらもリアルタイムで全員に共有されるというのは、新鮮な体験でした。情報Iでは、HTMLやCSSのようなサイト構築技術の基礎についても扱いますが、今回体験した情報デザインに関わる内容とつながるような授業の進め方も考えられると思います」と、ワークショップの内容を評価していました。
Adobe XDを使った授業展開については、植村先生も「Adobe XDの素晴らしいところは、スマホアプリに模した画面遷移でのプレビューが行えるところです。こうした形で自分たちが作ったものが表示されると、生徒たちのノリも違います。『防災アプリを作ろう』自体も良い教材ですが、Adobe XDによる成果物をWebで共有できるような形にすれば、文化祭などさまざまな機会でクラス展示などにも応用できるだろうと思います」と、他の学習機会への応用にも期待を述べていました。
今回のワークショップを通じて「作りながら考え、考えながら作る」ことを体験した多くの先生方が、「情報デザイン」の意義や楽しさを授業の中で生徒たちに伝えることで、情報科は、生徒たちにとっても、さらに意義深い学びの場になっていくのではないでしょうか。
