
推しVtuberをモチーフにしたキーボードを作った話
この記事は キーボードAdvent Calender 2022 の記事です。
昨日は大岡俊彦さんの「打鍵姿勢について考えてみた【キーボードAdvent Calender 2022】」でした。
エルゴノミクスを姿勢から定義して行くというのは非常に参考になりました。
図解等もあったので、Unity等で物理シュミレーション等をしてデータを取ってみる、というのを見てみたいところです。(言うだけタダw)
推しはいるか?
"推し"という言葉をご存知でしょうか?
(僕の推しは獅子王クリスというVtuberです。僕が推しているので推すな。)
簡単な説明としては、「アイドル・俳優・YouTuberなどの、人に露出して活動する人間」のことをいいます。
近年ではこの"推し"をテーマにした『推し、燃ゆ』が芥川龍之介賞を受賞するなど、"推し"という言葉はかなり一般化しているように思えます。
では、"推し"という言葉はこれまでの応援される人間と何が違うのでしょうか?
ここからは僕自身による個人の感想も含まれますが、"推し"という言葉には「対象を真剣に応援する」という行為(推し活)そのものが含まれているように思えます。
この「対象を真剣に応援する」という行為は誰でもできる単純なことのように感じられますが、実際は複雑な行為です。
例えば、「ライブに行く・握手会に行く・グッズを購入する」というイメージしやすいファン活動などは、今まででもできていました。
しかし、現在は「各種SNSで拡散する(SNSが得意)・動画を作成する(動画作りが得意)・イラストを書く(イラストが得意)・グッズを作成する(ものづくりが得意)」などの"推し"に対してより積極的に自分の能力を活かした応援をするということが可能になっています。
複数の趣味や能力同士を結びつけ、合体させる。
そこには応援する気持ちとともに、ある種の自己表現が含まれているのかもしれません。
もちろん、そのような自己満足的行為に"推し"に関係ないだろ! という声もあるでしょう。
しかし、僕は「その人ができる方法で応援する」という考えは間違っていないと感じます。
僕の場合、それは「自作キーボード」ということになります。
どう落とし込むか?
自作キーボードは非常に幅広い受け口を持つ趣味です。
基板を設計するのはもちろん、キーキャップやスイッチ、様々な部分に拘ることができます。
今回僕は『見た目を見て推しを確実に想起させる、推しのグッズ然とした見た目』を第一にしたいと考えました。
そうなると、UVプリントを使ったアクリルを使用するのが良さそうです。
他には、推しの象徴となるロゴのような物も入れてみようかと思います。
推しのマスコットキャラのようなものがいたはずなので、それも参考にしましょう。
設計を行う
方針が決まったところで、設計をしてみます。
Affinity Designerでデザインを作る
Affinity Designerは、Adobe Ilustratorのようなベクター描画ソフトです。
サブスクじゃなくて買い切りなのでオススメです。
最近V2が出ました。
まずケース形状を決めます。
推しキャラの角と、メンダコを合体させた形状にしてみます。

スイッチプレートの形状もこんな感じでいいでしょう。

次に推しの特徴を入れてみます。
髪色を元に、UVプリントの雛形を作成します。
アクリルとアルミ削り出しケースのガスケットマウントとする想定です。

どうせなので、ウェイトも作ります。
推しのしっぽの先端をベクターでトレースします。
この後の作業で使います。

Fusion360で立体化する
Fusion360を使って、ケース等の設計を開始します。
先程作成したベクターデータ(SVG)を元に、モデリングを行います。
すべてをすっとばしますが、このような形状となりました。

ウェイトには先程作成したしっぽのベクターデータを使用します。(R1を付けるのが本当に大変だった…。)

KiCADで基板を作成する
基板をKiCADで作成します。
どうせなので、MCUをATmega32U4以外で使ってみようと思いました。(当時アホほど値上がりしていたので…)
選ばれたのはSTM32でした。
CasasagiというSMKiJにて開発されたキーボードがあり、ARM系で写経参考にしやすかったのが理由です。


高級キーボードにありがちなai03さんのドーターボードも使用しています。
これを使用することで、コネクタの故障があってもドーターボードの更新によって再度使用できるようになりますし、静電気対策などもされています。
発注を行う
データが揃ったので発注を行います。
ケースデータの発注
せっかくなのでアルミ削り出しにしてみます。
ウェイトは真鍮をサンドブラストで。(業者にはPVD処理を勧められました)
Alibabaにてキーボードのケース切削の経験がある業者を探します。
加工の見積もりを取り、作業を依頼しました。
後日、加工のサンプルとして送られてきたのがこちらです。
完璧~!

トッププレートの発注
遊舎工房のUVプリントサービスを利用します。
テンプレートを参考に、データを納品します。
で、届いたものがこれ。
はい完璧~!

PCBの発注
基板の発注はElecrowにしました。
Gerberデータ、Posファイル、BOMファイルを用意してメールで問い合わせすることで見積もりが取れました。
また、ドーターボードはぐらすごんさんという方がメルカリで販売していたので、それを購入。
発注しても良かったのですが、検品をしてくれているとのことで、楽をしました。
スイッチプレートの発注
スイッチプレートは真鍮のような見た目にしたかったので、二層アクリルのカットをサリチル酸さんに依頼しました。
ところで今思い出したのですが、この時の発注費用サリチル酸さんに払ってないので、この後払います!
ごめんなさい!
キーキャップの発注
せっかくなので、推しのカラーにあったキーキャップも探します。
GMK HammerheadのDarkカラーが推しのカラーに似ているので、買いたかったのですがStockなし。
仕方ないので、Aliexpressでコピー品を購入。
あまりコピー品は使いたくないのですが、こればっかりは仕方ない。
ファームウェアを書く
QMK Firmwareでソースをビルドします。
今回はロータリーエンコーダーやジョイスティック、OLED等がないので簡単なハz・・・
v0.19なんもわからん!!!
QMK Firmwareは四半期に1回、Breaking Changeと呼ばれる大幅変更をしているのですが、僕の知識が通用するのはv0.17まででした。
Breaking Change……人の心まで破壊する……。
(皆さん、Remapにお世話になっている人も多いと思うので、Yoichiroさんを支援してあげてください。)
RemapとQMK Firmwareのキーコード合わない問題について、Remapに根本的な仕組みの変更が必要な状況です。ご意見いただけますでしょうか? #自作キーボード #remap
— Yoichiro Tanaka (@yoichiro) December 11, 2022
何が起きているかは以下をどうぞ。https://t.co/fsseUyZlHL
仕方ないのでv0.19にて新しくキーボードを作ります。
qmk new-keyboard
を実行することで、ソースを比較的簡単に作ることができます。
レイアウトやMCUも選択肢を用意してくれるので、すごく楽になった感がありますが、GUIでやらせてくれ…。

自動出力したコードをFlashしたところです。
(キーコードの調整全くしていません。)
ファームウェアの書き込み成功。 pic.twitter.com/AZqXedRGWE
— まーびい🎄🐙 (@marbySAN) December 12, 2022
自動生成されたキーボードの内部を更新します。
テンキー風のレイアウトにkeymap.cを変更し、RGB LEDも有効にしてFlashします。
全然難しくないですね。
#include QMK_KEYBOARD_H
const uint16_t PROGMEM keymaps[][MATRIX_ROWS][MATRIX_COLS] = {
[0] = LAYOUT_ortho_5x5(
KC_NUM, KC_PSLS, KC_PAST, KC_BSPC, KC_PENT,
KC_P7, KC_P8, KC_P9, KC_PPLS, KC_PGUP,
KC_P4, KC_P5, KC_P6, KC_PMNS, KC_PGDN,
KC_P1, KC_P2, KC_P3, KC_UP, MO(1),
KC_P0, KC_PDOT, KC_LEFT, KC_DOWN, KC_RGHT
),
[1] = LAYOUT_ortho_5x5(
RGB_TOG, XXXXXXX, XXXXXXX, XXXXXXX, XXXXXXX,
RGB_MOD, RGB_RMOD,XXXXXXX, XXXXXXX, XXXXXXX,
RGB_HUI, RGB_HUD, XXXXXXX, XXXXXXX, XXXXXXX,
RGB_SAI, RGB_SAD, XXXXXXX, XXXXXXX, _______,
RGB_VAI, RGB_VAD, XXXXXXX, XXXXXXX, XXXXXXX
)
};
完成!!!
組立済みがこちら!

最高かよ。
感想
完走した感想ですが、これは最高・オブ・最高です。
動くと思っていなかったので、動作した瞬間叫びながら家をウロウロしてしまいました。
自分で作っただけあって、自分の需要をすべて満たしてくれています。
実験的に採用したSTM32F072や、ドーターボードもしっかり動作していますし、我ながらミスがほぼありません。
(ガスケット用のくぼみはもう3mmほど深くすべきだった。)
これを作ったことで、自分のキーボードに対する自信にも繋がりました。
僕はプログラマーでもなく、2年ほど前にすべて独学で始めたので、ここまでできるようになるとは思ってもいませんでした。
それもこれも、自作キーボード界隈の人たちが様々な情報を公開してくれていたからです。
いつも相談に乗ってくれている人たちに感謝を述べて、終わりとさせていただきます。
次の推しキーを作るのはそこのあなたです!
おまけ:かかった費用
・削り出しケース(ウェイト込):約6万円
・トッププレート:約5000円
・PCB:約2万円
・スイッチプレート:未払い
・スイッチ:覚えていないので無料
・キーキャップ:5000円
・Case foam、スイッチfoam:約2000円
合計金額は無料でした!