E-Lab. 〜小学校英語専科教員のブログ〜

E-Lab. 〜元小学校英語専科教員のブログ〜

2019年度から3年間小学校英語専科教員だった先生のブログ。小学校英語やICT教育の実践記事が中心です。

ルーレット教材の作り方 ~GIFアニメ×Googleスライド~

今回は言い慣れの活動などで使うことができる,ルーレット教材の作り方を解説します。

 

今回の教材はパワーポイントなどを使ってGIFアニメを作成し,それをGoogleスライドに挿入するという手順で作成しました。GIFアニメの作り方については,パワーポイントでGIFアニメを作成する方法と,Webサービスを使ってGIFアニメをつくる方法の2つを紹介します。

 

パワーポイントでスライドにイラストを挿入する

一日の日課GIFアニメーションGoogleスライドに挿入するための,元となるGIFアニメーションはどうやって作成すればいいのでしょうか。最新のパワーポイントだとGIFアニメでのエクスポートが可能なので,これを使うのが一番手っ取り早いです。

1日の日課イラストを準備する

まずは1日の日課のイラストを用意しましょう。

公開などせずに授業内だけで使うのであれば,教科書のデジタル教材のイラストなどを使うのが子どもにとってはわかりやすいかなと思います。今回HP用にいらすとやさんからイラストをお借りました。

パワーポイントにイラストを挿入する

イラストが用意出来たらまずはパワーポイントにイラストを挿入するのですが,出来上がりの教材をイメージしながら必要に応じてスライドのサイズを変更しましょう。今回は正方形にしたいので,スライドのサイズの縦・横を同じ長さに設定しておきます。

f:id:ninnin2222:20220226151326p:plain

また,スライドには図形描画(四角形)を使って,下の様にスライドの周りに四角い枠線を描いておくGoogleスライドに挿入した時に見やすくなります。

f:id:ninnin2222:20220226151954p:plain

ここまでできたら,スライドに用意したイラストをどんどん挿入していきます。

f:id:ninnin2222:20220226152235p:plain

今回は4年生用の教材なのでイラストのみにしていますが,文字をいれてもよいでしょう。

 

(GIF作成方法①)パワーポイントでGIFアニメを作成する

f:id:ninnin2222:20220226152642p:plain

パワーポイントでそのままGIFアニメを作成する際には,[ファイル]→[エクスポート]→[アニメーションGIFの作成]を選択します。

 

ここでは,画質と各スライドの所要時間などを設定できます。

 

・画質は大きくするときれいには映りますが,その分容量が大きくなるので,中もしくは小で十分かなという気がします。

 

・各スライドの所要時間については,ルーレットらしさを出すには0.1秒くらいがよいと思います。また今回の教材のように,スロット風にいくつかのGIFアニメを入れる場合には,この秒数を少し変えたGIFアニメを挿入することで,色んなパターンの組み合わせが生まれやすくなります。

 

 

あとはGIFを作成ボタンをクリックすればGIFアニメが作成されます。

(GIF作成方法②)WebサービスでGIFアニメを作成する

パワーポイントのバージョンが古い場合はパワーポイントでのGIFアニメの作成ができない場合があります。(実際,私の学校のPCではできませんでした💦)

 

そういった場合でも,GIFアニメを無料で作成するサービスがありますので,活用することができます。今回使うページはこちらのバナー工房さんです。

f:id:ninnin2222:20211010175622p:plain

 

パワーポイントで作ったスライドを画像としてエクスポートする

このサイトを使う前に,まずパワーポイントで作ったスライドを画像としてエクスポートします。

f:id:ninnin2222:20220226153848p:plain

[ファイル]→[エクスポート]→[ファイルの種類の変更]→[JPEGファイル交換形式]を選んで【名前を付けて保存】をクリックします。

f:id:ninnin2222:20220226154039p:plain

エクスポートするスライドを指定してくださいと出たら,[すべてのスライド]を選択してください。これで一つのフォルダにスライドが全て画像として保存されます。

f:id:ninnin2222:20220226154404p:plain

バナー工房を使ってGIFアニメを作成する

f:id:ninnin2222:20220226154636p:plain

バナー工房さんのサイトにアクセスすると,オプション設定をいくつか設定するところがあるので,作りたいGIFアニメに合わせて設定していきます。

 

・重ね合わせる枚数は使用する画像に合わせて選択してください

・ループの有無は【ループする】にします

・点滅間隔は今回は早い方がいいので【0.1秒】にします。

・画像のサイズは同じなはずなので画像選択時の切り取り設定は【切り取らない】でOKです。

 

 

次に画像を選択していきます。

f:id:ninnin2222:20220226155214p:plain

青いボタンをクリックして,先ほどエクスポートした画像を挿入していくだけです。点滅間隔については[全体設定に従う]にしておけば,上で設定したものがそのまま反映されるのでそのままでよいです。

このあと【GIFアニメをつくる】ボタンを押すとGIFアニメが完成します。

f:id:ninnin2222:20220226155708p:plain

プレビューが表示されるので,OKだったら[保存]をクリックして自分のPCなどに保存します。

GoogleスライドにGifアニメを挿入する

まずはじめに,Googleスライド上に簡単な説明などを挿入します。

 

f:id:ninnin2222:20220226160502p:plain

※私の自治体ではiPadを使っているので,下に引っ張るとGifアニメが止まる仕様になっているので上の画像のような説明にしています。しかし,Chromebookwindows PCではそうはならないようです。その場合は,[スクリーンショットしてイラストをとめてね]といった説明にするとよさそうです。

 

ここまでできたら,先ほど作ったGIFアニメを挿入していきます。

f:id:ninnin2222:20220226161224p:plain

 

[挿入]→[画像]→[パソコンからアップロード]を選択し,先ほどのGIFアニメを選択すればOKです。(または画像を直接ドラッグ&ドロップしても挿入できます。)

 

f:id:ninnin2222:20220226161606p:plain

ここまでできれば教材は完成です。

Google Classroomを使って子ども達と共有する

今回の教材は,コピーを作成して配布するよりも,閲覧さえできればOKなので,閲覧のみ可能な状態で配布します。

 

逆にコピーを作成して配布してしまうと,位置が変わってしまったり,画像が消されてしまったりという不都合が起きるので,閲覧者として共有するのがベストです。

 

f:id:ninnin2222:20220226162007p:plain

おわりに

今回はGIFアニメーションを使った,ルーレット教材の作り方をまとめました。今回の教材以外にも,おみくじであったり,ルーレットであったり,トークテーマ決めなど様々な活動に転用ができると思いました。(英語以外にも使えそうですね。)

 

おまけ

今回の記事用に作成したデータをシェア(閲覧のみ可)しますので,参考にしてください。

※学校用アカウントだとはじかれてしまう場合があるようなので,個人のアカウントでアクセスしてください。

docs.google.com