無料で3D空間上のキーボードのデザインを手軽に確認できる「Keyboard Simulator」

近年、ガジェットにこだわる人の中にはキーボードを自作する人も増えており、自作キーボードを作るためのキットもオンラインで販売されています。そんな自作キーボードを作成する時に便利なウェブサービスが「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