スマホで入力しやすいパスワード生成ツールを作った〜「パスカエール」開発記

パスワード生成ツールって文字がランダムすぎて入力ミスしがちですよね。
そこで16文字の構造化パスワードを色分け表示する「パスカエール」を作りました。
記号→英字→数字の順で、3文字ごとに0で区切って視認性アップ。
セキュリティと使いやすさの両立って大事だと思います。

1. はじめに

パスワード管理が日常的な課題となる中、既存のランダムパスワード生成ツールには一つの問題がありました¹。それは生成されたパスワードが読みにくく、入力時にミスが起こりやすいことです。

この問題を解決するため、視認性を重視したパスワード生成ツール「パスカエール」を開発しました。また、単純なランダム生成ではなく、構造化されたパスワードを色分け表示することで、セキュリティと使いやすさの両立を目指しました。

https://app.chiilabo.jp/pass-kae-ru/

2. 基本仕様の設計

2.1. パスワード構造の決定

パスカエールでは、16文字固定の構造化パスワードを採用しました。構造は以下の通りです：

記号1文字：!@#$の4種類から選択
英字3-5文字：最初の1文字のみ大文字、残りは小文字
数字で残りを埋める：3文字ごとに区切り文字として0を挿入

この構造により、パスワードは!Abc234023456789のような形になります。記号で始まり、英字部分、数字部分が明確に分かれています。

2.2. 文字種の選択理由

使用する文字種は視認性を最優先に選定しました。記号は!@#$の4種類に限定し、英字からは見間違いやすいl（エル）を除外しています。数字も0と1を基本的に除外し、0は区切り文字としてのみ使用します。

この制限により、パスワードの複雑度は若干下がりますが、入力ミスの大幅な削減という実用的なメリットを得られます²。

3. 視認性向上のための工夫

3.1. 色分け表示システム

パスワードの各部分を色分けして表示する機能を実装しました：

記号部分：赤色（#e53e3e）
英字部分：青色（#3182ce）
数字部分：ダークグレー（#2d3748）
区切りの0：緑色（#38a169）

この色分けにより、ユーザーはパスワードの構造を一目で理解できます。特に長い数字列の中に現れる緑色の0は、視覚的な区切りとして機能します。

3.2. フォントとレイアウト

パスワード表示には等幅フォントを使用し、文字間の視認性を確保しました。フォントサイズは1.5emに設定し、スマートフォンでも読みやすいサイズを維持しています。

4. パスワード生成アルゴリズム

4.1. 基本生成ロジック

パスワード生成は以下の手順で行います：

function generatePassword() {
    let password = "";
    
    // 1. 記号1文字を追加
    const symbol = getRandomChar(symbols);
    password += symbol;
    
    // 2. 英字3-5文字を追加（最初のみ大文字）
    const letterCount = 3 + Math.floor(Math.random() * 3);
    const firstLetter = getRandomChar(letters).toUpperCase();
    password += firstLetter;
    
    for (let i = 1; i < letterCount; i++) {
        password += getRandomChar(letters);
    }
    
    // 3. 残りを数字で埋める
    const remainingCount = 16 - password.length;
    let numberCount = 0;
    
    for (let i = 0; i < remainingCount; i++) {
        // 3文字ごとに0を挿入
        if (numberCount > 0 && numberCount % 3 === 0) {
            password += "0";
            i++;
            if (i >= remainingCount) break;
        }
        if (i < remainingCount) {
            password += getRandomChar(numbers);
            numberCount++;
        }
    }
    
    return password;
}
Code language: JavaScript (javascript)

4.2. 区切り文字の挿入ロジック

数字部分での視認性向上のため、3文字ごとに0を挿入する仕組みを実装しました。この機能により、長い数字列が234023456789のように区切られ、読みやすくなります。

実装では数字文字数をカウントし、3の倍数になったタイミングで0を挿入します。ただし、全体の文字数が16文字を超えないよう制御しています。

5. ユーザーインターフェース設計

5.1. ミニマルデザインの採用

インターフェースはミニマルデザインを採用し、機能に集中できる設計としました。背景は薄いグレー（#f8f9fa）、コンテナは白色で統一し、視覚的なノイズを排除しています。

5.2. 操作性の向上

パスワードのコピー機能は、各パスワードをクリックするだけで実行できるよう設計しました。コピー完了時にはトースト通知が表示され、操作結果をユーザーに明確に伝えます。

8個のパスワード候補を一度に表示することで、ユーザーが気に入ったものを選択できる余地を提供しています。

6. PWA対応の実装

6.1. Service Workerによるオフライン対応

PWA（Progressive Web App）として動作させるため³、Service Workerを実装しました⁴：

const CACHE_NAME = 'passcare-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/manifest.json',
  '/images/icon.png'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(urlsToCache);
      })
  );
});
Code language: PHP (php)

これにより、一度アクセスしたユーザーはオフライン環境でもパスワード生成が可能になります⁵。

6.2. マニフェストファイルの設定

PWAとして認識されるよう、manifest.jsonを設定しました：

{
  "name": "パスカエール - パスワード生成ツール",
  "short_name": "パスカエール",
  "display": "standalone",
  "background_color": "#f8f9fa",
  "theme_color": "#4A473B"
}
Code language: JSON / JSON with Comments (json)

スタンドアローンモードでの起動により、ブラウザのUIを隠してネイティブアプリのような体験を提供します。

7. 技術的な実装詳細

7.1. ファイル構成

プロジェクトは以下のファイル構成で整理しました：

index.html：メインのHTMLファイル
styles.css：スタイルシート
script.js：JavaScript機能
manifest.json：PWAマニフェスト
sw.js：Service Worker
images/icon.png：アプリアイコン

この分離により、メンテナンス性と可読性を向上させています。

7.2. レスポンシブ対応

CSS Media Queriesを使用し、画面サイズに応じた最適化を行いました⁶。600px以下の画面では、アイコンサイズやフォントサイズを調整し、モバイル環境での使いやすさを確保しています。

7.3. クリップボードAPI対応

モダンブラウザのClipboard APIを使用し、フォールバックとして従来のexecCommandも実装しました⁷。

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        showToast();
    }).catch(() => {
        // フォールバック方法
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        showToast();
    });
}
Code language: JavaScript (javascript)

8. まとめ

パスカエールの開発を通じて、セキュリティツールにおける使いやすさの重要性を再認識しました。構造化されたパスワード生成、色分け表示、PWA対応という3つの要素により、従来のランダムパスワード生成ツールとは異なるアプローチを実現できました。

技術的には、vanilla JavaScriptによるシンプルな実装、Service Workerによるオフライン対応、レスポンシブデザインによるマルチデバイス対応が主要な特徴となっています。視認性とセキュリティのバランスを取った実用的なツールとして、パスワード管理の課題解決に貢献できるものと考えています。

従来のパスワード生成ツールは強度を重視するあまり、ユーザビリティを犠牲にしがちでした。近年はNISTなどの機関が、複雑さよりも長さと使いやすさを重視する方針に転換しています。 – パスワードの要件をガイドラインと実態調査から考える – NEC
パスワードの強度は文字数や複雑さだけでなく、実際の運用時の使いやすさとのバランスが重要とされています。覚えやすく入力ミスの少ないパスワードは、結果的にセキュリティの向上に寄与します。 – パスワードの強度を確かめる方法｜危険なパスワードと安全性を高める方法
PWAは特定の技術ではなく、レスポンシブデザイン、HTTPS化、Service Worker、Web App Manifestなど複数の技術を組み合わせて実現される概念です。これによりWebサイトがネイティブアプリのような体験を提供できます。 – PWA〈Progressive Web Apps〉とは？PWAの機能と導入するメリットを解説
Service Workerはブラウザとサーバーの間でプロキシとして動作し、ネットワークリクエストをインターセプトしてキャッシュ戦略を実装できます。install、activate、fetchの各イベントでライフサイクルを管理します。 – サービスワーカー API – MDN
PWAのオフライン機能は、Service WorkerのCache APIを使用してリソースをキャッシュすることで実現されます。事前にキャッシュされたリソースを使用することで、ネットワーク接続がない状態でもアプリが動作します。 – サービスワーカーで PWA をオフライン動作させる – MDN
Media Queryは画面幅、高さ、解像度、デバイスの向きなど様々な条件を指定してCSSを切り替える仕組みです。@mediaルールを使用して、特定の条件下でのみ適用されるスタイルを記述できます。 – メディアクエリーの基本 – MDN
Clipboard APIはセキュリティ上の理由から、HTTPS環境とユーザーの操作（クリックなど）が必要です。古いブラウザでは対応していないため、document.execCommand()をフォールバックとして使用するのが一般的です。 – クリップボード API – MDN