Cornix Dojo — 自分のキーマップが、教材になる。
分割キーボード「Cornix LP」専用のタイピング練習サイト。WebHIDで実機からキーマップを読み取り、レイヤーやShiftの押し方まで3色のガイドで案内します。愛用キーボードの練習環境が欲しくて、企画からUX/UI設計・実装・公開までを一人でかたちにした個人開発です。
キーマップ連動の、専用練習環境。
Cornix Dojo は、48キーの無線分割キーボード「Cornix LP」のためのタイピング練習サイトです。一般のタイピングサイトと違うのは、ユーザー自身のキーマップがそのまま教材になること。WebHID（Vialプロトコル）で実機から現在のキーマップを読み取り、記号や数字のような「レイヤーの先にあるキー」も、どのキーを押しながらどれを押すかを3色のハイライトと順序バッジで案内します。
日本語ローマ字（ヘボン式・訓令式の揺れに対応）・英文・記号コードの出題、ミス分布ヒートマップ、苦手キーの集中練習、プレイごとの成長記録まで、「新しい配列に慣れる」ための機能を1枚のHTMLに収めました。
自分の配列は、誰も教えてくれない。
Cornix LP のような40%キーボードは、数字も記号もレイヤーの中にあります。しかもキーマップは一人ひとりが自由に変えるもの。既存のタイピングサイトはQWERTYの物理配列が前提なので、「自分の配列のどこに何があるか」は誰も教えてくれず、上達の一番苦しい初期にツールがありませんでした。
先行して同じ課題を解いたCornix向け練習サイトに触発されつつ、自分ならどう作るかを考え、出題データ・スコア設計・機能・デザインのすべてを独自に再構築しました。単なる再現ではなく「自分のツール」と言えるものにすることが、この制作の隠れたテーマです。
考えたこと、決めたこと。
実機を、デザイン言語に翻訳する。
Cornix LPの削り出しアルマイト筐体と白いキーキャップの関係を、そのままUIに持ち込みました。本体カラー4色は筐体トレイの色として切り替わり、ボタン類はすべてキーキャップと同じ造形。画面の中に「自分のキーボード」が居る感覚を作っています。
ガイドは、色だけに頼らない。
キーキャップを1キーずつ好きな色に塗れる機能があるため、ガイドが塗り色と衝突します。ハイライトには白い内枠＋濃色の外枠の二重リングと順序バッジを重ね、どんな配色の上でも「次に押すキー」が迷わず読めるようにしました。
難しさを、得点にする。
スコアは打鍵ごとに、その文字が自分のキーマップで必要とするホールド（レイヤー・Shift）の数で加点が変わる独自設計。レイヤーの奥のキーに挑むほど報われるルールが、40%キーボードの練習そのものと噛み合います。
かたちにしたもの。
キーマップ読み取り
WebHID（Vialプロトコル）で実機から直接読み取り。.vilファイルのドラッグ&ドロップにも対応し、ブラウザに保存・自動復元します。
レイヤーまで案内するガイド
押すキー・Shift・レイヤーキーを3色＋順序バッジで表示。表示レイヤーは出題に合わせて自動で切り替わります。
5つの練習モード
日本語ローマ字・英単語/英文・記号コード・苦手キー・ミックス。約1,300項目の独自出題データを収録しました。
ミス分布ヒートマップ
蓄積したミスをキーボード上に濃淡で可視化。ミスの多いキーだけを集中練習するモードへつながります。
成長記録
プレイごとのWPMを保存し、直近30回の推移をグラフ化。前回・自己ベスト・傾向の矢印をアイドル画面にも表示します。
外観カスタム
筐体カラー4色（実機のアルマイト色を再現）、キーキャップの1キー単位の塗り分け、ライト/ダークテーマ。
つくり方。
依存ライブラリなしの単一HTMLで、フレームワークも使っていません。核になっているのは、QMK/Vialのキーコードを解釈して「この文字を打つには、どのレイヤーのどのキーと、どのホールドが要るか」を逆引きする仕組み。ここが解ければ、ガイドも難度スコアもヒートマップも、同じ逆引きの上に載っていきます。実装はClaude（AI）と並走し、UXの判断とレビューを自分が担う形で進めました。
「自分の配列に慣れる」に絞る
汎用タイピングサイトではなく、Cornix LPユーザーの移行初期に効くツールへ。差別化の軸を出題データ・スコア・分析機能に定めました。
cotozuのトークンで、実機の質感を組む
モノクロ＋teal のcotozuデザイントークンを土台に、アルマイト筐体・キーキャップの造形をCSSで再現。ハードウェアの精密さを画面の言語に翻訳しました。
WebHID読み取りと、ローマ字判定エンジン
Vialプロトコルでのキーマップ取得、促音・拗音・「ん」の揺れに対応したローマ字判定、WebAudioの効果音まで、素のJSで組んでいます（コードはAIに書かせています）。
GitHub Pagesへ、単一ファイルのままデプロイ
ビルド工程なし。記録はすべてlocalStorageに保存され、サーバーを持たない構成です。公開時には個人のキーマップを汎用サンプルに差し替えました。
自分のツールを、自分で作るということ。
この制作で一番大切にしたのは、機能を足すことではなく「練習の体験がひと続きになっているか」でした。ミスの記録がヒートマップになり、ヒートマップが苦手キーの出題になり、結果画面の成長グラフが次のプレイの動機になる。ツールが練習のループを自然に回してくれる状態を目指しました。
もうひとつの学びは、既存のものがある領域で作る姿勢です。先行サイトへの敬意を持ちながら、データもルールもデザインも自分の答えで置き換えていく。「参考にする」と「自分のものにする」の間にある距離を、UXの意思決定を積み重ねて越えた制作でした。