境祐司（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チームでは、ディスカッションに他チームよりも少し長めの時間を使い、残りの十数分ほどでプロトタイプの作成を行いました。
先生方は「文字の入ったボタンを作って色をつける」「サイトからキャプチャしたダミー画像を貼り込む」といった操作を、アドビの担当者から簡単なアドバイスをもらいながらこなし、あっという間に形にしていきます。
また、アイデアをプロトタイプ化する段階で「この部分には、こういう情報があったほうがいい」「こういう情報を伝えるのであれば、画面はこうしたほうがいい」といった新たなアイデアも次々に出てきます。先生方は、そういった気付きも随時反映しながら、プロトタイプを完成させました。
