近年、ガジェットにこだわる人の中にはキーボードを自作する人も増えており、自作キーボードを作るためのキットもオンラインで販売されています。そんな自作キーボードを作成する時に便利なウェブサービスが「Keyboard Simulator」で、3D空間に配置された自作キーボードのデザインを調整しながら、理想のキーボードを考えることが可能です。

Keyboard Simulator | Design and test virtual keyboards

https://keyboardsimulator.xyz/

Keyboard Simulatorにアクセスすると、以下のように画面右側にキーボードの3Dモデルが表示されます。



左側の「Layout」をクリックすると、キーボードのレイアウトを変更することが可能。



「10％ numpad」はテンキーだけのスタイルで……



「40％ ortho」は数字キーがなくて横幅が狭いスタイル



「80％」は数字キーやファンクションキーが追加されたスタイル



「100％」は104キーボードのスタイルなど、さまざまな配列を確認することができます。



キーボードは3D空間上でズームしたり……



ぐりぐり動かしてさまざまな角度からながめたりできます。





「Legend Style」をクリックすると、キーの右下に別言語の文字などが記されたバージョン(Cherry)と、シンプルにアルファベットのみが描かれたバージョン(SA)を切り替えることが可能。



また、「Sub Legends」からはアルファベットとは別にキーに記される言語を選択できます。記事作成時点では、None(なし)・Arabic(アラビア文字)・Chinese(中国語)・Cyrillic(キリル文字)・Czech(チェコ語)・Devanagari(デーヴァナーガリー)・Greek(ギリシャ文字)・Hangul(ハングル)・Hebrew(ヘブライ文字)・Hiragana(ひらがな)・Katakana(カタカナ)が用意されていました。



「CASE OPTIONS」からはキーボードケースの形状・ケースの仕上げ・ケースや背景の色を変更することができます。



「COLORWAYS」ではあらかじめ用意されているテンプレートから、さまざまなキーボードの配色をチェックすることが可能。たとえば「1976」という配色はこんな感じ。



「Blue Samurai」



「Pastel」



「Terminal」など、多様な配色を試すことができます。



また、手元のキーボードでキーを押し込むと、3Dモデルのキーボード上でも対応するキーが押し込まれます。



左側上部の「EDITOR」をクリックすると……



キーボードの色を変更することができます。



「Apply swatches on keypress」をオンにすると……



手元のキーボードで押し込んだキーが、「Accent」で設定された色になりました。



左側上部の「TEST」をクリックすると……



キーボードのテストが可能。押したキーボードにハイライトを付けたり、タイピングの速度を測ることもできます。しかし、タイピングの速度を測る際に使うキーボードは自分の手元にあるキーボードであり、3Dモデルを元にしたキーボードではない点には注意が必要です。



なお、Keyboard SimulatorはGitHub上でJavaScriptのコードが公開されています。

GitHub - crsnbrt/keysim: design and test virtual 3d keyboards.

https://github.com/crsnbrt/keysim