Works

みんなで聞こう日本の歌

  • Client 独立行政法人 国際交流基金
  • Category 動画配信・日本語教育サイト
  • Release 2016年6月
  • Services デザイン、HTML/CSS/JavaScript、プログラミング、サーバ
  • URL http://nihon-no-uta.jp

外国人などの日本語を学ぶ人々が、自分の興味、日本語レベルに合った日本の歌を探して、聴くことが出来るウェブサイトを制作させていただきました。
ウェブサイト内では童謡・唱歌47曲、インディーズ曲22曲、計69曲を配信しており、曲のジャンル、テーマ、日本語難易度、タイトル、視聴ランキング等、様々な方法で日本の歌を探すことができます。
再生ページでは、ひらがな・カタカナ、ローマ字の歌詞字幕が利用でき、日本の歌を耳で、目で楽しむことができる内容です。

制作は、デザイン・html/css・プログラミング・サーバ構築を担当しました。
デザインは、海外の幅広いユーザーに親しんでもらえるよう、優しくあたたかい雰囲気にしています。
黒板をモチーフとして使用することで「学ぶ」雰囲気も感じられるようにしています。
また、曲を聴くことがユーザーのメインの行動となり、長時間の閲覧が考えられるので、長く見ていても目が疲れない配色、簡潔なユーザーインターフェースであることに重きをおいています。
モバイルにも対応しており、レスポンシブデザインを採用しています。
世界中からの、グローバルなアクセスがあるwebサイトですので、動画閲覧時に遅延がおこらないように、AWS CloudFrontを使ってストリーミング配信のシステムを構築しました。動画は、暗号化処理をしたHLS形式で配信しています。
また、動画内容と外部データを同期させて表示させる部分は、HTML5 webVTTを利用しました。