MonkeyTypeライクな完全日本語入力対応タイピングサイト「OCAME TYPE」

OCAME TYPEのシンプルなお題表示

どーもヤマジです。

この記事では、2025年11月から開発していた自作タイピングアプリ・サイトであるOCAME TYPEについてご紹介します。

OCAME TYPEとは?

OCAME TYPEは、英語系のタイピングサイトとして有名なMonkeyTypeにインスパイアされた日本語入力に特化したタイピング中上級者をターゲットとしたシンプルかつ実践的なタイピングサイトです。

日本にはタイピング初心者向けのタイピングサイトは多くありますが、ある程度タッチタイピングを習得した中上級者が満足でき、ひたすらタイピングに没頭できるより実践的でスタイリッシュなタイピングサイトはないと感じていました。

従来の日本のタイピングサイトの問題点としては
・初心者に配慮しすぎた過剰なローマ字、ふりがなの表記によるプレイヤーの視線や集中力を乱すUI
・日本語入力のひらがな➝漢字変換という複雑なシステムのせいでお題文と入力文の表示位置が乖離してしまう
・現実ではあり得ないミスタイプしたのにバックスペースを使用せずにそのままタイプし続けられてしまう仕様


こうした問題を解決すべく、そしてMonkeyTypeのようにミニマルなデザインで実践的なタイピングサイトを目指して開発しました。「スタイリッシュで実践的」であること以外にもOCAME TYPE独自の効果音やアニメーションにも徹底的にこだわっており「居心地の良い空間」作りにも力を入れています。

シンプルなお題表示

ある程度キーと対応する指の位置を学習した人にとっては、お題にローマ字は必要なく、また普通に義務教育を終えた人には相当変な難読漢字でない限り、ふりがなはただ邪魔なだけです。日本の多くのタイピングサイトは大体、ローマ字、ひらがな/漢字交じりの二、三行でお題が表示されているので、自分のように集中力を乱されやすいタイプの人間には地獄のシステムでした。

OCAME TYPEではタイピングに集中できることを第一に、こうした無駄な要素は一切排除して、シンプルにお題を一行で表示するスタイルにしています。

OCAME TYPEのシンプルなお題表示
OCAME TYPEのシンプルなお題表示

タイプ中に迷子になりづらい自動スクロール機能

日本語入力ではひらがなが最初に画面に表示される仕様上、漢字交じりの短文や長文のお題だと、漢字変換をしない限り入力文がお題文よりも基本的に長くなってしまうため、自分が今お題のどの部分を入力しているのかが分からなくなることがよく起こります。

この問題を解決するため、OCAME TYPEではお題の漢字の読みを入力した瞬間に、入力文の末尾が該当するお題の漢字の真下に自動スクロールする機能を実装しました。これにより、どんなに長い文章でも迷子になることがありません。

オートスナップスクロール機能

ミスしたらバックスペースを使用して削除する仕様

OCAME TYPEでは、ミスタイプした際は、自分で能動的にバックスペースキーを使用して削除しなければならない仕様になっています。日本の多くのタイピングサイトでは、ミスタイプしてもそのまま正しい文字がその後入力されれば、正しいタイプとして認識されるようになっていますが、 こんなことは現実ではあり得ません。間違ったタイプを迅速にバックスペースで修正できる能力も実際の実務では必要です。当サイトを通じて「修正する速さ」も鍛えることができます。

またミスした時もできるだけモチベーションが下がらないようにミスタイプの演出にもこだわっています。ミスタイプ時には、ニーアオートマタの被ダメージ時のようなクールなグリッチ(色ずれ)演出が発生するようになっており、ミスしてもカッコよく見えるように工夫しました。

ミスタイプ時の演出と仕様

OCAME TYPEの主な機能

上述した以外にも様々な機能やこだわりを詰め込んだので一つ一つご紹介していこうと思います。

キーボードや気分に応じたテーマ選択

個人的に自分が頻繁に使用するものは美観的に優れていないと長く使用することはできないと考えておりまして、タイピングサイトでも同様だと思っています。最近は自作キーボードを含め、様々なカッコいいキーボードが存在しているので、OCAME TYPEではそうしたスタイリッシュなプロダクトにも合うようなデザインのテーマを10個作成しました。

テーマ(10種類)

シンプルで落ち着きのあるかわいらしいパステル系テーマ5つ、最近のキーボードに搭載されているLED発光ギミックに合いそうなパキッとしたサイバー系テーマを5つ用意しています。今後も時間を見つけて、テーマの種類を増やしていくつもりです。パステル系とサイバー系でSEが変化するようになっていますので、こちらも楽しんでいただけたらと思います。


ちなみにサイバー系の3つ目のテーマは『サイバーパンク:エッジランナーズ』をイメージしたものになっていて、あのアニメを視聴して脳が焼かれた人にはお勧めです。サイバー系、4つ目と5つ目はガンダムUCのコックピットから着想を得てデザインしています。5つ目はデストロイモード的な。

3つの出題形式

OCAME TYPEでは、短い単語やフレーズのみが出題される「単語モード」、そこそこ長いフレーズや文が出題される「短文モード」、20行の文から作られている物語が出題される「ショートショートモード」の3つのモードがあります。

OCAME TYPEの3つのタイピング練習モード

おすすめの使い方は、「単語モード」でウォーミングアップや気分転換に、ある程度温まってきたら「短文モード」で練習、日本語としては少し味気ない短文に飽きてきたら、物語形式になっている「ショートショートモード」で練習、といった流れです。

「単語モード」と「短文モード」では、設定バーから問題数を10、20、30に設定可能です。その時の気分や状況に合わせて切り替えてもらえればと思います。

OCAME TYPEの問題数設定
問題数設定ボタン

苦手な指を検知する機能

OCAME TYPEでは、一般的なタッチタイピングのキーポジションを基に、ミスタイプ時にどの指を打ち間違えたかを記録する機能が実装されています。ミスタイプをすると、セッション終了後のリザルト画面で[Weak Fingers]という項目が表示され、ここにミスタイプをした上位2位の苦手な指がアイコンで表示されます。

さらにここの指アイコンをクリックすることで、その指を酷使する特別特訓モードが開始されます。

OCAME TYPEのリザルト画面
リザルト画面

苦手な指を集中的に特訓する機能(単語モード&短文モード)

「単語モード」と「短文モード」では設定バーやリザルト画面、そして後述するスコア履歴ウィンドウで、特定の指のアイコンを選択することで、その指を酷使する特別集中特訓モードになります。以下の動画では、右手小指と左手中指を酷使する問題が出題されています。リザルト画面のデータから自分の苦手とする指を理解し、その指のランクをこの特訓を通じて上げていくことで、最終的に全ての指のタイピングスキルが向上するはずです。

特定の指を特訓する機能

お題のストーリーを任意で選択(ショートショートモード)

「ショートショートモード」では、20行からなる物語をタイプするモードになっていますが、出題される物語は通常はランダムとなっています。現在は収録されている物語が10個なので、タイプ開始前にエンターキーを押しまくれば好きなのを選ぶのもそこまで難しくないのですが、将来的に物語の数も増やす予定なので、一覧から任意で好きなものを選ぶことができる機能を実装しています。

「ショートショートモード」起動中は、設定バーの右端のハンバーガーメニューの下に「ストーリー一覧」というボタンが表示されるようになっており、ここをクリックすることで、OCAME TYPEに収録されている全てのショートショート物語が一覧で表示されます。この一覧リストから好きなものを選べば、一発でその物語がタイプできます。異なるキーボードの打ちやすさの比較とかで条件をそろえるために重宝するかもしれません。

ショートショートモードのストーリー一覧機能

スコア履歴

OCAME TYPEの画面中央下部に[SCORES HISTORY]というボタンがあり、ここをクリックすると現在選択されているモードの詳細な分析データを確認できます。


Avg. Rank – 選択中のモードで計測された直近150件のお題のKPMとACCを基に算出された平均ランクです。
Avg. KPM – 選択中のモードで計測された直近150件のお題のKPM(Keystrokes Per Minute: 一分間の打鍵数)です。
Avg. ACC – 選択中のモードで計測された直近150件のお題のACC(Accuracy: 正確性)


各指のランク (単語・短文モードのみ) – 直近150件のお題のKPMとACCを基に算出された各指の平均ランクです。


その他、お題一つ一つのKPMとACCを見ることができるグラフがあります。

スコア履歴から過去にやった特定のお題を単体で特訓することが可能

このグラフからお題を選んでクリックすることで、同じお題をひたすらタイプすることもできます。もし特定の苦手な単語や文を集中して練習したい時には非常に重宝します。

スクリーンショット機能

OCAME TYPEの設定バーとスコア履歴には今表示されている画面をスクショしてクリップボードにコピーする機能が実装されています。

設定バーのスクショ機能
設定バーのスクショ機能
OCAME TYPEのスコア履歴の詳細
スコア履歴内にもスクショ機能があります

SNSで自分の記録を投稿する時等にお使いください。

その他のこだわり

上述した機能以外にもこだわった部分があるので、こちらで紹介させていただきます。

いつでも中断できる計測システム

従来のタイピングサイトの多くは、一問目のお題をタイプし始めたら、最後のお題を完了するまで、お題が切り替わるタイミングでもずっとタイピング能力の計測が続いています。個人的にこのシステムはプレイヤーにとってフェアじゃないと思っていて、というのもこれだと純粋なタイピング能力ではなく速読の能力も大きく関わってきてしまうからです。お題をちゃんと読んで、頭で理解したものを迅速に正確にアウトプットできる能力こそ本当のタイピング能力だと思います。

だからこそOCAME TYPEでは、各お題毎で独立して計測が行われるようにしています。具体的には、各お題でなにかキーを押した瞬間に計測が行われる仕組みです。こうすることで、速読能力は問われませんし、突然の来客やアマゾンやUBERの配達が来てもいつでも対応できます。いつでも中断できることで、より気軽にスキマ時間にもタイピング練習ができるようになっているかと思います。

効果音

操作していて気持ちがいいようにOCAME TYPEではマウスカーソルをボタンに合わせた時やクリックした時、画面が遷移する時等の効果音をメチャクチャこだわっています。

システム周りの効果音には「効果音ラボ」様の効果音を使用させてもらっています。パステル系テーマ時の効果音はニンテンドーっぽい温かみのあるポップなものにしようと思って、色々組み合わせた結果、思った以上にそれっぽくなってしまいましたが、全て著作権フリーの「効果音ラボ」様のを使っていますので悪しからず。

タイピング音に関しては、Adobe Fireflyを使って、何百個もタイピング音サンプルを作成し、その中から気持ちのいいものを厳選し、タイプする度にランダムで再生されるようにしています。

ただ、メカニカルキーボードなどを使っている人は自分のキーボード本来のタイピング音を楽しみたいというケースもあることを考慮して、タイピング音とゲームシステムの効果音の音量はそれぞれ独立して設定できるようにしておきました。

フォント

切り替えられるテーマと同様の理由、美観的な理由から表示されるフォントにもこだわりました。WindowsでもMacでも、大体のOSで同じ美しく読みやすいフォントを表示したかったので、グーグルフォントから厳選して使用しています。

アニメーション演出

タイピングという地味な作業にある程度ゲーム的な楽しい要素を加えたかったので、OCAME TYPEではタイピングの邪魔にならない程度に色んな部分にさりげないアニメーション演出を入れています。

問題形式を変更した時やセッションが切り替わる際には、ステータスバーがワイプして表示されている文字を消す演出を、お題が表示される時には、フォント一つ一つが独立して表示される演出等を入れています。ちなみにワイプ演出の際には、当サイトのマスコットキャラであるオカメインコの「KIKI」がちょっとだけピョンとジャンプするようになっています。KIKIの雄姿を見てやってください。まぁ雌なんですけど。

またお題を正しくタイプし終えると、お題の文字と入力した文字が一つに重なって正解だったことが分かりやすくしています。この際、重なる速さや音でどれくらいのタイピング速度だったかが、視覚的・聴覚的に何となく掴めるようにもこだわりました。

お題と入力文が一つになる演出+速度に合わせた効果音

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)