学習補助Webアプリ「Base」①：設計と開発のきっかけ【高校生の開発メモ002】

Last updated at 2026-07-01Posted at 2026-07-01

紹介する作品は実際に公開しています。覗いて頂けると嬉しいです|•ω•｡)"

探究活動で開発したWebアプリ「Base」を題材に，設計や開発時の工夫を全5回で紹介します。

開発のきっかけ

現在私の通う高校では，連絡の多くに Google Classroom を使っています。

・教科ごとに別のクラスに入る必要があるのが面倒
・連絡が投稿順にのみ表示されるので，見落としが起きる

私はこれまで，このような課題を感じていました。

探究Ⅱ情報ゼミにて ｢自分たちの生活をより良くできるものを作ろう！｣ というテーマを聞いた時にこのことを思い出し，学習補助を出来るWebアプリを作ることに決めました。

また開発にあたって，中学校3年生と高校生の計840名を対象に｢小テストの勉強，予定の管理についてのアンケート｣と題した調査を行い(有効回答145件)，機能を考える際の参考にしました。

時間割に直接連絡を書き込めれば利便性が上がるのではないか，という発想から，年間予定と時間割データを主軸にした設計になっています。

内部の機能については，下記の3点を条件として考えました。

この考えをもとに，実装したのが下記の3つです。

それぞれの設計やセキュリティ上の工夫など，今後の投稿で紹介していきます。

※当初はグループで開発する予定でしたが，途中から一人で引き継ぐ形となったため，スケジュールには空白期間があります。

当時はサーバを利用することができなかったため，HTML，CSS，JavaScriptのみで動作する試用版を制作しています。β版に移行する時に外部入力に変更しやすいよう，サンプルデータは別シートに分離していました。

コーディングには VS Code を，UI設計には Canva を利用しました。

以上が Webアプリ｢Base｣の概要になります。

次回はソースコードなどを交えて，ユーザ名生成機能とセキュリティ面で工夫したポイントを紹介します。