RootLink

WebアプリtoCAIWebサイトモバイルアプリランディングページ

「語源のつながり」から学べる辞書×単語帳アプリをAI駆動で開発した。

使用言語

TypeScript、 Supabase、 Next.js

期間

2025/05-現在

クライアント

個人開発

役割

Frontend Development、 UI Design、 UX Design

チーム構成

使用技術

TypeScript、Supabase、Next.js

Outline

RootLinkという「語源のつながり」から学べる辞書×単語帳アプリを開発した。

2025年5月に個人開発として着手。現在は Web で一般公開しており、2026年10月に iOS / Android アプリのリリースを予定している。企画からデザイン、実装、リリース後の運用までを一人で担当している。

Objectives

語源から学べる単語アプリがなかった

単語帳を進めても覚えた端から忘れていく感覚があった。一方で語源を知っている単語は、意味を思い出せなくても構造から推測できる。

一語ずつ暗記するのではなく、語根という骨格から複数の単語をまとめて理解したい。しかし既存の単語アプリで語源をパーツ単位まで分解して見せてくれるものは見つからなかった。

必要なものがなかったので、自分で作ることにした。

Key Features

語源をパーツで分解して表示する

関連性で英単語を理解し、つながりで覚えるために

「語源のつながり」から検索した単語をその場で意味だけでなくパーツで理解できる「語源パーツ」というチャンクを作った。

検索がそのまま復習につながる

保存した単語はそのままフラッシュカードで出題される。検索するだけで復習の仕組みができあがる。

出題範囲は「おまかせ」「未学習」「要復習」「苦手」の4つから選べる。過去の解答履歴から単語を自動で分類しており、不正解が2回以上のものは苦手、直近が不正解のものは要復習として扱う。セッション終了後には間違えた単語だけをその場で再挑戦できる。

保存したまま眠っている単語帳にしないことを重視した。

過去に学習した単語との関連性を示して記憶を定着させる

自分の過去の学習履歴から現在学習している単語との関連性をシステムから提案する機能も実装した。過去の記憶と現在をシナプスのように繋げて記憶定着の強化を図っている。

教材の拡充

TOEIC・IELTS・TOEFL・英検に対応した単語帳を用意し学習の入口を広げた。自分で単語を集めるだけでなく、目的から入れる導線を追加している。

AI Integration

事実は辞書、読みやすさは AI

語源データそのものは Oxford Dictionaries API から取得している。AI に語源を生成させると、もっともらしいが事実として誤った語源を出力してしまうためである。

そのうえで、AI の役割を「学習者が読める形への書き換え」と「構造化された形式での出力」に限定した。事実の正しさは辞書側で担保し読みやすさを AI 側でつくる分担にしている。

具体的には辞書から得た語源テキストを AI に渡し、見出し語の中に実際に現れているパーツだけを抽出させている。語源文に根拠がないパーツは作らせていない。

検索されるほど語根のインデックスが育つ

単語を保存する際、抽出したパーツと単語の対応も同時に蓄積している。

これにより「この語根を持つ他の単語」を辿れるようになる。あらかじめ全単語のデータを用意したのではなく、ユーザーの検索行動そのものがデータベースを育てる設計になっている。

Web・iOS・Android を同じ実装で成立させる

3つのプラットフォームで同じ URL を参照する構成にしている。ネイティブアプリは Capacitor で包み、認証やディープリンク、通知といったネイティブ固有の部分だけを個別に対応した。

一人で開発している以上3つ分のコードを保守する選択肢は現実的ではなかった。

コンポーネントとトークンの統一

繰り返し使う要素は共通コンポーネントとして切り出し、Storybook で管理している。色やボーダーはデザイントークンに寄せハードコードを排除した。

デザインと実装を同じ人間がやっているとその場の判断で細部がずれていきやすい。その辺りが濁らないようにするため、仕組みで揃うようにしておき後から画面を追加しても崩れない状態を保つようにしている。

技術スタック

フロントエンド

分類	内容
フレームワーク	Next.js 14（App Router）
言語	TypeScript
スタイリング	Tailwind CSS
コンポーネント管理	Storybook
ネイティブ対応	Capacitor 7（iOS / Android）
ホスティング	Vercel

バックエンド

分類	内容
フレームワーク	Hono
実行環境	Google Cloud Run（東京リージョン）
データベース / 認証	Supabase
辞書データ	Oxford Dictionaries API
言語処理	OpenAI API