Adobe XDのワークショップで学ぶ、高校の情報デザインに必要なアイデアとは？
2019年11月23日、Adobeでは高校の情報科教員を対象に「＜社会と情報＞デジタルツールで防災マップを作ろう」と題したワークショップを開催しました。
このワークショップは、高校の情報科の先生方が、高校生向けのAdobe Creative Cloudを活用し、新しい情報デザインの授業を体験できる場です。2022年から始まる新学習指導要領では、情報デザインの分野が新たに設けられ、先生方にはデザインの知識も求められるようになりました。Adobeでは、高校の情報の授業がより充実することをめざして、先生方の授業づくりをサポートできるよう、オールインワンのデザインツール「Adobe XD」を活用したワークショップを企画しました。
当日のワークショップの様子
AIの登場により、デザインの仕事はさらに変化している
当日のワークショップを担当したのは、Creative Edge School Books の境祐司氏です。同氏はAdobe Creative Cloud製品に関して豊富な知識を持つとともに、Adobe Community Evangelistとして活躍しています。制作現場での経験も長く、イベント登壇や講演も数多く行っています。
境氏によると、最近はAdobe Creative Cloudを導入する学校が増えているため、企業やビジネスパーソン向けのAdobe XD講座に、高校生が参加するケースが見られるといいます。なかには、大人と変わらないレベルの質問をする高校生もいて、「Adobe XDを使いこなす高校生は確実に増えていることを実感します」と述べています。
Adobe Community Evangelistの境祐司氏
ワークショップは最初、境氏による「デザインに関する時代変遷」のレクチャーから始まりました。デザインの仕事は、テクノロジーの進化によって、昔と今では働き方が大きく変化しているため、まずは、その現状を知ることが大切だというのです。
境氏によると、デザインの変遷でポイントとなるのは、DTP環境の基礎技術となった「Adobe PostScript」が生まれた1985年と、インターネットが商用化された1994年。DTPが生まれたことによりデジタルデザイン革命が起こり、それまで手作業で仕事をしていたデザイナーたちが、これからはコンピュータで仕事をする時代だという認識を持ち始めました。そして、インターネットが商用化された1994年以降は、社内のマルチメディア部がインターネット事業部に変わり、これに合わせてデザイナーの仕事内容も大きく変化。この時期は、名刺の肩書きが変わったデザイナーも多くいたといいます。
まずはデザインの変遷を知るところからスタート
そして、今。AIの登場によって、さらにデザインの現場は仕事が変化しています。Adobe Creative Cloudも2012年にリリースされた当時から、機械学習を搭載していますが、2016年には、Adobeの人工知能「Adobe sensei」も新たな機能として追加。これにより、作業の省力化に加え一般ユーザーでもプロ並みの処理が可能になりました。
境氏は「AdobeのAIの特徴は、プロのデザイナーのデータで学習し、クリエイティブに強いAIであるということです。これからのデザインはAIが得意な作業はAIに任せ、人間はアイデアを出すなど、創造性を発揮する作業が求められる。このワークショップでは、その体験と実感を味わってもらいたい」と述べました。
プラグインによる作業の効率化、AIのすごさも体験
さあ、ここからは実際に手を動かして学ぶ「Adobe XD」のハンズオンです。先生方は最初、Adobe XDの基本操作から学びました。
境氏はAdobe XDについて、「プロトタイプを作るのに適したツールであり、きれいに作り込むための作業には向いていません」と説明。そのため、Adobe XDはAdobe製品の中でも機能が少なく、ユーザーが自分の用途に合わせてプラグインを利用しながら作業を進めるのが特徴だといいます。先生方は、基本操作を学んだ後に、プラグインのインストール方法についても学びました。
今回のハンズオンで利用したプラグインは、下記の６つ。
・Trimltー入力したテキストの長さに合わせて、テキストエリアを調整
・Split Rows—ひとまとまりのテキストレイヤーを分解し、別々のテキストレイヤーを作成
・Angle—傾いたデバイスのモックアップにデザインを貼り付け
・This Person Does Not Exist—AIにより実在しない人物の画像を生成
・unDraw—ハイクオリティなイラスト素材が無料で利用可能なサイト
・Google Sheets for XD— Google スプレッドシートからデータを読み込み一括でXDに表示
境氏は、ひとつひとつのプラグインを実際に動かし、作業がどのように効率化されるのか、丁寧に説明しました。たとえば、テキストの長さに合わせてテキストエリアをトリミングするプラグイン「Trimlt」は、プラグインを使用するのと、しないのとでは作業時間が大幅に異なります。ゆえに、「高校の授業では、1時間で出来ることが限られているので、プラグインを使うことは必須です」と強調。先生方は、こうした授業のポイントを聞きながら、手元のコンピュータでプラグインを動かしていきました。
Split Rowsのプラグインを説明中
続いては、AIが肖像権のない人物画像を生成するプラグイン「This Person Does Not Exist」を体験。境氏が、メッセージ画面にある顔写真の範囲をマークし、1クリックすると、あっという間にAIが顔写真を生成して当てはめていきます。この様子を見て、先生方からも「お〜！」と驚きの声が。AIの“すごさ”を目の当たりにしました。
「This Person Does Not Exist」のプラグインを体験中
境氏は、このようなプラグインの機能を先生方に紹介した後で、「Adobe XDを活用したデザインでは、プラグインで作業をどんどん自動化・効率化し、人間はアイデアを出すなど創造的な部分に時間を使うことが重要です」と強調しました。そうでなければ、作業で時間を使い果たし、多様なアイデアも出てこないといいます。高校の授業に置いても、そうした部分を大切にしてほしいと伝えました。
プラグインの機能を体験した後は、いよいよワークショップの本題である「防災マップをつくろう」のグループワークに取り掛かりました。これは、これまでAdobe XDで学んだことを踏まえて、防災マップアプリのアイデア出しをしようというものです。境氏は、「とにかく短い時間で、どんどんアイデアを出して、形にしてみてください」と先生方に促します。先生方も、チームごとに話し合って、どのような防災マップが求められるか、アイデアを出し合っていきました。一人がAdobe XDでプロトタイプを作りながら、またもう一人は情報収集を行うなど、さすが先生方、グループワークもスムーズに良い雰囲気で進められました。
「防災マップアプリをつくろう」をテーマにしたグループワーク中
短い時間で、アイデアが続出
最後は、チームごとに作った作品を発表し合います。作業自体は短い時間でしたが、さすが先生たち。使いやすさを重視しつつも、アイデア溢れる防災マップが仕上がりました。
Aチームは、“避難所に行く時に役立つ”という視点でマップをデザイン。どの年齢層にも分かりやすいように、避難所の情報をピクトグラムで表示しました。具体的には避難所の「収容人数」「ペットの可否」「蓄電器の有無」「スペースの空き情報」など、避難所のピクトグラムと共に表示させます。
またマップには、標高や海抜など避難所の高さを表示したり、階段部分をマークしたりと、避難所に着くまでの高低差を表示するアイデアを盛り込みました。ほかにも、外国人のために、日本語と英語で表示することや、避難している最中は、手でスマートフォを操作するのがむずかしいため、音声入力もあるといいかもとAチームの先生方。グループワークでアイデアがどんどん生まれた様子が、よく分かりました。
Aチームが考えた防災マップアプリ
続いては、Bチーム。同チームは、子供からお年寄りまで分かるように、“デザインがシンプルであること”を重視しました。最適な避難所をアプリで見つけ、安全に辿り着けることを目的に、最初の画面で情報が明確に分かるアプリをめざしました。また避難所に空きがあるか、ペットの受け入れが可能かといった情報も、一目で分かるようにデザインしました。
同チームのアイデアで面白いのは、30分後、1時間後の気象情報も表示し、そのタイミングで、どのような被害が予測できるのかを映像で見せるというもの。災害時では、今の景色と30分後の世界は異なることから、どれくらい余裕を持って逃げられるのかを示すといいます。Bチームの発表からは、Adobe XDを使ってシンプルなデザインをめざした様子が伝わってきました。
Bチームが考えた防災マップアプリ
最後はCチームです。同チームは、“最初の1分と、次の1分はちがう”という発想をベースに、時間ごとに表示する情報が変わるというアプリを考えました。災害直後は、避難所の場所とそこに辿り着くまでの道順を表示。その後、水やトイレのある場所、避難所にいる人数などを、リアルタイムで情報を把握できるようにします。
ほかにも、SNSの情報を集約する画面も作り、被害状況が確認できる機能も考えていたとCチームの先生方。同チームも、グループワークの中で、よりクリエイティブなアイデアを出そうとした様子が分かりました。
3チームすべての発表を終えて、改めて境氏は、「短い時間の中でこれだけのアイデアが出てきたのはすばらしい」と称賛。Adobe XDを使う時は、きっちりした絵を作り込むのではなく、アイデアをすぐに形にして、皆で意見を言い合う、そんな環境を大事にしてほしいと述べました。
もうひとつ、境氏は「生徒たちがアイデアを出すときは、出来る限り社会に関連したリアルな課題にしてほしい」と想いを述べました。授業でやった内容が、リアルな世界でも反映できるように、実践的な授業を作ってほしいというのです。
文部科学省 初等中等教育局 情報教育・外国語教育課情報教育振興室 教科調査官 鹿野利春氏
ちなみに、今回のワークショップには、文部科学省 教科調査官の鹿野利春氏も参加されました。同氏は最後に、参加された先生方に対して、「2022年度から始まる新学習指導要領に向けて、今から動いてほしい」と訴えました。ICT環境が整備されていない学校は管理職に働きかけるなど、先生たちが声をあげてほしいというのです。また2021年の春には、教科書の選定も控えているため、それまでに情報デザインの授業イメージを持ってほしいと述べました。
文部科学省も、2020年度の概算要求でWifi環境の整備に375億円を計上し、新しい情報セキュリティガイドラインを策定するなどの支援を行っていくと伝えました。
2022年に向けて、いよいよ高校の情報科は本格的に動き始めることでしょう。生徒たちが個性を発揮し、より創造的に、より実践的に学べるよう、Adobeもサポートを続けていきます。
文／神谷加代