「パスワードは長くて複雑に」「サービスごとに別々のパスワードを」
というのはよく言われますが、正直つらいですよね。
・4 桁の数字（誕生日や暗証番号など）なら覚えられる
・でも 4 桁の数字そのものをパスワードに使うのは危険
そこで本記事では、
4 桁などの数字
をハッシュ化し、
「自分だけが知っている決め打ちの 7 文字(小文字大文字数字アンダーバー含む)」＋「25 文字のハッシュ」を生成する
自分専用の小さな Web サイトを作る方法を紹介します。
「4 桁の数字」自体はそのまま使わず、「種（シード）」として使うイメージです。
完成イメージ
ブラウザで以下のようなフォームを持つシンプルなページを自作します。
・シード入力欄(4桁の数字などを入力する)
・[生成] ボタンを押すと、32 文字のランダムっぽい文字列が出力される(シードが同じならば同じ内容)(先頭は自分だけが知っている 7 文字の決め打ち（小文字・大文字・数字・アンダーバー）)
この 32 文字の文字列を、実際の Web サービスのパスワード欄にコピペして使います。
各サービスごとに「数字」を変えることで、
それぞれ異なるパスワードを生成できます。
注意事項 / 免責
・本記事は「強固なセキュリティを数学的に保証する」ことが目的ではなく、
「何も考えずに短いパスワードを使うよりは、だいぶマシ」
というレベルの個人用工夫です。
・パスワード管理には、1Password / Bitwarden 等の
専用パスワードマネージャーの利用が推奨されます。
・この記事の方法は「4 桁数字をそのまま使うよりはマシ」くらいの位置付けとして、
自己責任で利用してください。
・ブラウザ上でパスワードを生成するため、
公共の PC 等では使用しないようにしてください。
参考: ベースにする実験サイト
この記事では、すでに公開されている実験サイトを修正して使うことを前提にします。
以下のサイトをフォーク or ダウンロードして、自分用に改造するイメージです。
・実験 URL
https://uni928.github.io/PassGenerator/
・ソースコード（index.html）
https://github.com/uni928/PassGenerator/blob/main/index.html
まずはこの index.html を保存し、ローカルで開けるようにしておきましょう。
そのうえで、次の章で紹介する仕様に合わせて修正していきます。
仕様まとめ
◆ 入力
-
「自分だけが知っている 7 文字のキー(html 等のコード側に記述)」
- 使用できる文字: 小文字 a-z, 大文字 A-Z, 数字 0-9, アンダーバー _
- 例: "Ab32_xZ"
- 7 文字固定とし、短すぎたり長すぎたりしないようにする
-
「サービスごとの数字」(サイト側で毎回入力)
- 例: 4 桁の暗証番号、誕生日を組み合わせた数字など
- 4～10 桁くらいまでを目安にしてもよい
◆ 出力
・上記 2 つを結合してハッシュ化し、
32 文字の文字列として出力する。
・出力する文字列は、
「小文字 / 大文字 / 数字 / _」のみからなるようにする
（Base64URL 風の文字セット）
◆ ハッシュ化のイメージ
・"キー + ':' + 数字" という文字列を作り、
・SHA-256 を計算（Web Crypto API を利用）
・得られた 32 バイトのハッシュ値を Base64URL でエンコード
・先頭 25 文字だけをパスワードとして使う
◆ セキュリティ上のポイント
・7 文字のキーは絶対に他人に教えない
・GitHub Pages 等で公開しない(ローカルで動作させる)
・生成したパスワードをメモ帳などでなるべく残さない
UI のイメージ
画面には、次のような要素を用意します。
・テキストボックス: 任意入力(4桁の数字など)
・[パスワード生成] ボタン
・出力用テキストボックス: 32 文字の結果（コピー用）
・[コピー] ボタン（クリップボードにコピー）
ここからは、index.html を具体的にどう書き換えるか見ていきます。
HTML 全体の構造（例）
以下は、1 ファイルで完結するシンプルな実装例です。
ベースとなる PassGenerator の index.html を開き、
不要な部分を削って、下記のような構造に近づけていきます。
このサンプルでは、スタイルはかなり簡素にしています。
実際には自分の好みに合わせて CSS を調整してください。
index.html の例
・実験 URL
https://uni928.github.io/PassGenerator/
・ソースコード（index.html）
https://github.com/uni928/PassGenerator/blob/main/index.html
運用の仕方の例
例として、以下のような運用が考えられます。
・7 文字キー: "Ab32_xZ"（自分だけが知っている）
・サービス A 用の数字: "0420"
・サービス B 用の数字: "1978"
・サービス C 用の数字: "314159"
ブラウザで自作サイトを開き、
- サービスごとの数字を入力 (例: "0420")
- [パスワード生成] ボタンを押す
- 生成された 26 文字をコピーして、サービス A のパスワード欄に貼り付ける
他のサービスでは数字部分を変えるだけで、
まったく異なる 32 文字のパスワードが得られます。
・7 文字キーは固定
・数字だけサービスごとに変える
という運用なら、
「何桁かの数字」を覚えておくだけで、
そこそこ複雑なパスワードを毎回再現できるようになります。
セキュリティ上の補足
・7 文字キーはできるだけランダムに近いものにしましょう。
例: "abc123" よりも "K9_za7F" のような見た目が良いです。
・同じ数字を複数サービスで使うのは避けた方が安全です。
・公開 PC やスクリプトが改ざんされるリスクを考えると、
このツールは基本的にはローカルに保存して、
自分の PC のみで利用するのがおすすめです。
まとめ
・4 桁の数字そのものをパスワードに使うのは危険
・しかし、4 桁の数字を「種」にして、
自分だけが知っている 7 文字と組み合わせてハッシュ化すれば、
毎回同じ複雑な 32 文字を再現できる
・シンプルな HTML + JavaScript だけで、
自分専用のハッシュ生成サイトを作ることができる
・既存の PassGenerator の index.html をベースに、
入力欄と生成ロジックを差し替えるだけでも実現可能
気になる方は、まずはローカルでシンプルなページを作り、
実際に自分の PC だけで試してみてください。
（この記事の内容は、実際の運用では自己責任でご利用ください。
パスワード管理のベースには、
専用のパスワードマネージャーの併用を強くおすすめします。）