作ったもの
ショートカットを ツールごとにまとめて管理 できる Web アプリ「KeyMap」を作りました。
普段はシステムエンジニアをしているのですが、実装は VS Code 上の Claude Code と相談しながら、自分は "使いやすさ" の判断に集中する という作り方で進めました。
🔗 https://keymap-app.vercel.app
やれることはシンプルです。
- VS Code / Chrome / Figma のように ツール別 にショートカットを登録できる
- 登録したショートカットが、キーボード上で光って 見える（キーボードビジュアライザー）
- JIS / US 配列の切り替えに対応
なぜ作ったのか
ショートカットって、覚えた瞬間がピーク なんですよね。
新しいツールで「お、これ便利」と覚える。でも 3 日経つと半分忘れている。
しかも VS Code・Chrome・Figma… とツールが増えるほど、頭の中の対応表が散らかっていく。
チートシートを印刷したりメモアプリに書いたりもしましたが、
ツールごとにバラバラの場所に散らばるし、テキストの羅列だと「どのキーを押すか」が体に入ってこない。
結局どれも続きませんでした。
欲しかったのは「覚える」を頑張るツールではなく、「忘れない」を仕組みにする ツール。
ツールごとに整理されていて、キーの位置が視覚的にわかる。無いなら作るか、が出発点です。
KeyMap でできること
1. ツールごとにショートカットを管理
アプリ単位でカードを分けて、そこにショートカットを登録します。
「このツールのこのキー、なんだっけ」を探す場所が一箇所に決まるのがポイントです。
2. キーボードビジュアライザー
一番こだわったところです。登録したショートカットを、実際のキーボードの上で光らせて 表示します。
Ctrl + Shift + P とテキストで書かれるより、該当キーがハイライトされる方が「指がどう動くか」が残ります。
ツールを切り替えると光るキーがパッと変わるのも、地味に気持ちいいポイントです。
3. JIS / US 配列の切り替え
JIS 109 / JIS 87 / US 104 に対応。配列で物理位置が変わるので、自分の手元と同じ見た目で確認できます。
技術スタック
- Vite + React（JavaScript / JSX）
-
素の CSS + CSS カスタムプロパティ（
var(--accent)などで配色を一元管理） - キーボード配列やショートカットのデータは
src/data/に定義 - 計測に
@vercel/analytics、ホスティングは Vercel
派手なフレームワークは使わず、Vite で軽く立ち上げて React で組む、というシンプルな構成です。
キーボード配列のデータを src/data/ に持って、登録ショートカットをそのキーにマッピングして光らせています。
開発スタイル：「判断は自分、実装は Claude Code と」
今回いちばん書きたいのはここです。
普段 SE として働いているので「自分で全部書く」こともできたのですが、
今回はあえて VS Code 上の Claude Code に実装を任せ、自分は "使いやすさ" の意思決定に回る という分担にしました。
作りたい体験を言葉で渡して、出てきた差分を SE の目でレビューして、また直す。その往復です。
🔗 Claude Code: https://docs.claude.com/en/docs/claude-code/overview
具体例：「ボタンに見えない問題」を一緒に直した
アプリ一覧の項目が、見た目上ただのタイトルにしか見えず、クリックできると気づけない という問題がありました。
そこで Claude Code にこう相談しました。
アプリ一覧にカーソルが当たったときもホバーするようにしてください。
そもそも遷移ボタンというよりタイトルにしか見えないので、一目でボタンとわかるようにしてほしいです。
返ってきた直し方が良くて、
- 要素を
divから<button>に変更 →cursor: pointerやキーボード操作などのネイティブな挙動が自動で有効に - ホバー時に
var(--accent)の枠線＋背景を出して、触れるものだと一目でわかる見た目に
単に色を変えるだけでなく、<button> にすることでアクセシビリティ（キーボード操作）まで一緒に効く——
この「正しい要素を選ぶ」判断を相談しながら詰められたのが、今回の開発の手応えでした。
"こう見せたい" を自分が決めて、"どう実装するのが筋がいいか" を一緒に考える。この分担はかなり快適でした。
つまずいたところ：VS Code 上で Claude を使うこと自体
正直、一番の壁は技術というより 「VS Code 上で Claude と一緒に作る」というスタイルに慣れること でした。
これまで自分でコードを書いてきた人間からすると、最初は勝手が掴めません。
- どこまで任せて、どこを自分で判断するかの線引き
- 何をどう伝えれば意図どおりの実装が返ってくるか（指示の解像度）
- 出てきた差分をちゃんとレビューして取り込む（"Ask before edits" で確認しながら進める）
慣れてくると、自分は「どんな体験にしたいか」に集中して、書く部分は任せる というリズムができてきました。
SE として一番効いたのは「コードを書く力」より「何を作るべきか・どう使いやすくするかを言語化する力」だった、というのが個人的な発見です。
これから
- クラウド同期：複数端末で使えるように（今は端末ローカル中心）
- チームでの共有：チーム内でショートカット表を共有
- エクスポート：登録一覧をチートシートとして書き出し
このあたりは、使ってくれる人の声を見ながら優先度を決めていく予定です。
おわりに
「覚える」を頑張るのではなく、「忘れない」を仕組みにする。
そんなツールとして、Claude Code と二人三脚で KeyMap を作りました。
触ってみた感想や「こういう機能ほしい」、バグ報告も大歓迎です。
🔗 https://keymap-app.vercel.app
⌨️ ショートカットキーを、忘れない。