制作データ
| 使用媒体 | 教科書 |
| 発注元業種 | 出版社 (教科書制作) |
| 受注点数 | 5 |
| 制作日数 | 1.5ヶ月 |
| 画材 / 使用機材 | Adobe Illustrator / HTMLエディタ |
| 寸法 | タブレット端末向けサイズ |
| 納品形態 | データ一式 (画像ファイル、HTMLファイル、プログラムファイルその他) |
中高向け理科教材のデジタル副教材で使用する、インタラクティブコンテンツの制作を担当しました。
当所では静止画としての教材図版の制作に加え、HTML / CSS / JavaScript を使ったタブレット端末向け教材の画面ギミック制作まで対応できます。
理科教材向けインタラクティブコンテンツとは
ここでいうインタラクティブコンテンツとは、画面上のボタンをタップすると、表示される図版・地図・グラフ・説明部分などが切り替わるなど、かんたんな操作を行える教材用のウェブページのことを指しています。主に理科分野で、タブレット端末で閲覧するデジタル副教材として利用されています。
元の図版画像は Adobe Illustrator で制作の上、.png / .jpg などに書き出し、HTML / CSS でウェブページの形に制作し、動きを Javascript / CSS で制御しています。
実際のご依頼では、教科書や副教材の内容に合わせて、必要な内容を1コンテンツ単位 = 1画面ごとに制作しました。
制作した教材コンテンツの例
実際の画面は公開しておりませんので、ここでは内容を一般化してご紹介します。
地図の表示を切り替えて分布を比較する教材
世界の火山の分布と海底山脈の分布を比較するための教材画面を制作しました。地図上に表示する情報をボタンで切り替え、火山の分布、海底山脈の分布などの表示を切り替えることで関連性を把握しやすくします。
グラフの表示を切り替えて違いを比較する教材
水溶液の飽和度の違いを理解するため、ボタンをタップするとグラフの表示が切り替わる教材画面を制作しました。
条件ごとのグラフを別々に表示したり、比較しやすい形で切り替えたりすることで、数値や変化の違いを画面上で確認できます。教科書本文や設問に合わせ、どの状態を最初に見せるか、どの表示を比較させるかを整理して制作します。
これらのような事例では、画面上にはグラフそのものだけではなく、ボタン、記号の凡例、画面内の説明文やメッセージなどが配置されます。画面デザインを含めて制作しています。
制作の流れ
タブレット向けインタラクティブコンテンツの制作では、次のような要素が必要です。
- 画面デザイン
ボタン、表示エリア、図版の配置、説明文の位置などを決めます - 図版・画面素材の制作
画面内で使う図版、グラフなどの制作。表示切り替えがある場合は、状態ごとの素材も作ります - HTML / CSS / JavaScript 制作
画面デザインと素材をもとに、実際に操作できるHTMLコンテンツとして組み立てる段階です - 表示・動作確認
デジタル副教材・教科書QRコンテンツでの需要
近年、学校現場ではタブレット端末の利用が進み、紙面だけでなく、タブレット端末で閲覧するデジタル教材の利用が進んでいます。理科教材では、動画、アニメーション、シミュレーション操作などが、教科書の理解を助ける補助コンテンツとして用意されることがあります。タブレット端末で教科書に掲載されたQRコードを読み、動画や操作できるウェブページを閲覧する、という利用方法もあります。
このようなインタラクティブコンテンツが利用される背景には、GIGAスクール構想による端末環境の整備と、デジタル教科書・デジタル教材の活用を進める教育現場の流れがあります。学習者にとっては、画面を操作しながら内容を確認できるため、変化の流れ、図の違い、条件による結果の違いを理解しやすいというメリットがあります。
※QRコードは株式会社デンソーウェーブの登録商標です。
図版制作からHTML / JavaScript実装まで対応できます
当所では、教材図版の制作に加えて、HTML / JavaScriptによる教材画面の制作にも対応しています。
図版制作と画面制作までまとめてご依頼いただけるほか、図版のみの制作、または支給済みの図版を使ったHTML教材画面の制作にも対応できます。
このようなインタラクティブコンテンツは、理科教材のデジタル副教材、教科書QRコンテンツ、HTML教材、シミュレーション教材などで使用できます。
また、教科書向けの教材だけでなく、企業研修や社内教育用の教材、製品の構造を説明するコンテンツ、技術説明用の図解コンテンツ、博物館・科学館・展示施設の説明画面などにも応用できます。図版を見せるだけでなく、ボタン操作で表示を切り替えたり、条件の違いを比較したりする説明コンテンツとして制作できます。
ご依頼時のポイント
このようなHTMLコンテンツのご依頼の際は、次のような点をご承知おきください。
- HTMLによるウェブページは、利用される端末やOS、ブラウザによって見え方に差が出ます (これは印刷とは根本的に異なる点です)。全ての環境で完全に同じ表示を保証することは致しかねます。
- ご依頼の際は、主に閲覧に使用される端末 (タブレット等) の機種・画面サイズを事前にお知らせください。可能な限り、想定環境で問題がないように考慮しつつ制作します。
- 制作物の確認の際は、図版の見た目だけでなく、ボタンを押したときの表示切り替え、表示順、表示・非表示の状態など、動作もご確認いただく必要があります。
なおこのページでご紹介しているのは、1コンテンツ単位のHTML教材制作です。ログイン機能・学習履歴などのデータベース連携、大規模な教材配信やアプリ開発、継続的な保守運用を含むような場合は、予算規模が変わってきます。詳しくは別途ご相談ください。
制作サンプルをご覧になりたい方へ:
この実績のファイルそのものは一般公開しておりません。参考サンプルをご覧になりたい方はお問い合わせください。
※同様のインタラクティブコンテンツやHTML教材の制作依頼をご検討中の方に限ります
