• お電話でのお問い合わせ
  • お役立ち資料ダウンロード
  • お問い合わせ

eラーニングブログ

Blog

2020.12.15

ブログ

eラーニング教材の作り方② ~アニメーション編~

  • おすすめ記事

  •  

    Moodle導入支援・運用サービス

    前回の記事では、「eラーニングの3つの形式」である①アニメーション(html5形式)、②映像・ビデオ形式、③パワーポイント、PDFについてご説明しました。

    引き続き、

    ・eラーニングによる教育にチャレンジしてみたいが、何から始めればいいかわからない
    ・教材はできるだけ内製したい

    という方向けに、eラーニング教材の作り方についてご説明いたします。

    ここでは、アニメーション(html5形式)の教材の制作方法について、以下の事項をご説明いたします。



    1. eラーニング作成ツールの選び方

    アニメーション(html5形式)の教材を作成する際は、ツール(アプリケーション)を利用すると便利です。 ヒューマンサイエンスでよく使用するツールは以下のとおりです。

    • ・Adobe AnimateCC
    • ・Articulate Storyline
    • ・Articulate Rise
    • ・iSpring Suite
    • ・Microsoft パワーポイント

    機能や難易度もさまざまのため、購入代金も含めた予算や、作業する方のスキル、開発期間などに合わせて選択します。

    このうち、Adobe AnimateCCは、flashの後継のアプリケーションです。Adobe AnimateCCでは、従来のflashと同様の操作で、html5コンテンツを作成できます。
    なお、flash形式のファイルは、2020年末で利用できなくなります(詳しくはこちらの記事をご覧ください)。

    また、挙げた中でも、比較的扱いやすく、内製をご希望されるお客様にお勧めすることが多いのは、iSpring Suiteです。
    iSpring Suiteでは、パワーポイントで設定したアニメーション効果をそのまま利用して、動きのあるコンテンツを作成できます。アニメーションとナレーション音声のタイミングも、タイムライン上で合わせたり、微調整したりできます。

    もう少し具体的にご説明しましょう。iSpringは、パワーポイントのプラグインソフトとして使います。インストールすると、パワーポイント上に、タブが生成されます。

    大まかな手順は以下のとおりです。

    1. 1)パワーポイントでスライドを作成する
    2. ・テンプレートの適用
    3. ・スライド作成
    4. ・アニメーション効果の追加
    5. 2)iSpringタブを使って、教材として仕上げる
    6. ・アニメーションとナレーションの同期
    7. ・クイズの作成
    8. ・html5形式での書き出し

    なお、iSpring Suite、Articulate Rise、Articulate Storylineは、日本語版はリリースされていないため、インターフェースは英語のみです(2020年11月現在)。

    2. eラーニング作成のプロセスと必要なスキル

    アニメーション形式のeラーニング教材完成までの標準的な工程は以下のとおりです。

    Step1.企画・設計

    機能や構成設計、配信方法など、教材の仕様を確定させる工程です。
    この工程をしっかりと矛盾なく行うことで、各工程がスムーズに、効率よく進みます。
    教材のUI(ユーザーインターフェース)、デザイン、構成案、学習履歴の取り方などをこの段階で決めておきます。

    Step2.原稿作成

    画面上で何を見せ、何を説明するかを考えながら、原稿を作成します。
    上図にも示したとおり、原稿は教材の設計図でもあります。
    原稿に必要な要素は以下のとおりです。
    ・ナレーション文章(ナレーションがある場合のみ)
    ・シナリオ(必要な素材や演出案)
    ・画面上の要素(文字を含めた画面イメージ、イラスト、写真)

    原稿の作成に使用するツールは、パワーポイントまたはExcelが便利です。
    パワーポイントでは、イラストや図形を扱いやすく、スライド上で自由にレイアウトができます。
    画面イメージのほかに、ナレーション、演出指示などを記載します。

    Excelでは、時系列での流れを追いやすいシナリオを作成できます。画面イメージ、ナレーション、演出指示などを列に並べ、各行にシーンを並べます。

    原稿の執筆者は、教材の内容に精通している方が適任です。
    しかし、専門家や社外の講師が作成した資料などを基にして、社内でご担当者様が作成しなければならない場合もあります。そのようなときは、専門家、講師、システムの設計者などに資料についてヒアリングしてから執筆を始めたり、執筆した原稿のチェックを依頼したりすると、正確な原稿を作成できます。

    ナレーション「あり」の教材にするか、「なし」の教材にするかは、原稿執筆だけでなく、この後の工程にも大きく影響するため、よく検討することをお勧めします。

    ナレーション「あり」にした方が良い場合
    ・複雑な内容を説明する教材
    ・難易度が高い教材
    目で、画面上の相関図や操作手順などの動きを確認しながら、耳で画面の内容に合わせた解説を聞くことで、理解しやすくなったり、理解が深まったりします。ナレーションがないと、図や操作フローを見ながら、解説のテキストを、同様に読みながら学習を進めるため、両者を往復したり、繰り返し見たりする必要があります。

    ナレーション「なし」にした方が良い場合
    ・辞書やマニュアル的に使用する教材
    ・簡易な内容の教材
    ・ルールや年度ごとの変更点などを素早く周知するための教材
    ・予算、開発期間、配信環境に制限がある場合
    ナレーションをじっと聞いているよりも、必要な情報に素早くアクセスしたい、などのニーズが強い場合はナレーション「なし」の方が適していることもあります。
    辞書や資料のような使い方をする場合や、わざわざナレーションで説明するまでもない内容であれば、時間と費用をかける必要がないという判断をする場合もあります。
    また、既知のルール、法令の変更点などを素早く周知したいなど、優先順位が非常に高い要素がある場合も考えられます。
    また、ナレーション「なし」の方が、予算や開発期間、配信環境への負荷が低いため、開発時の状況によって、ナレーション「なし」の判断をする場合もあります。

    Step3.ビジュアル部分の素材準備(イラスト・写真)

    パワーポイントの図形描画機能を使って図を作成したり、フリー素材のイラストなど、ビジュアル部分の素材を準備します。
    フリー素材は、pixta、アフロなどの専門業者から購入したり、無料でイラスト素材を公開しているサイトなどからダウンロードできます。

    eラーニング教材では、ビジュアル部分を充実させることで、理解しやすい、伝わるものになります。言葉を尽くしても伝わりにくいような事項も、図式化すれば一目瞭然です。
    たとえば、下記は貿易管理の理念について説明している図です。


    経済産業省近畿経済産業局サイトより
    https://www.kansai.meti.go.jp/E_Kansai/page/201511/01.html

    この考え方を、文章だけで、誰にでもわかるように説明するとなると大変ですが、このように図式化すれば理解しやすくなります。
    さらに、eラーニング教材であれば、解説に合わせてアニメーション効果を付けられます。説明している箇所を強調したり、モノの流れに沿ってイラストが移動したりなど、より理解しやすくなる工夫もできます。

    他にも、ビジュアル部分を工夫することで、さまざまな効果が望めます。
    ・システムの操作を学習する教材で、実際の画面や、出力される帳票類の実物を示しながら解説する
    ・機械の操作を学習する教材で、実機の操作パネルの写真を使い、学習終了後、戸惑わず操作できるようにする

    なお、ビジュアル部分の素材については、教材の専門性が高く、複雑になるほど、高い質が求められます。
    機械を正確に描写したテクニカルイラストや、安全対策装備の使い方など詳細部分まで描き込んだイラストが必要な場合には、社外のプロに依頼することもご検討ください。

    Step4.ナレーション収録

    ナレーション「あり」の場合は、ナレーション収録を行います。
    収録には、大きく分けると2つの方法があります。
    ・合成音声
    ・人間が読む

    合成音声は、専用のアプリケーションを使って作成します。HOYA株式会社の製品「ReadSpeaker(旧名称VOICE TEXT)」が有名です。

    アプリケーションの購入費用のみで、何度でもやり直しが可能ですが、専門用語などになると、発音の調整など、細かな設定が必要になることがあります。

    人間が読む場合は、プロのナレータに依頼するかどうかを検討します。プロに依頼しない場合は、集合研修をしていればその講師や、教育担当部門の社員が担当するなどが考えられます。
    パソコンとマイクがあれば、収録は事業所内や会議室でも可能ですが、音質や雑音の問題があります。
    レンタルの収録スタジオで収録すれば雑音、NGテイクが除去された音声が納品されます。専門の機材や知識は不要ですが、スタジオのレンタル料金などが必要です。

    プロナレータに依頼する場合は、出演費の交渉や日程調整を行います。
    現在は、スタジオ収録だけでなく、ナレータが自前の環境で収録を行ういわゆる「宅録」や、発注側はスタジオに出向かずに、ナレータのいるスタジオとオンラインで通信しながらの収録が可能なサービスもあります。

    Step5.効果付け(編集)

    ここまでの工程で、原稿、ビジュアル部分の素材、ナレーションといった素材が揃いました。この工程では、それらの素材を組み合わせて、教材として仕立てていきます。
    ここで使用するのが、最初に選定したツール(Adobe AnimateCC、Articulate Storyline、iSpring Suiteなど)です。

    原稿に基づき、準備した素材を使ってアニメーションを作成していきます。
    ナレーションがある場合には、アニメーションとナレーションのタイミングを合わせます(これを「同期を取る」と言います)。
    必要に応じて、効果音やBGMも、この工程で対応します。

    アニメーション作成や音声同期が完了したら、html5形式で書き出します。

    なお、教材内にテストを設ける場合は、この工程で作成します。
    使用するツールによっては、テストのひな形が用意されていることがあります。それらの機能を使えば、特別な知識がなくても、出題、採点、解説などの仕組みを作ることができます。

    Step6.配信、学習管理・運用

    完成した教材をLMSに登録すれば完成です。
    LMSを使わない場合は、配信の手段に合わせて準備や周知を行います。

    執筆者:

    佐瀬 志津子

    教育ソリューション部 制作グループ ライター
    ヒューマンサイエンス入社後、テクニカルライターとして、
    製品マニュアルや業務マニュアルの設計・ライティングを経験。
    その後、eラーニング教材の原稿の執筆と制作ディレクションに従事。
    これまで約200本に及ぶ教材の制作に携わる。

    お問合せ先:

    電話番号 : 03-5321-3111
    hsweb_inquiry@science.co.jp

    失敗しない!
    eラーニング原稿作り方のポイント

    集合研修で使用する資料など、既に作成している原稿のブラッシュアップ部分にスポットを当て、注意点や修正ポイントなどをご説明します。

    【内容】

    • 作業フローを確認しましょう。
    • スライドをブラッシュアップしましょう。
      ①情報を分類し、ラベリングする
      ②情報を整理し、レイアウトする
      ③ブラッシュアップする

    ダウンロードはこちら