Back to projects
Project
Koto-Koto
無駄を削ぎ落としたUI、心地よい打鍵音、季節に合わせて変化する演出を組み合わせた日本語タイピングゲームです。練習効率だけでなく、リラックスして集中できるZen Typing体験を目指して制作しました。
- Status
- Released
- Period
- 2026
- Built
- 企画 / UI設計 / フロントエンド実装 / 入力判定エンジン実装 / 認証・データベース連携 / ランキング機能 / テスト
Overview
ClassicとWord Endlessの2つのプレイスタイルを持つ日本語タイピングゲームです。スコアやランキングを競うモードに加え、記録を気にせず単語を打ち続ける瞑想的なモードを用意しています。
Background
単なるタイピング練習ではなく、集中しやすい画面、心地よいフィードバック、季節感のある演出を組み合わせることで、タイピングそのものに没入できる体験を作りたいと考えて制作しました。
Tech Stack
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
- Zod
- NextAuth.js
- Prisma
- Supabase
- Jest
Scope
- 企画
- UI設計
- フロントエンド実装
- 入力判定エンジン実装
- 認証・データベース連携
- ランキング機能
- テスト
Approach
- 「si/shi」「tu/tsu」などの入力揺れを許容するため、Trieベースのローマ字かな変換・判定エンジンを自作
- Cherry MX軸やTopreなど、13種類のメカニカルキーボード打鍵音を用意し、入力時のフィードバックを設計
- 現実の季節に合わせてテーマとパーティクル演出が変化する仕組みを実装
- NextAuth.js、Prisma、Supabaseを用いて認証、スコア保存、ランキング機能を構築
- JestとReact Testing Libraryで入力ロジック、結果判定、ランキング周辺のテストを作成
Challenges
- 日本語ローマ字入力の揺れを、ユーザーの入力体験を損なわずに高速に判定する設計が難しかった
- 打鍵音やパーティクル演出を加えながら、タイピング中の集中を妨げないUIに調整する必要があった
- ゲームロジック、認証、ランキング、UI演出を分離し、保守しやすい構成に整理することに取り組んだ
Next Steps
- Word Endlessモードの単語セット拡充
- Zen Scoreの算出ロジックの検証と調整
- ARCHITECTURE.mdをもとに、Custom HooksとContext APIの責務をさらに整理