KeySpec Generator - プロダクト紹介
KeySpec Generatorとは
KeySpec Generatorは、自作キーボード愛好家やキーボード設計者向けのスペックバッジ生成ツールです。
自作キーボードの仕様を説明する際、「42キー、Split、Column-staggered、Choc v2、無線、ZMK対応」といった情報をテキストで毎回記述するのは手間がかかります。また、読み手によって解釈が異なったり、表記が統一されていないために伝わりにくいこともあります。
KeySpec Generatorは、これらのスペック情報を視覚的に統一されたバッジとして生成することで、作成の手間を省きつつ、一目で伝わるスペック共有を実現します。
デモサイト:
主な特徴
-
コミュニティ特化の属性アイコン: Split・Choc v1/v2・QMK/ZMKなど、自作キーボード界隈で使われる専門的な属性を網羅。各アイコンには説明文が付いており、初心者にも分かりやすい設計です。
-
URLベースの設定共有: 作成したバッジの全設定がURLパラメータに埋め込まれます。リンクを送るだけで相手も同じバッジを閲覧・編集でき、ファイルのやり取りは不要です。
-
完全ブラウザ完結: インストールやアカウント登録は一切不要。ブラウザでサイトを開けば、すぐにバッジ作成を始められます。設定はブラウザに自動保存されるため、次回訪問時も前回の状態から再開できます。
こんな方におすすめ
-
自作キーボードのビルドログを作成する方: 完成したキーボードの仕様を、SNSやブログで視覚的に分かりやすく紹介したい場合に最適です。テキストで長々と説明するよりも、バッジ1枚で主要スペックを伝えられます。
-
キーボードを設計・販売する方: 販売ページやGitHubリポジトリに統一感のあるスペック表示を追加できます。複数のキーボードを扱う場合でも、同じフォーマットで一貫した見せ方が可能です。
-
コミュニティで情報交換する方: DiscordやX（Twitter）でキーボード構成を共有する際、URLを送るだけで設定を再現できます。「どんなキーボード？」という質問に、バッジ1枚で即座に回答できます。
主要機能
リアルタイムプレビュー
画面左側の設定パネルで選択・入力した内容が、画面右側のプレビューに即座に反映されます。設定を変更するたびにバッジの見た目を確認できるため、試行錯誤しながら理想のデザインを追求できます。保存ボタンを押す前に完成形を確認できるので、「思っていたのと違った」という失敗がありません。
8カテゴリ・20種類以上の属性アイコン
自作キーボードの主要な特徴をカバーする8つのカテゴリを用意しています。
| カテゴリ | 選択肢 | 説明 |
|---|---|---|
| 形状 | Split / Unibody / MacroPad | キーボードの物理的な形態 |
| 配列 | Row-staggered / Column-staggered / Ortholinear / Alice / GRIN | キーの並び方・配置パターン |
| 接続 | Wired / Wireless / HalfWired | PCとの接続方式 |
| 互換性 | Cherry MX / Kailh Choc v1 / Choc v2 | 対応するスイッチ・キーキャップ規格 |
| ポインティング | Trackball / TrackPoint / Trackpad | 搭載ポインティングデバイス |
| ファームウェア | QMK / ZMK | 対応ファームウェア |
| 拡張機能 | Encoder / Display | ロータリーエンコーダーやディスプレイの有無 |
各カテゴリから1つずつ選択する形式で、選んだアイコンがバッジ上に並びます。また、定義済みアイコンに該当しない独自仕様がある場合は、カスタム画像をアップロードして置き換えることも可能です。
URL共有と高解像度PNG出力
URL共有: 「URLで共有」ボタンをクリックすると、現在の設定（キー数、ピッチ、選択アイコン、フッターテキスト）がすべてURLパラメータとして埋め込まれたリンクがクリップボードにコピーされます。このリンクを開けば、誰でも同じバッジを閲覧・編集できます。
PNG出力: 「保存」ボタンをクリックすると、バッジを高解像度のPNG画像としてダウンロードできます。ブログへの埋め込み、SNSへの投稿、印刷用途など、あらゆる場面で活用できます。
日本語・英語の完全対応
UIおよびアイコン説明文は日本語・英語の両方に対応しています。ブラウザの言語設定を自動検出して初期言語を決定し、手動での切り替えも可能です。設定はブラウザに保存されるため、次回以降も同じ言語で表示されます。
ダーク/ライトテーマ
目に優しいダークモードと、明るい環境で見やすいライトモードを切り替えられます。こちらもブラウザに設定が保存され、好みのテーマで継続して利用できます。
導入効果
-
スペック説明の手間を削減: 「42キー・Split・Column-staggered・Choc v2・無線・ZMK・トラックボール付き」といった長い説明文を毎回書く必要がなくなります。バッジ1枚で、主要なスペックを視覚的に伝達できます。
-
情報の正確性と一貫性を確保: 定義済みのアイコンと略称を使用するため、「Column staggered」「コラムスタガード」「カラスタ」といった表記ゆれが発生しません。コミュニティ全体でスペック表記の標準化に貢献します。
-
国内外のコミュニティに対応: 日本語・英語の両方に対応しているため、国内の自作キーボードコミュニティはもちろん、海外のDiscordサーバーやRedditでの情報共有にもそのまま活用できます。
技術仕様
- フレームワーク不要: HTML・CSS・JavaScriptのみで構成。外部ライブラリへの依存がないため、軽量かつ高速に動作します。
- 完全クライアントサイド: サーバーサイド処理は一切なく、すべてブラウザ内で完結。プライバシーを重視する方にも安心してご利用いただけます。
- GitHub Pagesでホスティング: 静的サイトとしてGitHub Pages上で公開。安定した可用性を提供します。
はじめ方
- デモサイトにアクセス
- 左側のフォームでキー数・ピッチ・属性アイコンを設定
- 右側のプレビューでバッジを確認
- 「保存」でPNG画像をダウンロード、または「URLで共有」でリンクを取得
アカウント登録やインストールは不要です。ブラウザを開けば、すぐにバッジ作成を始められます。
リンク
- デモサイト:
- GitHubリポジトリ:
- バグ報告・機能リクエスト: GitHub Issues
