いろラボブログ

ビジュアルプロミング言語「Viscuit(ビスケット)」の使い方、プログラミング作品やゲーム、プログラミング教育のアイデアなどを掲載していきます。

国語「オリジナルのうごく絵文字をつくろう!(くらしと絵文字)」

f:id:koba1426:20190227122539j:image

「身の回りのくらしの中で、あったら役に立つと思うオリジナルの絵文字をつくって発表するという学習で使えそうな、Viscuit(ビスケット)の国語の授業プログラミング教育アイデアを紹介します。

ふつうは自分の考えた絵文字を、紙に描いて説明文を書くのがオーソドックスなやり方だと思うのですが、

紙の上の表現では絵文字の意図が伝わりづらいことがあるようです。

 

あくまで目的は、自分の考えを、理由が分かるように順序立てて書いて、発表することですので、絵文字作成に関してはプログラミングを活用して、「うごく絵文字」として表現しても良いのではないかな?と思いました。

 

「いろいろな絵のパーツの組み合わせで、あたらしい絵文字をつくりだす」ということは、ビスケットがかなり得意なことですので、ふつうにおえかきツールとして活用してみるのも、おススメです。(絵が苦手でも、上手く描ける!)

 

試しに、自分で4つのオリジナルうごく絵文字をつくってみましたので、順番につくり方を紹介します!

 

じゅんび  Viscuit(ビスケット)を開く

https://www.viscuit.com/doviscuit/

↑ここから「学校でビスケット」授業ページをつくる方法があります。保存や提示がしやすいので授業で使うには、こちらがおススメです。

(くわしくは公式サイトをご覧ください。)

 

もう1つ簡単なやり方で、

「ひとりでつくる」でもつくることができますので、そちらを紹介します。

f:id:koba1426:20190227134916j:image

ビスケットのアプリをひらいて…

①「ひとりでつくる」をえらんで、

②どこでもいいので、すきな色のへやをえらんで、

③「えんぴつ」ボタンをおしてください。

f:id:koba1426:20190227142410j:image

歯車⚙の「設定マーク」を1番右にしています。こうすることで、ぴったりはまるモードになるため、アニメーションがつくりやすくなります。

 

オリジナル絵文字その①  「ここは、おしゃべりきんしの場所です」

f:id:koba1426:20190227135002p:image

⬇︎⬆︎

f:id:koba1426:20190227135116p:image

アニメーションで、中の人がずっとパクパクしつづけます。

 

これは、3つの絵の組み合わせで、うごく絵文字をつくっています。

・きんしマーク

f:id:koba1426:20190227135210p:image

・しゃべる人
f:id:koba1426:20190227135216p:image

・口閉じてる人
f:id:koba1426:20190227135221p:image

 

こんな感じにメガネをつくれば、アニメーション完成です!

f:id:koba1426:20190227135359p:image

↑きんしマークの上にパクパクする人がいるので、「しゃべるのが禁止」という意図が伝わりやすいかと思います。

 

オリジナル絵文字その②  「ゆかがすべりやすいので、走るときけんです」

f:id:koba1426:20190227135934p:image

⬇︎
f:id:koba1426:20190227135930p:image

⬇︎
f:id:koba1426:20190227135939p:image

⬇︎

f:id:koba1426:20190227135934p:image

 

これは、3コマアニメーションみたいになっています。3コマ目までいくと、最初のコマにもどります。

これは、5この絵を組み合わせています。

・すべりやすいゆか

f:id:koba1426:20190227140352p:image

・きけんマーク
f:id:koba1426:20190227140347p:image

・走る人①
f:id:koba1426:20190227140410p:image

・走る人②
f:id:koba1426:20190227140404p:image

・転んだ人
f:id:koba1426:20190227140357p:image

 

メガネはこのような感じです。

f:id:koba1426:20190227142532p:image

走る人①➡︎走る人②  になって、

走る人②➡︎転んだ人  になります。

 

そして最後に、

転んだ人➡︎走る人①  にもどるのがポイントです。これでずっと、くり返すアニメーションになりますね。

 

オリジナル絵文字その③  「その投稿、拡散されても大丈夫?」

f:id:koba1426:20190227142935p:image

⬇︎⬆︎

f:id:koba1426:20190227144352p:image

時事ネタっぽいですが、もはや現代社会の情報モラルで1番大事なことを、啓発するための絵文字です。

 

これは、5つの絵を組み合わせています。

・スマホ(ちょっとだけ旧式)

f:id:koba1426:20190227151912p:image

・ゆびマーク
f:id:koba1426:20190227151923p:image

・送る?マーク

f:id:koba1426:20190227151928p:image

・本当にマーク
f:id:koba1426:20190227151907p:image

・炎上注意!マーク
f:id:koba1426:20190227151919p:image

 

メガネは、このようになっています。

f:id:koba1426:20190227152255p:image

↑ポイントは、「送る?」の文字の上に「炎上注意マーク」がでてきて、「本当に」のときは消えるようにしているところです。

これにより、出たり消えたりチカチカ変わるアニメーションをつくることができます。

 

「送る?」のときだけ炎が出てくるので、インパクトも増しますよね。

 

ちょっと脱線…

この絵文字が大事な理由は、⬇︎ここに情報モラルのプログラミング教育ネタとともに詳しく書いてますので、ぜひ合わせてお読みください!

www.irolaboblog.com

 

オリジナル絵文字その④  「ネコのとびだし注意!」

f:id:koba1426:20190227153209p:image

⬇︎⬆︎

f:id:koba1426:20190227153225p:image

はい、最後は完全にお遊びです 笑

 

ネコがよく昼寝している木の近くに、あると便利な絵文字です。(ないない)

 

これも、5つの絵の組み合わせですね。

・木(上半分)

f:id:koba1426:20190227153504p:image

・木(下半分)
f:id:koba1426:20190227153457p:image

・クロネコ
f:id:koba1426:20190227153516p:image

・テンション上がってとびだすクロネコ
f:id:koba1426:20190227153521p:image

・あぶない!マーク
f:id:koba1426:20190227153510p:image

 

実はこれ、木の絵を大きく描くために、2つのパーツを組み合わせてつくっているのです。

大きい絵を描きたいときの小技として、参考にしてください。

f:id:koba1426:20190227153945p:image

↑メガネは、クロネコがとびだしたときだけ、「あぶない!マーク」が出てくるようにしています。こうすることで、あぶないマークが出たり消えたりするアニメーションがつくれます。

 

さいごに

今日は絵文字をつくるという、少し変わったプログラミング活用の紹介でした。

これは今回だけでなく、あらゆる「絵を描く」という学習場面で使えるアイデアだと思います。

 

今回のプログラミング教育アイデアは、

「絵文字をつくる場面」では、プログラミングで創造的な活動ができ、

「絵文字の説明文を考えて書き、伝えたいことを発表する場面」では、論理的な思考を養う活動ができる。

という、それぞれの良さのいいとこ取りを目指したものです。

 

アニメーションづくりも、結果的に論理的思考を養うことにつながると思うのですが、ビスケットの良さは「すごく創造的になっちゃう」ところだと個人的には、思っています。

なので、「オリジナル絵文字を生み出す」みたいな創造的な活動場面では、ビスケットがおススメです。

今まで思い浮かばなかったアイデアが、不思議と出てくるような体験ができると思います!

 

⬇︎今日のメイキング動画はこちらです!

ぜひ、うごいてる絵文字を確認してみてください。

youtu.be

 

 ⬇︎小学校の授業で使える、色んなプログラミング教育アイデアです!

www.irolaboblog.com