デジタル教材内製のすすめ

2024年12月 9日　篭谷 隆弘（仁愛大学 人間生活学部教授）

ICT（情報通信技術）の発達は教育・学習の方法を大きく変えました。例えば、オンライン学習プラットフォームの充実により、教室外でも質の高い授業にアクセスできるようになったり、膨大な情報源を活用した探求型学習が可能になったりしています。また、クラウドサービスやモバイル端末の普及により学習に際しての時間と空間の制約を減らすことにつながりました。学習に用いられる情報メディアが文字や画像のみならず音声や映像といったものへ多様化したことで、より分かりやすい教材が提供されることにつながっています。

ワープロソフトやプレゼンソフトをはじめ、映像の収録や編集を行えるソフトウェアといったツールが手軽に利用できることで、教材コンテンツの制作は内製が容易になってきました。制作されたコンテンツはCMS（コンテンツ管理システム）やLMS（学習管理システム）上にファイルとして提供されることで、学習コースが構成されることになります。さらにLMSには学習活動を支援するためにクイズやアンケート、課題やフォーラムといった機能が備わっており学習者の理解状況を把握しフィードバックすることが可能です。

しかし、よりインタラクティブな教材コンテンツを提供したいと考えると内製のハードルは高くなります。ユーザーインターフェイスと各種機能をゼロから制作しようと考えると、そのための安価なツールがあまりなく、また機能をプログラミングによって実現する必要があったり、最終的なプラットフォームにあわせる必要があるものの、それが難しいといったことに直面します。

コンテンツフレームワークH5P

インタラクティブなコンテンツを簡単に制作できるツールとしてH5Pがあります。H5Pはオープンソースのコンテンツフレームワークとして開発され、コンテンツの作成・共有・再利用を目的として、様々なCMSやLMS上で利用できます。Moodleでも以前はプラグインとして追加利用する必要がありましたが現在はコンテンツバンクとして標準搭載されています。様々な種類のコンテンツタイプが提供されており、Web上でそれぞれのコンテンツタイプを選択した後、テキストや画像・オーディオ・ビデオなどを選択していくことで、コンテンツが完成します。

たとえば、H5Pでは「Interactive Video」や「Course Presentation」などのように、単なる教材を越えて学習者の主体的な関与を促すコンテンツを作成することが可能です。「Interactive Video」は、通常の動画の再生中にクイズや補足情報を挿入することで、学習者が受動的に視聴するだけでなく、内容を確認しながら進められるインタラクティブな体験を提供します。また、「Course Presentation」はスライド形式で情報を整理しつつ、選択問題やドラッグ＆ドロップといったインタラクションをスライド内に組み込むことができるため、学習内容の定着をより効果的に促進します。他にもシンプルな機能をもつコンテンツタイプから簡単な学習ゲームを実現するようなものまで多岐にわたります。

さらに、H5Pの魅力はその汎用性にあります。作成されたコンテンツは、一度制作するとさまざまなプラットフォームで共有・再利用することが可能です。たとえば、H5PコンテンツをWordPressのWebサイトで公開したり、単一のパッケージファイルとしてエクスポートした後Moodleの学習コースに統合したりすることもできます。またiframeの埋め込みコードを用いて他のWebサイトで用いることも簡単です。このような柔軟性は、多様な学習環境やデバイスに対応した教材設計を行ううえで非常に有用です。

なお、H5Pで行われたクイズの結果・成績は、まずはコンテンツ毎に表示がされます。コンテンツタイプによってはまとめ画面で確認可能な場合もあります。そして搭載されているCMSやLMSと連携されます。Moodleの場合はGradebook APIを通じて評定表に反映されます。つまり、コース内で他の小テストや課題などの活動結果と合算して学習者の評価やそれに応じた支援を行うことが可能です。

H5Pの導入により教材作成の時間を大幅に短縮しつつ、学習者にとって魅力的で効果的なコンテンツを提供できるようになります。特に、学習者が内容を深く理解するための双方向的な学びをデザインする場合にH5Pは強力なツールとなると思います。加えて、H5Pの利用はコーディングスキルが不要なため、ICT活用に不慣れな教育者にとっても導入しやすいのが特徴です。

H5Pを用いた教材の内製例

マイクロラーニングとよばれる学習手法があります。短時間に特定のトピックにフォーカスして学ぶことで、効率的に知識を習得し定着することにつながると考えられます。このような考えのもと、子どもの学びの一部として取り入れることも考えられます。そこで、小学校教材を例としてH5Pコンテンツを制作してみました。例えば、国語の学習では漢字の部首名を学んだり、算数の学習では相似図形を探したり、理科の学習では昆虫の成長過程を並べ替えたりする教材です。また社会の学習では都道府県の位置を白地図上で当てたり、英語の学習では単語カードのようなかたちで音を聞いて正解をめくったりするものです。コンテンツの制作には画像や音声の準備は必要ですが、コンテンツタイプを選べば比較的容易にこれらの教材が作成できます。

図1は、昆虫の画像の成長過程を順に並べ替えるクイズのコンテンツとなっています。Image Sequencingというコンテンツタイプを用い、5枚のカード画像をドラッグして卵から蝶になるまでの順にした後チェックを受けるとカード毎に正誤が表示されます。

図2は、動物の英単語カードのコンテンツとなっており、中央のスピーカーアイコンを押すことで下に書かれた英単語の音声も聞くことが可能です。Turnボタンを押すとカードが回転し日本語の表示がされます。Dialog Cardsというコンテンツタイプを用い、12枚のカードを再現しています。

また、図3に示したような動物の絵が描かれているカードとその動物の名前が書かれたカードをペアとして遊べる絵合わせゲームを作成し、タブレット端末を用いて就学前の園児らに遊んでみてもらいました。カードをめくるたびに動物の鳴き声が聞こえるようにもしました。子どもたちは夢中になってカードをめくりながら次第に動物の名前の読みを覚えている様子がうかがえました。

H5Pに「Virtual Tour (360)」というコンテンツタイプがあります。いわゆる360度カメラで撮影された全天周パノラマ写真を用いて、その写真上にリンクや文章を配置することで、インタラクティブな空間上のツアーを実現できるようにするものです。単に全天周写真を表示するだけでなく、インタラクティブなコンテンツを作成できるオーサリングツールは存在しますが、専門性も高いことから内製に用いるツールとしては敷居が高いと感じます。しかしこのコンテンツタイプでは、写真ファイルを用意しそれらのリンクを順にWeb上で指定するだけという手軽さでコンテンツを作成できます。地域性の高いオリジナルの教材として、名所・旧跡はもとより一般の施設などを題材とし、空間上の位置に注目する学習を内製で提供することができます。周囲を見渡しながら新たな発見を促すような教材も考えられます。

図4と図5は、福井県越前市のだるまちゃん広場をVirtual Tourを用いて仮想的なツアーのコンテンツとしたものです。この広場には、かこさとし氏の絵本にちなんだ様々なオブジェが配置されていています。図4の画面では、画面内をドラッグすることで、その位置から全周の風景が眺められるだけでなく、矢印のアイコンを押すことで別の位置へ移動が可能です。図5の画面からはプラスのボタンを押すことで遊具の紹介動画を視ることができます。

今後の学習教材 　
生成AIによりテーマに沿った文章や画像を得ることは容易になりつつあります。さらに将来には、それらを組み合わせ的確な設問を用意したりインタラクティブなコンテンツを生成したりすることも可能になるでしょう。一方で、学習者の興味を引き出しテーマに沿った分かりやすい教材を構成するには、学習プロセスを見極め理解を確認しながら記憶の定着を促していくような教材の設計を重要視していく必要があります。既存の教材の隙間を埋めるような新たな教材の内製も必要になるかもしれません。また、教材コンテンツやテンプレートをオープンな形で共有できる投稿サイトも考えられます。多様な学習者の多様な学び方を支援するために、個別化された学習体験を提供する仕組みの構築も求められるでしょう。学習者主体の教育環境を目指し、技術と教育の融合をさらに深めていくことが求められると考えています。

参考文献

H5P， https://h5p.org，2024年11月参照
篭谷隆弘：”コンテンツフレームワークH5Pを用いた小学校学習教材の制作”, 仁愛大学研究紀要 人間生活学部篇, 10号 p. 67-72, 2019
篭谷隆弘：” VR ツアーを用いた地域学習教材の制作”, 仁愛大学研究紀要. 人間生活学部篇, 14号 p. 53-58, 2023
篭谷隆弘：” 外国出身の小学校就学前の園児を対象とした 学習支援教材の制作”, 仁愛大学研究紀要. 人間生活学部篇, 15号 p. 83-87, 2024

コンテンツを掲載したWebサイト
H5Pを用いた小学校教材：https://h5p.jp/course/view.php?id=8
こ・と・ば　くらぶ：http://ko-to-ba.club/
えちぜん絵本ひろば：https://ehonhiroba.site/