LINEの友だち追加で高難易度モードが解放

「中学英単語タイムアタック！」は、30秒の制限時間の中で出題される英単語問題に回答し、正解した数のランキングを競うゲームです。
ノーマルモードをクリアすると、高難易度の鬼モードを解放するためのキーワードが表示されます。LINEでNHKテキストアカウントを友だち追加し、キーワードを入力することで鬼モードに挑戦できるようになります。ノーマルは500問、鬼は300問が用意されており、システムによりランダムで出題されます。

これまでのコンテンツにおいて、認知〜次年度テキストの比較検討までの役割を1コンテンツに担わせることが難しいという課題がありました。そこで2024年は、認知の拡大をピンポイントに狙い、興味醸成をはかるコンテンツとして「中学英単語タイムアタック！」の開発についてご相談を頂きました。
また、LINEの友だち登録を促すことで、LINEを活用した様々なコミュニケーション施策への入り口となるよう設計いたしました。

ご要望に寄り添ったデザインをご提案

「RPGゲーム」風のデザインにしたいというご要望に沿って、具体的な世界観のご提案やキャラクターの性格設定・イラスト制作を行いました。
構成要素をお伺いし、それに基づいてテイストに合ったキャラクターやロゴの提案を実施。その際、キャラクターの口調や性格の設定にも細心の注意を払いました。
今回は、RPGゲームにおける「主人公」の敵である「魔王」に、可愛らしさを足した「ねこ魔王」というキャラクターを作成。
ゲームらしいキャラクターのリアクションで、タイムアタックに挑戦するお客様とのコミュニケーションを豊かにすることを心掛けました。

その後、キャラクターや背景が動くAPNGによるアニメーションも制作。
ご提案したキャラクターやロゴについて、イラストとアニメーションの両方を実装し、RPGゲームの中に入り込んだようなデザインを実現しました。

ユーザーの体験を高めるフロントエンド設計

フロントエンドの実装は、デザイナーと密接に連携し、Web上で実現可能な範囲について詳細に検討することを重視しています。その結果、プロジェクト全体の世界観を崩すことなく、理想的なデザインを実装することができます。

ゲーム画面の設計においては、ユーザー体験を向上させるために、読み込み速度の最適化を重視しました。そのため、画像フォーマットとして軽量で高品質なSVG（Scalable Vector Graphics）形式を採用しました。
また、アプリケーションの実装には、Nuxt.jsとVue.jsを使用しました。これにより、高速かつスムーズな操作感を実現し、ユーザーがストレスなくゲームを楽しめる環境を整えました。

さらに、ランキング情報の読み込みに関しては、ユーザーの利便性を考慮し、localstorageを活用しました。これにより、会員登録を行わなくてもユーザー情報が保存され、ゲームの進行状況やスコアが保持される仕組みを構築できるようになります。
ユーザーが再度ログインする際にも、自分のランキング情報を確認することができ、継続的な利用を促進する効果が期待できます。

ランキングやシェア機能を効率的に実装

ランキング機能の実装においては、効率的で高性能なデータ管理を行うために、Redisのソート済みセットというデータ型を採用しました。Redis側で一部の処理が自動的に行われるため、開発の手間を大幅に削減することができました。また、AWSの構築に関しては、ランニングコストの削減を図るため、サーバーレスアーキテクチャの導入をご提案、実施しました。

さらに、各SNS上で動作する動的なOGP（Open Graph Protocol）を実装。具体的には、点数、名前、ランキング情報を含む画像を生成するために、画像生成用サーバーにリクエストを送り、AWSのCloudFrontを経由してLambdaにリクエストを飛ばすというプロセスを構築しました。この手法により、「自分の順位を画像でシェア」という魅力的なコンテンツができました。

ゲームをきっかけに新たなコミュニケーション施策へ

このプロジェクトでは、ゲーム要素を取り入れることで、「もう少し英語学習を頑張りたい」「やらなければならない」と思っている若年層に向けて、NHKテキストの認知を広げることを目的としています。特に、NHKテキストを知らない方に対しても、ゲームを通じて楽しみながら英語学習に取り組んでもらうことで、自然と認知度を高める効果を期待しています。2024年7月現在、ゲームの受験数は1,300,000回に達しています。

また、LINEを活用することで、新たなコミュニケーション施策を実施することが可能となり、ユーザーとの密接な連携を図ることができます。サービス保守のほかにも、お客様に対して継続的に情報を提供するるべく、様々なコミュニケーション施策を検討していきます。

URL: https://eigoryoku.nhk-book.co.jp/