小中学生に地元の"今"をわかりやすく伝え、考えて学べるシステム
1. プロジェクト概要
小中学生向けデジタル教材「ミヤシル」 株式会社 河北新報社・宮城県富谷市
河北新報社様が小中学生向けに公開している「かほピョンプレス」「かほピョンワーク」に加えて、宮城県内の仕事や働く人を紹介する「仕事ずかん」宮城県35市町村について学べる「ミヤシル35」を宮城県富谷市の小中学生に提供するシステムを構築しました。
河北新報社様が行う各コンテンツの管理業務もシステム化しています。
2. 背景と課題
河北新報社様より以下のご相談を受け、弊社にてシステムの提案と開発を行いました。
- 若年層との接点を持つことで信頼を得て、地域住民としての将来的な購買層につなげること。
- デジタル教材を提供し教育現場で教員や子どもたちとの接点を作って、高い反応をもらえるようになること。
- デジタル教材とは、高い反応をもらえるように地域メディアとしての河北新報が「自分が住んでいる地域」の関した情報を提供すること。
3. 開発内容
開発に使用したアーキテクチャ
フロントエンド側
- TypeScript (Vue.js / Vuetify)
バックエンド側
- Node.js
インフラ (一部抜粋)
- AWS Amazon S3
- Amazon ECS
- Amazon RDS Aurora MySQL
4. 開発プロセスと体制
河北新報社様から提供したいコンテンツのイメージを頂戴し、弊社で作成したワイヤフレームをベースにUI・システム設計の方向性を固めました。
ワイヤフレームは随時デザイナー様に共有し、最終的なデザインを河北新報社様・デザイナー様・弊社の3者でブラッシュアップしながら調整しました。
最終的なデザインが固まるまでの間にはバックエンド設計・実装を優先して行い、デザインが固まった画面から順次フロントエンドの実装を行いました。
5. 課題と解決策
短期間での開発
半年弱のスケジュールの中で実際の開発期間が短くなることが予想されたため、以下の3点により実装工数の削減を図りました。
- デザイナー様に作成いただいたFigmaのページデザインからAIツールを活用してコード生成を行い、初動の実装工数を削減しました。
- 管理画面のUIフレームワークにVuetifyを採用し、UIの実装工数を削減しました。
- バックエンドAPIはSwagger Codegenを活用し、API仕様書からサーバコードを生成して初動の実装工数を削減しました。
小中学生に受け入れられるUI設計
UI設計では以下の2点が課題として挙げられ、ワイヤフレームを作成する際の指針としました。
- タブレット操作に適していること。
タブレットでも操作しやすいよう、ボタンを基本としたUI設計を行いました。 - 小中学生でも使いやすく、興味をもってもらえること。
ボタンには「○○をみる」など次のアクションに迷うことがないラベル名を採用しました。
また「しんぶん記事から考えてみよう」「気になる○○を選んでみよう」といった一文を併記して、興味をもつきっかけを設けました。
6. 開発の成果と効果
実際の授業でミヤシルを利用した児童・生徒からは「とても使いやすかった」「地元の知らなかったことをより知りたくなった」といった感想を頂戴し、地元に特化したデジタル教材として定着していくことが期待されます。
今回導入いただいた富谷市様以外の市町村からも関心を持っていただいており、今後は宮城県内で幅広く活用されることが期待されます。
7. 成功のポイント
短期間の開発スケジュールの中で、効率的な開発手法の選定と並行した開発チームへの横展開が求められました。
開発チームは入社3年目以内の若手メンバーで構成されていたこともあり、メンバーによっては未経験の技術領域であっても柔軟に取り入れながら開発を進められたことが成功のポイントとして挙げられます。
デザイン面では明確な指針のもとでワイヤフレームを作成し、河北新報社様・デザイナー様・弊社の3者でブラッシュアップできたことも成功の重要な要因となりました。
