HHKB Keytop Palette を作りました
HHKBのキートップ配色を、ブラウザ上で気軽に試せるシミュレーターを作りました。
アプリはこちらから使えます。
HHKBは本体色やキートップの組み合わせで、かなり印象が変わります。
ただ、実際にキートップを買う前に、
- Escだけ差し色にしたらどう見えるか
- 雪モデルに桜キーを合わせると派手すぎないか
- 英語配列と日本語配列で配色のバランスは変わるか
- どの色を何個くらい買えばよさそうか
といったことを確認するのは、意外と難しいです。
そこで、画面上でキーをクリック / タップしながら、HHKBの配色を試せるツールを作りました。
作った理由
HHKBのカラーキートップは見ているだけでも楽しいのですが、いざ買おうとすると少し迷います。
「Escだけ桜にする」
「文字キーをまとめて山葵にする」
「修飾キーだけ色を変える」
頭の中では良さそうに思えても、キーボード全体に置いたときの印象はなかなか想像しづらいです。
特にHHKBはキー数が少ないぶん、1つの差し色でも見た目への影響が大きくなります。
また、英語配列と日本語配列ではキーの並びやサイズが違うため、同じ配色でも見え方が変わります。
そこで、
買う前に、まず画面上で試せる場所がほしい
と思って作ったのが HHKB Keytop Palette です。
このアプリでできること
HHKB Keytop Palette では、次のようなことができます。
- HHKBのモデルと本体色を選んで、実機に近い雰囲気で確認
- 英語配列 / 日本語配列を切り替えて比較
- パレットカラーやカスタムカラーを選んで、キー単位で着色
- プリセットからワンタップで配色を適用
- 作ったデザインをブラウザに保存
- URLで配色を共有
- PC / スマートフォンのどちらでも操作
インストールは不要です。
ブラウザで開けば、そのまま使えます。
モデルと本体色を選べる
対応しているモデルは、次のシリーズです。
- HYBRID Type-S
- HYBRID
- Classic Type-S
- Classic
- Studio
本体色は、シリーズごとに選べる色を切り替えられるようにしています。
たとえば、墨、白、雪のような本体色を選ぶと、ケース色や標準キートップ色もそれに合わせて変わります。
単にキーの色だけを変えるのではなく、
本体色との相性を見ながら配色を考えられる
ようにしたかったためです。
英語配列と日本語配列を切り替えられる
HHKBは英語配列と日本語配列で、見た目のバランスがかなり違います。
日本語配列には矢印キーや変換キーがあり、Enterキーの形も違います。
そのため、英語配列で良さそうに見えた配色が、日本語配列では少し印象が変わることがあります。
HHKB Keytop Palette では、英語配列 / 日本語配列を切り替えながら、それぞれ別のデザインとして確認できます。
普段使っている配列に合わせて試せるのはもちろん、
「英語配列にしたらどう見えるだろう」
という比較にも使えます。
キーをクリックして色を置いていく
使い方はシンプルです。
- モデルを選ぶ
- 配列を選ぶ
- 本体色を選ぶ
- キートップカラーを選ぶ
- 色を変えたいキーをクリック / タップする
パレットには、墨、白、雪、桜、山葵、蒲公英、藤、空などを用意しています。
さらに、カスタムカラーも選べるので、実際のキートップにはない色を使って雰囲気を見ることもできます。
「この色が商品としてほしい」
という妄想にも使えます。
プリセットで配色のたたき台を作れる
ゼロから1キーずつ色を置くのは楽しい一方で、最初の一歩に迷うこともあります。
そこで、いくつかのプリセットを用意しました。
- 桜
- 花見三色団子
- 藤グラデーション
- Happy Hacking
- 目印キー
- Esc / Control
プリセットを押すと、配色が一括で反映されます。
そのまま使ってもよいですし、そこから気になるキーだけ色を変えて、自分好みに調整できます。
配色の「たたき台」として使えるようにしたかった部分です。
URLで共有できる
作った配色はURLに含めて共有できます。
共有ボタンを押すと、現在のデザインを含んだURLをコピーできます。
たとえば、
- キートップ購入前に誰かに相談する
- Xに配色案を投稿する
- PCで作ったデザインをスマートフォンで確認する
- 複数の配色案をメモとして残す
といった使い方ができます。
デザイン情報は短く圧縮してURLに入れるようにしているので、サーバー側に保存する仕組みはありません。
静的なGitHub Pages上で動く、シンプルな構成です。
技術構成
技術構成はシンプルです。
- TypeScript
- Vite
- GitHub Pages
キーボードの描画は、DOMとCSSで実装しています。
キーの幅、配列、モデルごとの外観、本体色、プリセットなどをTypeScript側で定義し、選択状態に応じて画面を再描画しています。
共有URLは、現在の配色をコンパクトなデータに変換してクエリパラメータへ入れています。
また、保存ボタンを押した場合はブラウザの localStorage に保存するようにしています。
サーバーやログイン機能はありません。
ブラウザだけで完結するので、気軽に使える構成になっています。
こんな人におすすめ
HHKB Keytop Palette は、次のような人に向いています。
- HHKBのカラーキートップを買う前に完成イメージを見たい人
- 墨、白、雪に合う差し色を探したい人
- 英語配列と日本語配列で見た目を比べたい人
- 配色案をURLで共有したい人
- キーボードの見た目を考える時間が好きな人
キートップ選びは、実用性だけでなく気分の問題でもあると思っています。
毎日触るものなので、少し気に入った色が入っているだけでも、机に向かう気持ちが変わります。
おわりに
HHKB Keytop Palette は、HHKBのキートップ配色をブラウザで試せる非公式シミュレーターです。
キートップを買う前の検討や、配色案の共有に使ってもらえたら嬉しいです。
アプリはこちらです。
リポジトリはこちらです。
改善要望やバグ報告、Pull Request も歓迎しています。