キリン舎と申します。
普段は自作キーボード界隈でメカニカルキーボード用のkawaiiキーキャップを自作したり、デスクマットをデザインしたりしています。
今回の記事は、Keyboard layout editor（以下、KLE）で自分の理想のキーキャップセットを形にする方法についてまとめています。
なお、掲載しているAmazon・楽天の商品ページにはアフィリエイトをつけています。ご購入の際はなるべくこちらのページを経由していただけると、大変ありがたいです。
2023.09.29 追記
-後半で紹介した堕落猫さん作成のchrome拡張ツール KLE Extension でGoogle fontが使用可能になりました！
-記事読んでくださって、すぐに機能追加してくれたみたいです。ありがたや～
こんなもんじゃろかー
— 堕落猫 (@daraku__neko) 2023年9月26日
KLE拡張
Google Fontでフォントをカスタマイズ出来るようにしてみた。#自作キーボード pic.twitter.com/s3C4pL4KpJ
KLE Extensionでサクッと遊べる。 pic.twitter.com/jl4GzbDSRD
— 堕落猫 (@daraku__neko) 2023年9月26日
---
背景
-縁あってサリチル酸さんの販売している日本語配列対応キーキャップ「Acid Caps」のデザインに参加させていただきました。今回はそれを通じて得た知見のまとめです。
salicylic-acid3.hatenablog.com
-今回はKLEを使用したデザイン検討までを扱いますが、DIY Keycapというお店があり、サイト上でオリジナル配色のキーキャップセットを編集し、注文することもできます。
-配色だけでなくノベルティやフォント*1にこだわりたい場合には、公開されているテンプレート（SVGファイル）を使用した注文も可能です。
-最近、テンプレートにISOエンターが追加されました。日本語キーボードの大きなエンターキーに慣れている方でも、理想を追求できます。
-ただ、都度SVGファイルを編集するのは骨が折れます。特に「どんな配色がいいだろう？」「この色とあった雰囲気のフォントは……」と手探りで多数の案を出す検討段階では、つらいです。
-そこで、KLEを使用します。そのままでも十分なのですが、各種設定をすることでより使いやすくなります。
KLEとは
-その名の通り、キーボードのレイアウトを検討するためのツールです。
-git hubアカウントでサインインしておくと、ローカル環境（自分のPC）へjsonファイルをダウンロードしなくても、オンラインで保存できます。
-配色のほか、レジェンドの種類や位置を簡単に変更できます。
【参考：基本的な操作】Keyboard Layout Editor：キーボード画像をブラウザ上で作成できるツール - ハガネヤドットネット
-ただ、フォントを変更するにはページ下部の「Custom Styles」へ記述が必要です。
フォントの変更方法
-例示するので、色付けした個所を適宜変更してください。
①Google fontを指定するとき
-フォントと種類を確認し「+」をクリック
-Selected familyを開き「@import」にチェック
-@import url のURL部分をコピーして、以下の例示を書き換え
-@import url のURL部分をコピーして、ブラウザで開く
-/* laten */ の@font-face～src: url(…) format('…')をコピーして、以下の例示を書き換え
*日本語フォントなど、/* laten */ を選べないものは、自分のPCにダウンロードして②の手順を行ってください
---
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/quicksand/v30/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2) format('woff2');
}
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
* { font-family: 'Quicksand';
}
---
②自分のPCにダウンロードしたフォントを指定する場合
例）Zen Maru Gothic - Google Fonts（Bold）
---
@font-face {
font-family: 'ZenMaruGothic-Bold';
font-style: normal;
font-weight: 400;
src: local('ZenMaruGothic-Bold');
}
* { font-family: 'ZenMaruGothic-Bold';
}
---
【参考】KLE公式wiki
便利ツール
◆KLE Extention（chrome拡張）
-堕落猫さん作成のツール
-Enterキーで次のキーへ移動することができるのが非常に便利です（通常だと同じキーの別項目に移るだけ）
-Shift+Enterで前のキーにも戻れます
-回転も簡単にできるので特殊なレイアウトも再現しやすく、キーボードに合わせた検討ができます
KLE
— 堕落猫 (@daraku__neko) 2023年1月18日
chrome拡張を使って入力項目でenterを押したら、次の要素に移動して連続してキー入力出来るようにしてみた。#自作キーボード pic.twitter.com/c0ZcqPILxy
昨日、動画がアップできなかったやつ。
— 堕落猫 (@daraku__neko) 2023年1月20日
KLEのRotationにフォーカスしたら右隅を軸に回転できるようにしてみた。
上下左右中央を選べるようにする予定。
ISOは面倒くさそうなので対応しないかも。 pic.twitter.com/F8UAFpTBWm
◆Enumchar
-フォントの中に含まれている文字を一覧にしてくれます
-詳細はこちらの方の記事をご覧ください。
EnumChar｜フォントの収録文字を調べることができるフリーソフト | タダデザ
-Google font＞特定のフォント＞Glyphsでたいていは表示されるのですが、稀にArrow key（↑←↓→）などが省略されていることがあります。
-「気に入ったフォントがあるけどGoogle fontで見ると記号が足りない」というときには一度確認してみるといいかもしれません。
注意
-印刷を依頼する場合、相手側も同じフォントをインストールしている必要があります。検討するにしても、個人で扱っているフリーフォントはなるべく避けた方がいいかと思います。
-もし販売を考えている場合、ライセンスには特にご注意ください。キーキャップはフォントがメインの商品なので、通常の商用利用に該当しない可能性があります。
-SIL Open Font License (OFL)のフォントであれば問題ないという認識でいますが、ライセンスには詳しくはありませんので、明言は避けます。必ず都度ご確認ください。
おわりに
誤解しているところや間違いがあれば、お手数ですがご一報ください。
キリン舎@自作キーキャップ (@kirinsha_keycap) / X
本記事を読んで「ためになった」「応援してるよ！」という方や大富豪石油王様からの投げ銭やBOOSTもお待ちしております。ご購入いただいたお金はキーキャップ・デスクマット等の試作費やキーボード代に回ります。けいざいまわすぞ～！
ではまた次の記事で！
---
*1:レジェンドの種類や位置もおそらく対応してくれると思われます（未確認）。一般的には大文字でキーの左上や真ん中、Chromebookなどでは小文字で左上が多いです。
