作る体験を通して活用を広げるAdobe Express教員向けハンズオンレッスン〜東京都教育委員会クリエイティブアプリ活用研修

東京都教育委員会Adobe Express研修レポートイメージ

東京都教育委員会では、学校教育のデジタル化支援として、魅力的なビジュアルコンテンツを楽しく簡単に作れるAdobe Expressを2022年4月より全都立学校(高校・中等教育学校・附属小学校・附属中学校・特別支援学校)に導入しています。その活用支援として、東京都教育委員会の主催により夏休み期間を利用して開催された、Adobe Expressオンライン研修の模様をレポートします。

授業内外にすぐ活かすための実践的な研修

Adobe Expressの基本的な操作を習得しながら、授業・課外活動での活用イメージを広げていただくことをねらいとする「クリエイティブアプリ活用研修」は、都立学校の教職員およびデジタルサポーターを対象としてオンライン開催されました。2022年7月27日、8月17日、8月18日の3日間に分けて、各回30分×全3回シリーズで実施。初回130名を超える参加者がZoomウェビナーに集い、研修本編の終了後には毎回活発な質疑応答が行われるなど、先生がたの熱意あふれる時間となりました。

全3回の研修は、Adobe Expressで制作できる3種類のフォーマット(グラフィック、ビデオ、Webページ)について、1回30分の研修につき1種類ずつ、実際に手を動かしながらコンパクトに学べる構成。アドビ派遣講師としておなじみのAdobe Expressインストラクター 足立美穂氏が、研修を進行します。教育委員会や学校向けに研修を多数実施してきた経験をもとに、つまずきやすい点に配慮して都度「大丈夫ですか?」「ここ大事です」と呼びかけながらデモンストレーションしていきます。

全3回シリーズ研修のステップ

3つの制作フォーマットを段階的に習得しながらAdobe Expressの基本的な使い方を網羅

開始時点では、大多数の参加者が「初めてAdobe Expressを使う」、かつ「Adobe Expressで作りたいものを決めきれていない」状態。ここで足立氏から、3回のシリーズ受講のゴールとして「自分自身や学校・クラスなど、“何か”を紹介するWebページを作ることを目指しましょう」と呼びかけ、研修がスタートしました。

手を動かしながら操作を覚え、作る楽しさを実感

第1回(7/27開催)は、「自己紹介」「クラブ活動ポスター」の2点を題材としたグラフィック制作。初めてAdobe Expressを使う参加者を意識して、全体機能や特長、ダッシュボード(ホーム画面)と編集画面のメニュー構成を説明するとともに、基本的な操作を一通り見せながら制作を進めます。

Adobe Expressのシンプルな編集画面構成

編集画面の左側にアイコンやテキストなどの素材追加ボタン、右側にデザイン調整のボタンが並ぶ

前半は、“パソコン室の管理者”という設定で、講師自身の「自己紹介」の一枚絵を制作。人物写真の読み込み・加工、Adobe Stockからの画像検索、吹き出しアイコンの配置…Adobe Expressがもつ便利な機能や素材を次々と繰り出していきます。中でも目を引くのは人物写真の背景削除。

人物画像の背景を自動で削除

ワンクリックで人物画像の背景を削除。Adobe Express上でクオリティの高い制作を完結できる

Adobe Expressは、制作過程のあらゆる作業を1つのアプリ上で完結できるのが大きなメリット。複数のクリエイティブアプリの機能が組み込まれており、その一つ、画像加工アプリAdobe Photoshopの力で人物画像の背景削除もお手のもの。ワンクリックできれいに人物を切り抜ける様を、講師自身の写真で実践して見せました。

テキスト・アイコンなど複数のオブジェクトの重なり順を調整するというのも、グラフィック制作で頻出の作業。Adobe Expressではレイヤーを視覚的に確認でき、ドラッグして簡単に入れ替えられることを示します。

複数のオブジェクト順を視覚的に表示

横から見せるイメージでレイヤーの概念をわかりやすく表示

「クラブ活動ポスター」では、レイアウト案から1つ選んで制作スタート。ポスターのように広い誌面で苦労しがちなレイアウト決めが格段に楽になり、伝えたい情報を整えることに集中できそうです。

Adobe Expressにあらかじめ備わっているレイアウト案から選択

複数のレイアウト案から盛り込みたい内容の項目・情報量に合ったものを選択できる

制作の時短・クオリティ向上につながるコツも

研修第2回(8/17開催)はビデオ。「コマ撮り風動画」「レクチャー動画」の2点を例として進めました。ビデオ制作というと、たくさんの操作パネルや細かいタイムラインなどを思い浮かべますが、Adobe Expressは新規プロジェクトの立ち上げ、編集画面も至ってシンプル。

Adobe Expressビデオのシンプルな編集画面

スライドが並ぶシンプルな編集画面。追加や入替をしながらビデオの構成を作っていく

卒業生送別のメッセージビデオとして、スライドごとにあらかじめ描いたイラスト画像を置き、パラパラアニメのように展開します。Adobe Expressビデオは、スライドの切り替わりに自動エフェクトがかかるのが特長ながら、今回のコマ撮り風動画のようにエフェクトをカットしたい場合も。そんな時は「“Tidal”というテーマを使いましょう」と足立氏。授業、課題制作など限られた時間で活用されることを想定し、作業の手間と時間の短縮につながる具体的な解決策やコツを織り交ぜます。

スライドごとの再生時間や、BGMの選択・音量調整などを説明する一方、テキストの色・サイズなどは細かく調整できないことを説明。Adobe Expressでできること・できないことを研修内で明示するのもまた、制作中に迷う時間の削減につながります。

豊富に用意されているテンプレートも、短時間でクオリティの高い作品を作るのに有効。2例目の「レクチャー動画」では、校内イベントなど参加者への伝達事項をまとめる活用例として、テンプレートを使って制作ステップを見せていきます。

Adobe Expressビデオの制作をサポートするテンプレートの数々

伝わりやすい流れがあらかじめ用意されたテンプレートは動画制作のファーストステップに最適

スライド順を入れ替えて全体の流れを確認したり、マイクボタンを押してナレーションを収録したり。あえてデザインの機能を制限し、誰もが使いこなせるような直感的な操作に絞ることで、動画制作のハードルを下げられているのがデモ制作を通して感じられました。

複数作品を組み合わせ1つのWebページ作品に

最終となる第3回(8/18)、Webページは「制作できる3種類の中で実は最も簡単」と足立氏。編集画面でほぼ見たままに出来上がるため、完成形を確認しながら構成できる使い勝手の良さを伝えます。

ビデオ同様、細かなアレンジは制限される中、ページデザインに豊かな表情を加えるのが「画像の配置」。イメージ写真を掲載する方法として紹介した、写真グリッド(ギャラリーのように複数の画像を整列配置)やGlideshow(ページ幅いっぱいに画像をイメージカットのように表示)に注目が集まり、Q&Aボックスでは関連質問が活発に飛び交いました。

写真グリッドの例

Glideshowの例

上:写真グリッド、下:Glideshow/写真で伝えたいイメージ、ページの演出によって使い分け可能

制作したグラフィックの画像データを貼り付けたり、ビデオの共有URLをリンク指定したりと、複数のプロジェクトを1つにまとめ上げるのに最適なWebページ。コーディング不要で校内外に発信できる手軽さを持ちながら、検索エンジンの対象外のためURLからのアクセスのみ、という特性も先生がたの安心感につながったようです。

最後に、入門編から一歩踏み込み「ブランド」設定をレクチャー。クラス・クラブ活動などのロゴ、基本フォントなど、一連のグラフィック・ビデオ・Webページに統一感をもたらす機能と設定方法を紹介し、計90分の研修を締めくくりました。

ブランド機能の一部としてロゴを自動生成できる「ロゴメーカー」

自動でロゴを作成できる「ロゴメーカー」に興味をもった参加者も

基本的な制作を習得して次の実活用へ

各回の研修後アンケートでは「簡潔でわかりやすく、あっという間の30分だった」「使い始めるきっかけになった」という回答に混じって、「あとは使うのみ」と今後の意欲をにじませる言葉も見られました。

また、今後Adobe Expressを使いたいシーンとして、学校・部活紹介のほか「SDGsの探求授業」「情報1のWebデザイン」「美術系授業の実技」など具体的な案が多数寄せられ、教員自身の活用だけでなく児童・生徒へ展開するイメージも広がったことがうかがえました。

研修開催の成果を受けて、東京都教育庁総務部教育政策課の江川徹主任指導主事(情報企画担当)は「大変多くの先生にご参加いただき感謝しています。この研修を機に、今後ぜひ積極的に児童・生徒の皆さんとAdobe Expressを活用して欲しいと思います。子どもたちの創造性の発揮や問題解決能力の育成に活かしていただけることを期待しています」と言葉を寄せています。

▼教育委員会・学校向けにAdobe Express研修を随時開催しています

開催概要、アドビ講師派遣の依頼方法など詳しくはこちら

【関連リンク】

小中高校向け無料 Adobe Express for Education

Adobe Express 研修動画 ~教職員向け限定公開~