クイズ形式で野菜摂取の大切さを学べるeラーニングサイトの
インタラクティブ映像とUI・UXデザインを制作

カゴメ株式会社様

製造

ご利用サービス：

動画企画制作

ご利用ケース：

動画による教育・研修・情報共有 / 動画の企画制作 / Webサイト構築

TOP / 導入事例 / カゴメ株式会社様

担当業務
Webディレクション
岩科徹
Webデザイン
藤田雅之
概要

カゴメ株式会社様では、企業や自治体を対象とした健康増進をサポートするセミナーなどのサービスを展開しており、今回、野菜を摂ることの大切さや食生活改善の方法を楽しく学び、行動変容を促すことを目的としたeラーニング教材を開発。

Ｊストリームは、ｅラーニングサイトのインタラクティブ映像とUI・UXデザインの制作を担当した。

サイトには何度も繰り返し学んでいただくため、３名のユニークなキャラクターの講師が登場。好きな講師を選択し、野菜の基礎的な知識や食生活改善方法について、インタラクティブなクイズ形式で楽しく学び進めることができる。
制作のポイント
（映像制作）
受講者とのコミュニケーションを大切にしているリアルセミナーを踏襲した映像にするため、クイズにただ答えるだけではなく、講師が語りかけてきたことに対して、受講者の心の声を字幕で表示させ,疑似的に会話するなどインタラクティブ性の高い構成にした。

講師は、カゴメ「野菜と生活管理栄養士ラボ」公認キャラクター「笑美（えみ）ちゃん」、「TAKAMORI」、「なまはげ」の個性的な３キャラクターとなっており、笑美ちゃんは優しい口調と表情で、なまはげは上から目線の口調と怒った表情が多いなど、キャラクターの性格に合った表情やセリフの細かい設定を工夫した。

映像内のスライドは、１枚の情報量を抑えた視覚的に分かるシンプルなデザインにし、クイズ出題時の回答ボタンは、スマートフォンなど小さい画面でも押し間違いがないようにレイアウトした。
（Web制作）
サイトのテイストを決める際、企業イメージを言語化したものをデザイン要素に変換し、サイトのパーツに落とし込みUIを構築した。（「健康志向」から「白ベース」、「カジュアル」から「角丸」「原色多め」など。）
この手法により企業イメージから外れることなく、個性的な各キャラクターを存在させ、且つやわらかい雰囲気のサイトに仕上げた

視聴画面では、動画上部に進行状況のナビゲーションバー、右側にはチャプターを設置。受講者が進行状況を把握しながら、ストレスなくしっかりと学べる設計にした。

ナビゲーションバーに野菜のアイコンを使ったり、理解度テストの結果画面では、回答率に応じて背景の野菜の量とキャラクターの表情が変化するなど、各所に遊び心も盛り込んだ。
お客様の声

「複数のキャラクターから講師を選択できる仕組みが受講者からも好評で、視聴完了率も高く満足しています。
また動画の途中で質問が出てくるなど、対面式の健康セミナーにて実施していたことがＷｅｂ上で再現されており、狙い通りの出来でした。
提案の段階から様々なアイデアをお互い出し合うことができたので、よりよいコンテンツが出来上がったと感じています。」