Otoppe Picture Book オトッペずかん

back to works



An application linked to TV programs that spotlights familiar sounds and stimulates children's curiosity.

Project Overview

NHK Eテレの子供向け教育番組「オトッペ」の番組公式アプリとWebサイトを制作しました。

開発環境はUnityを使用し、iOS / Androidの2OSに対して効率的に開発を行いました。また、2Dキャラクターを有機的にアニメーションさせるためSpineを使用。番組内の「オトッペキャッチ」コーナーと連動するコンテンツでは、マイクから取得した音とTVから流れる音が同一音源かを判定する処理を、フルスクラッチで構築しています。さらに、キャラクター生成は独自開発した音声解析プログラムと連動させ、約6万通りのアウトプットバリエーションを実現しました。

We created the official application and website for NHK E-television's educational program for children, "Otoppe".
Otoppe" is an animated program featuring "Otoppe," a mysterious creature born from sound, and Sheena, who aspires to become the world's best DJ. The theme of the program is to stimulate children's curiosity by highlighting familiar sounds in our daily lives. The "Otoppe Picture Book" application allows users to record familiar sounds, find "otoppe" and contribute them to the program. The application can also be used during the "Otoppe Catch" mini-corner in the program to catch the "otoppe" that appeared in the program, providing a new viewing experience that integrates TV and the application.

Unity was used as the development environment, and efficient development was carried out for the two operating systems, iOS and Android. Spine was used to organically animate the 2D characters. For content linked to the "Otoppe Catch" corner of the program, a full-scratch process was used to determine whether the sound acquired from the microphone and the sound from the TV were from the same source. In addition, character generation is linked to a proprietary voice analysis program, resulting in approximately 60,000 output variations.



  • 日本放送協会
  • Japan Broadcasting Corporation


  • 株式会社博報堂
  • Hakuhodo Inc.




  • Application
  • Branding
  • System


APR 2017