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

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

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

XnConvertを使って画像を一括編集 ~自動トリミング&背景を透明に~

先日のツイートで,一括で画像を自動トリミングできるソフトとしてXnConvertを紹介したところ多くのいいねをいただきました。

 

そこで,今回の記事ではこのXnConvertの使い方について詳しく紹介しようと思います。

XnConvertでできることは?

XnConvertは画像のファイル変換やサイズ変更、トリミングなどを一気に行うことができる画像変換ソフトです。海外産のソフトですが,日本語にも対応しているので,簡単に操作することができます。かなり高機能なソフトですが,なんと無料です。

 

今回はその機能の中から,自動トリミングと透過色設定(背景を透明にする)の2つの機能を使った画像の編集の仕方を中心にご紹介します。

 

具体的に言うと,余白が大きくある画像をそのまままjamboardに貼り付けて使おうとすると,下の画像のようになってしまい,画像自体がどうしても小さくなってしまい,たくさんの画像を配置することも難しくなります。

f:id:ninnin2222:20211210234457p:plain

一方でXnConvertで処理をした画像を使うと,下の画像のようになり,画像自体を大きく配置したり,画像同士を近づけて配置したり,多くの画像を配置したりしやすくなります。

f:id:ninnin2222:20211210234904p:plain

 

XnConvertはどこでダウンロードできるの?

XnConvertはXnSoftという会社が制作している海外産のソフトウェアで,PCにインストールして使用します。オフィシャルサイトはこちらになります。

www.xnview.com

上記のサイトの下の方にダウンロードするリンクがあるので,ご自身のOSにあった箇所をクリックしてダウンロードしてインストールしてください。

f:id:ninnin2222:20211210235629p:plain

 

PCにインストールしたくない場合やできない場合は,Zip版をダウンロードするとよいです。Zipファイルの場合は,ファイルを展開(解凍)した後に,フォルダ内のアプリケーションファイル(下の画像だと目みたいな画像のファイル)をクリックすることでソフトが起動します。

f:id:ninnin2222:20211211000120p:plain

 

※もし英語のサイトが不安という場合は,Softonic内のページ(XnConvert - 無料・ダウンロード (softonic.jp))やVector内のページ(XnConvertの詳細情報 : Vector ソフトを探す!)からもダウンロードできるので,こちらから試してみたください。

 

自動トリミングをするには…

PCにソフトを入れることができたら,さっそく使ってみましょう。
まずは自動トリミングです。これはトリミングする範囲を指定しなくても余白部分を探して自動的に一括でトリミングしてくれる非常に便利な機能です。

※ただし,これだと一つずつの画像の大きさは変わってしまうので,全て同じサイズにしたい場合は普通のトリミング機能を使った方がいいです。

 

使い方はいたってシンプルです。

まず変換したい画像をまとめてドラッグ&ドロップしてリストに追加します。

f:id:ninnin2222:20211211001524p:plain

その後,【動作】タブをクリックして,【動作を追加】ボタンをクリックして,[画像]→[自動トリミング]を選択します。

f:id:ninnin2222:20211211001844p:plain

これだけでOKです。プレビュー画面の変換後タブをクリックすると,余白がカットされた画像が見えるはずです。

f:id:ninnin2222:20211211002225p:plain

もし自動トリミングだけでよい場合は,これで【変換】ボタンを押せばいいのですが,このソフトのよいところは2つ以上の作業も一括で行なえるところにありますので,今回は透過色の設定も同時に行った後で,変換をしたいと思います。

 

透過色の設定をするには…

透過色の設定も自動トリミングとほとんどやり方は同じです。
今度は【動作を追加】→[画像]→[透過色]を選択します。

f:id:ninnin2222:20211211002546p:plain

そうすると,自動トリミングの下に透過色の項目が追加されます。

f:id:ninnin2222:20211211002747p:plain

ここに色の設定がありますが,これは何色を透過色(透明)にするかの設定です。
(今回は背景が白なので白色を選択していますが,背景が黒の場合は黒,青の場合は青にしないと背景を透明にすることができません。)

また,白い部分がまだらに残ってしまうような場合は,公差を設定しておくとよいです。この設定を10くらいに設定しておくことで,よりなめらかに画像が切り抜かれるます。この数字を大きくすることで,少し曖昧になるので,少しぐらい真っ白でなくても透明にしてくれるようになるのです。

f:id:ninnin2222:20211211003422p:plain

 

一括で画像を変換する

自動トリミングと透過色の設定が終わったら,一括で画像を変換します。
【変換】ボタンをクリックする前に,【出力】タブをクリックして出力設定を確認しましょう。

もし元のファイルの種類がJPEGの場合,透過色の設定に対応していないので,形式をPNG画像に変換するように設定しなおしましょう。ここでは出力先のフォルダの指定などもできます。

f:id:ninnin2222:20211211004000p:plain

ここまでできたら,あとは右下にある【変換】ボタンを押すだけです。

f:id:ninnin2222:20211211004432p:plain

これで全ての画像の自動トリミングと透過が可能となります。

f:id:ninnin2222:20211211004743p:plain

 

今回はXnConvertを使って大量の画像を一括で自動トリミングして背景を透明にする方法をまとめました。


視覚支援としてイラストを用いることの多い小学校英語のデジタル教材を作成する際には大きな味方となってくれるソフトであることは間違いないと思います。

 

毎回毎回トリミングしたり,透過処理するのが面倒だなと思っていた人は,ぜひ使ってみてください。相当な労力の削減につながりますよ。

Googleスライドを使った「What's this クイズ」テンプレート5選

 今回は3年生の単元であるLet's Try 1のUNIT8のWhat's this クイズを作るためのGoogleスライドを作成したので,そのテンプレートを公開したいと思います。

1.チラ見せクイズ

f:id:ninnin2222:20211128095840p:plain

 この教材では,写真やイラストを2枚目のスライドに入れて,下記のようなやりとりをしながら少しずつスライドを見せながらクイズを出します。

A: (少しイラスト見せて)What's this?

B: Hint please.

A: (もう少しイラスト見せて)What's this?
B: It's a soccer ball.

 この際,プレゼンテーションモードだとうまくいかないので,プレビューモードで見せる必要があります。

↓チラ見せクイズのテンプレートダウンロードは下から

docs.google.com

リンクをクリックするとコピーが作成されます。

※学校用アカウントだとはじかれてしまう場合があります。その際は個人のアカウントでアクセスしてください。個別のアクセス権限のリクエストはお応えしていません。

 

2.Zoomクイズ

f:id:ninnin2222:20211128095750p:plain

 画像を挿入した後にトリミング→拡大をすることで,拡大した写真やイラストをスライドに入れます。1枚目→3枚目と段々とわかりやすい画像になるようにします。

 下記のようなやりとりをしながら少しずつわかりやすい拡大写真を見せながらクイズを出します。

A: (2枚目のスライドを見せて)What's this?

B: Hint please.

A: (3枚目のスライドを見せて)What's this?
B: It's a panda.

 この際,編集モードのままだと左に答えが出てしまうので,プレゼンテーションモード(またはプレビューモード)で見せる必要があります。

 

↓Zoomクイズのテンプレートダウンロードは下から

docs.google.com

リンクをクリックするとコピーが作成されます。

※学校用アカウントだとはじかれてしまう場合があります。その際は個人のアカウントでアクセスしてください。個別のアクセス権限のリクエストはお応えしていません。

 

3.3ヒントクイズ

f:id:ninnin2222:20211128095704p:plain

 スライドの1枚目→3枚目にヒントを入れます。3年生にとっては全てを自力で考えるのは難しい場合が多いので,1枚目は色,2枚目はジャンル,3枚目は自分で考えるというようにするとよいでしょう。

 下記のようなやりとりをしながらヒントを3つ言いクイズを出します。

A: Hint1, orange. Hint2, vegetable. Hint3, rabbit. What's this?

B: It's a carrot.

A: That's right.

 この際,編集モードのままだと左に答えが出てしまうので,プレゼンテーションモード(またはプレビューモード)で見せる必要があります。

 

↓3ヒントクイズのテンプレートダウンロードは下から

docs.google.com

リンクをクリックするとコピーが作成されます。

※学校用アカウントだとはじかれてしまう場合があります。その際は個人のアカウントでアクセスしてください。個別のアクセス権限のリクエストはお応えしていません。

 

※一部いらすとやさんの画像を使わせていただいています。

4.ナンバークイズ

f:id:ninnin2222:20211128095634p:plain

 番号の数の裏に答えとなる画像を隠します。画像を挿入した後に最背面にすることでできます。

 下記のようなやりとりをしながら少しずつ番号をはがしていき,クイズを出します。

A: What's number?

B: Blue 8.

A: Wht's this?
B: I don't know.

A: What's number?

B: yellow 10.

A: Wht's this?
B: It's rahmen.
A:That's right.

 この際,プレゼンテーションモードだと数を消せないので,編集モードのまま行う必要があります。

 

↓ナンバークイズのテンプレートダウンロードは下から

docs.google.com


リンクをクリックするとコピーが作成されます。

※学校用アカウントだとはじかれてしまう場合があります。その際は個人のアカウントでアクセスしてください。個別のアクセス権限のリクエストはお応えしていません。

 

5.色形クイズ

f:id:ninnin2222:20211128095605p:plain

 4のナンバークイズを色形のカードに変えたものです。色形カードの裏に答えとなる画像を隠します。画像を挿入した後に最背面にすることでできます。

 下記のようなやりとりをしながら少しずつ色形カードを消していき,クイズを出します。

B: Blue circle.

A: (青丸カードを消す)Wht's this?
B: I don't know. HInt please.

A: OK

B: yellow triangle.

A: (黄色三角カードを消す)Wht's this?
B: It's a cucumber.
A:That's right.

 

 この際,プレゼンテーションモードだと数を消せないので,編集モードのまま行う必要があります。

 

↓色形クイズのテンプレートダウンロードは下から 

docs.google.com

リンクをクリックするとコピーが作成されます。

※学校用アカウントだとはじかれてしまう場合があります。その際は個人のアカウントでアクセスしてください。個別のアクセス権限のリクエストはお応えしていません。

 

Jamboardを使ったデジタル教材~ピザセットを作ろう!!~

 今回はピザとサラダのセットをJamboard上で作成するための教材を作成したので,それを公開したいと思います。

1.ジャムボード教材“Let's make a pizza & salad.”

 この教材は基本的には,中学年の外国語活動Let's Try2のUNIT7の学習で使用するためにつくられています。

この単元では…

A: What do you want?

B: I want onions, please.

こうしたやりとりをしながらピザのトッピングを集めて,誰かのためにオリジナルピザをつくるということが最終的なゴールとして設定されています。

 ICTが導入される以前は,事前に教師がこのトッピングを細々と切ったりする労力が非常にかかったり,子どもがノリで紙に貼ったりする作業も非常に時間がかかるため図工の時間のようになってしまったりすることも多くありました。
 しかしGIGAスクールで導入された一人一台端末を活用することで,こうした手間(教師側の手間も,子ども側の手間も)大きく削ることができるため,本来のやりとりのための時間を十分に割くことができるようになりました。

 今回紹介するジャムボードは3枚のフレームからできています。
1枚目はピザとサラダの台紙フレーム。これに具材をのせていきます。

f:id:ninnin2222:20211025205602p:plain

2枚目はピザのトッピング。

f:id:ninnin2222:20211025205705p:plain

3枚目はサラダの材料です。

f:id:ninnin2222:20211025205747p:plain

この2,3枚目にあるトッピングや材料をお店屋さんのペアとやりとりをしながら1枚目のフレームに移動させていきます。この時,アプリ版Jamboardの機能を使うと,ドラッグ&ドロップをしてイラストを移動することができるのです。

f:id:ninnin2222:20211025210400p:plain

こうしてやりとりをして材料を集めたら,1枚目のフレーム上でイラストを配置してピザとサラダを完成させます。

f:id:ninnin2222:20211025210515p:plain

2.教材ダウンロード

今回のJamboard教材をシェアしますので,必要な方はコピーしてお使いください。
リンクをクリックするとコピーが作成されます。

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

 

jamboard.google.com