教室オリジナルのタイピングアプリを作ってみました！

2026/10/13

今回紹介するもの

こんにちは！デジタルステーション習志野スタッフの齊藤です。

プログラミングを学ぶとき、欠かせないものといえば何でしょうか？

答えはもちろん、パソコン・キーボード・マウスですよね！

プログラミングでは、自分で考えたことを形にする力が大切です。

その際、タイピングに慣れていると、文字入力に時間を取られず、プログラムを考えることに集中しやすくなります。

そういった観点で、当教室では生徒が授業内容を早く終わらせたときにタイピングの練習をするように勧めています。

これまでは有名なタイピングサイト「寿司打」などを勧めてきたのですが、せっかくなら教室に関連した言葉や文章でタイピング練習ができるようにしたいと考えていました。

ということで今回、なんと教室専用のタイピングサイトを作ってしまいました！

そのタイピングアプリの紹介と、どのように作ったかについてご紹介します。

教室専用タイピングサイト

実際のタイピングをするときの画面はこちら↓↓↓

コンセプト

このタイピングサイトは

「生徒が楽しくタイピングに取り組める」

をコンセプトに制作しました。

難易度の設定

難易度は

初級
中級
上級

の３つに分かれており、タイピング初心者からタイピングの猛者まで幅広いレベルの生徒が挑戦することができます。

タイピング内容の設定

このタイピングサイトは我々デジタルステーション習志野が制作したので、もちろんタイピングで入力する言葉や文章を教室側で決めることができます。

例えば

「プロクラ」
「プログラミング」
「デジタルステーション習志野」
「習志野駅まで徒歩一分以内」
「プログラミングを学んでゲームを作る」

などの教室と関連したワード・文章を用意することができます。

普通のタイピングサイトではなかなか出てこない、教室ならではの言葉や文章が登場するのも、このタイピングサイトの特徴です！

デスクトップ画面からも飛べちゃう

今回、下の画像を見ていただければわかるように、デスクトップ画面右下からタイピングサイトに直接飛べる簡単なアプリを制作しました。

レベルごとのランキングを表示させることもできます。

タイピングの様子

タイピングの画面はこんな感じです。

作った方法

今回のタイピングサイトは、Googleが提供する「Google Apps Script（GAS）」を利用して制作しました。

GASを使うことで、タイピングサイトとスプレッドシートを連携させ、問題文の管理やランキングの記録などを行うことができます。

また、今回は生成AIの力も借りながら制作しました。

「こんな機能が欲しい」「ここの表示を変更したい」とAIに伝え、実際に動かして確認しながら、少しずつ形にしていきました。

もちろん、AIが作ったプログラムが最初から完璧に動くわけではありません。思ったように動かない部分を修正したり、使いやすさを考えて調整したりする作業も必要でした。

タイピングサイトのご利用について

今回ご紹介したタイピングサイトは、当教室の生徒向けに制作したものです。そのため、一般の方向けには公開しておりません。あらかじめご了承ください。

まだまだ進化させていきたい！

今回完成したタイピングサイトですが、まだまだ改善したいところがあります！

今後は画像やアニメーションなどを追加し、見た目も楽しいサイトにしていく予定です。

また、実際に使ってくれる生徒たちの意見も取り入れながら、より遊びやすく、何度でも挑戦したくなるタイピングサイトを目指していきたいと思います！

デジタルステーション習志野では、今回のタイピング練習のように、子どもたちが楽しみながらパソコンやプログラミングに親しめる環境づくりを大切にしています。

船橋市の習志野駅近くで子ども向けプログラミング教室をお探しの方は、ぜひ当教室の無料体験にもお越しください！

これからも教室での取り組みや、プログラミングに関する情報を発信していきますので、お楽しみに！

▼無料体験のお申し込みはこちら▼

デジタルステーション習志野

〒274-0063 船橋市習志野台4-1-7 習志野駅前郵便局2F

: 駅から徒歩一分

: 入り口はこちら

: 駐輪場