ゲーム感覚でIT・AI用語500選を覚える学習アプリの作り方 — XP・13ランク・実績で「続く」を設計する

アプリの作り方

ゲーム感覚でIT・AI用語500選を覚える学習アプリの作り方 — XP・13ランク・実績で「続く」を設計する

IT・AI用語500語、13カテゴリ。この量を単語帳で回そうとして、3日で止まった経験が私にはある。原因は根性でも記憶力でもなかった。「覚える」という作業に、続けたくなる仕掛けが1つも無かったからだ。そこで発想を変えて、「単語を覚える」を「キャラを育てる」に置き換えた学習アプリを、AIと一緒に作った。名前は ITerm Master。答えるたびにXPが入り、レベルが上がり、実績バッジが解除されていく。この記事では、その画面と「続く」を作る設計の勘所を、実物のスクリーンショットつきで全部見せる。

目次
  1. このガイドで作るもの
  2. 覚える入口は3つ:フラッシュカード・クイズ・苦手特訓
  3. 「続く」を作る仕掛け:XP・13ランク・実績コレクション
  4. 作り方の要点:辞書はMarkdown、履歴はSQLite
  5. 実際に使って見えたこと
  6. 正直なまとめ

このガイドで作るもの

ITerm Master は、IT・AI用語500選を覚えるためのデスクトップ学習アプリだ。Python の GUI フレームワーク Flet(Flutter ベース)で画面を作り、学習履歴は SQLite に自動保存する。見た目は「Cyberpunk Study Lab」と名づけたダークテーマで、ネオンの光る円形プログレスが全体の習熟度を映す。

ITerm Masterのホーム画面。中央に習熟度16%の円形プログレス、右にLv.3コード候補生のXPバー、連続学習、デイリーミッション、下部にカテゴリ別習熟度カード
ホーム画面。中央の円形プログレスが全500語の習熟度(この時点で16%・84語)。右側にレベル(Lv.3 コード候補生・1,762/2,000 XP)、連続学習日数、デイリーミッション。下段は13カテゴリ別の習熟度カードで、「プログラミングの基本」は42/42の100%になっている。

ホームに置いたのは、数字で「自分の現在地」が一目で分かる部品だけだ。全体習熟度、レベルとXP、連続学習(ストリーク)、今日のミッション、カテゴリ別の進み具合。ゲームのステータス画面と同じ発想で、開いた瞬間に「昨日の自分より進んでいる」ことが見えるようにした。

覚える入口は3つ:フラッシュカード・クイズ・苦手特訓

学習モードの基本はフラッシュカードだ。用語が表示され、Space キーで答えを見て、自分の理解度を3段階で申告する。キーボードだけで回せるので、1語あたり数秒のテンポで進む。

フラッシュカード学習画面。ツール使用(Function Calling)の答えが表示され、下に×わからない・△うろ覚え・✅覚えたの3ボタン
フラッシュカードの答え表示。「×わからない(1)/△うろ覚え(2)/✅覚えた(3)」の3段階を数字キーで申告する。この自己評価がそのままXPと苦手リストに反映される。

ポイントは、この3段階の申告をそのまま報酬に変換することだ。×は1XP、△は3XP、○は10XP。さらに初めて覚えた語には+10、一度「わからない」と申告した語を克服したら+20、完全にマスターしたら+30のボーナスが乗る。正直に「わからない」と押しても1XPは入るので、申告をごまかす動機が生まれない。

2つ目の入口がクイズだ。用語の説明文から正しい用語を4択で当てる。フラッシュカードが「思い出す」練習なら、クイズは「説明と用語を結びつける」練習で、同じ500語を別の角度から叩ける。

クイズチャレンジ画面。設計書の説明文に対して4つの選択肢が並ぶ
クイズチャレンジ(20問)。説明文を読んで4択から用語を選ぶ。選択肢も数字キーで答えられる。
クイズ正解時の画面。正解!+15 XPの表示と、正解した選択肢が緑色にハイライトされている
正解すると「✅ 正解! +15 XP」。正解の選択肢が緑に光り、右上のカウンタに獲得XPが積み上がっていく。

3つ目が苦手特訓だ。「わからない」と申告した語だけを集めて再挑戦するモードで、ホームのカテゴリカードにも「⚠ 苦手 1」のように数が出る。苦手を潰すと+20XPのボーナスが待っているので、いちばん面倒な復習が、いちばん割のいい稼ぎ場になる。私の場合は「ネットワーク」と「AI・機械学習」に苦手が溜まりやすく、寝る前に苦手特訓だけ1周する使い方に落ち着いた。

「続く」を作る仕掛け:XP・13ランク・実績コレクション

このアプリの本体は、暗記機能よりむしろ報酬設計のほうだ。獲得したXPの累計でレベルが決まり、称号は13段階。Lv.1「新米コーダー」から始まり、Lv.6「ネットワーク忍者」、Lv.10「データ魔術師」を経て、10万XPでLv.13「IT 大師範」に到達する。レベルの名前をふざけ気味にしたのは意図的で、次の称号を見たさに「あと238XP」を稼ぎたくなる。

デイリーミッションは毎日3件出る。「クイズで5問正解する」「苦手用語を5個復習する」のような小さな課題で、3件達成すると+50XP。1日の学習の「最低ライン」を決めてくれるので、ストリーク(連続学習日数)が途切れにくくなる。

実績コレクション画面。マイルストーン・マスター・連続学習・コンボのカテゴリにバッジが並び、獲得済みは色付き、未獲得は???のロック表示
実績コレクション(この時点で6/37解除)。「最初の一歩」「10語マスター」「ブロンズ(50語)」などのバッジが並び、未解除は「???」のロック表示。中身が見えないからこそ開けたくなる。

実績は全37種。覚えた語数のマイルストーン、マスター数、連続学習、クイズの連続正解コンボなど、複数の軸で用意した。未解除のバッジを「???」で隠すのはゲームの定石で、コンプリート欲を素直に刺激してくれる。

作り方の要点:辞書はMarkdown、履歴はSQLite

設計でいちばん効いたのは、用語辞書を Markdown ファイルにしたことだ。「## カテゴリ名」の見出しと「| 番号 | 用語 | 説明 |」のテーブルだけで書かれた IT_AI_用語500選.md を、起動時に正規表現でパースして読み込む。この形式にした理由は2つある。辞書そのものをAIに書かせやすいこと、そして用語の追加・修正がテキストエディタで済むことだ。例えば「ツール使用 (Function Calling)」の説明文を手直ししたくなったら、mdファイルの該当行を書き換えて保存するだけでいい。次の起動で新しい説明が読み込まれる。データベースに用語を入れてしまうと、内容を直すたびに管理画面が要る。Markdownなら差分もgitで追える。

学習履歴のほうは SQLite に分けた。各用語の評価履歴、累計XP、ストリークの日付。アプリを閉じても消えない「育てた記録」はDBに、コンテンツはテキストに。この分離のおかげで、辞書を差し替えても学習履歴は無事に残る。

画面は Flet で組んだ。Python だけで Flutter 品質のUIが出るので、ネオングローや円形プログレスのような「ゲームらしい見た目」も CSS 無しで書ける。キーボードショートカット(Space で答え、1〜3で評価)も Flet のイベントで素直に実装できた。デスクトップアプリとして PyInstaller で固めれば、Python が入っていないPCにも配れる。

AIとの分担はこうだ。要件定義書と画面構成は私が会話で固め、コードの大半は Claude に書かせた。XPの数値バランス(×1/△3/○10、ボーナス10/20/30)だけは、自分で何度か学習を回して調整した。報酬の気持ちよさは、数字を触った本人にしか分からない。

実際に使って見えたこと

スクリーンショットの数字は演出ではなく、私の実データだ。累計3,262XPでLv.3「コード候補生」、全体習熟度16%、「プログラミングの基本」カテゴリだけ42/42の100%。得意分野から先に潰す遊び方が自然に生まれるのは、カテゴリ別の習熟度カードが「あと少しで100%」を見せてくるからだ。

やってみて分かった弱点もある。ストリークは1日空くと容赦なく途切れる(最長記録2日が画面に残っているのが動かぬ証拠だ)。それでも「昨日より数字が進む」体験は単語帳には無かったもので、500語の壁が「未学習400」という減っていくカウンタに変わっただけで、心理的な重さがまるで違う。

覚える気力は、画面から湧く。

正直なまとめ

暗記が続かない原因は、教材ではなく設計にあると私は考えている。3段階の自己申告をXPに変え、レベルと実績で進捗を可視化し、デイリーミッションで最低ラインを決める。この3点を組むだけで、「勉強しなきゃ」は「今日のミッションを消化したい」に変わる。既製の暗記アプリを探し回るより、自分の覚えたい500語に合わせてAIと作ってしまうほうが、結局は続いた。Flet と SQLite と Markdown。使った道具はこれだけだ。次はあなたの「覚えたいリスト」で、同じ仕掛けを組んでみてほしい。


👉 関連: 開発実例:ITerm Masterほかのアプリの作り方バイブコーディング入門

WordPress 7.0.1 と 7.1 の React 19 — 自作テーマ・プラグインを今から通す準備WordPress 7.0.1 と 7.1 の React 19 — 自作テーマ・プラグインを今から通す準備前のページ

WorkSpace Explorer の作り方 — 増えた自作アプリを一画面で束ねる Electron 製の開発司令塔次のページWorkSpace Explorer の作り方 — 増えた自作アプリを一画面で束ねる Electron 製の開発司令塔

ピックアップ記事

  1. Claude Mission Control の作り方 — Tauri+Pyth…

  2. 競艇予想AIの作り方 — LightGBMで「当たる順位」を学習させる実装ガイド…

  3. 高精度OCRデスクトップアプリの作り方 — PaddleOCR-VLとPyIns…

  4. New Eden Intelligence Hub の作り方 — EVE Onl…

関連記事

  1. AIアセットでゲームマップを作る — 生成スケッチの透過切り出しからレベルセレクトまで
  2. JavaScriptでRPGを作る④|ワールドマップ・シーン遷移・セーブ(localStorage)【Archipelago Saga制作】

    アプリの作り方

    JavaScriptでRPGを作る④|ワールドマップ・シーン遷移・セーブ(localStorage)…

    ステージデータから蛇行するワールドマップを描き、クリアでロックを解放し…

  3. アプリの作り方

    MiniMax H3をVRAM 8GBで動かす — ComfyUI導入手順と、800×448が実用上…

    映像とステレオ音声を1パスで生成する MiniMax H3 を、公式が…

  4. large-v3-turbo は large-v3 の代わりになるか。日本語で測って、速度の測り方を2回間違えた記録
  5. JavaScriptでRPGを作る③|CTB戦闘システムをDOM非依存で実装する【Archipelago Saga制作】

    アプリの作り方

    JavaScriptでRPGを作る③|CTB戦闘システムをDOM非依存で実装する【Archipela…

    FFX風のCTB(チャージタイム制)戦闘を、画面(DOM)から完全に切…

注目

AIで、ここまで作れる

AIで作った2D RPGを、ブラウザでそのまま遊べます。その「作り方=最後まで完成させる進め方」も実例つきで公開中。

▶ ゲームを遊ぶやり方を読む

PR

お名前.com 独自ドメイン取得(PR)

独自ドメイン:お名前.com(本サイトで使用・PR)

  1. 背景除去アプリを作る⑤|5スライダー後処理+消去/復元ブラシ+20段Undoで「自動9割・手で1割」を仕上げる【背景除去Studio制作】

    アプリの作り方

    背景除去アプリを作る⑤|5スライダー後処理+消去/復元ブラシ+20段Undoで「…
  2. GPT-5.6 Sol/Terra/Luna が Copilot に — 従量課金で3層を使い分ける

    AI・テック動向

    GPT-5.6 Sol/Terra/Luna が Copilot に — 従量課…
  3. AI・テック動向

    Claude Code 2.1.219 でサブエージェントが深さ3までネスト可能…
  4. Claude Sonnet 5 が Claude Code の既定モデルに — 1Mコンテキストと月コスト激減を実額で検証

    AI・テック動向

    Claude Sonnet 5 が Claude Code の既定モデルに — …
  5. FX Monitor Pro の作り方 — Flet で主要10通貨ペアを常時モニターするデスクトップ為替アプリ

    アプリの作り方

    FX Monitor Pro の作り方 — Flet で主要10通貨ペアを常時モ…
PAGE TOP

TAG CLOUD

ドラッグで回転・クリックでそのタグの記事一覧へ