BTW Tools は、Web制作・開発の「ちょっとした手間」を減らすために自分で作って公開している小さなツール集です。 htpasswd の生成、px→vw 変換、HTML チェック、OGP メタタグ生成、JSON 整形、カラーコード変換、QRコード生成など、現場で繰り返し発生する細かい作業を、その場で完結できるようにまとめました。 多くのツールはブラウザ上だけで処理が完結し、入力データを外部に送らない設計にしています。
01 · Challenge
解決すべき課題
Web 制作の現場では、コードを書く本筋とは別に「細かいけれど地味に時間を食う作業」が日常的に発生します。Basic 認証のパスワードを作る、デザインカンプの px をリキッド用の vw に直す、公開前にメタタグや OGP の抜けをチェックする——どれも一つひとつは数分でも、毎回ツールを探したり手元のスクリプトを引っ張り出したりしているうちに、集中が途切れてしまいます。
- 同じような小作業のたびに、別々のサイトやローカルのスクリプトを行き来している
- オンラインの変換ツールは広告が多く、入力データをどこに送っているか分からず不安がある
- 「ここだけ確認したい」のに、多機能すぎて目的の操作にたどり着けない
- スマホやタブレットからだと使いづらいツールが多い
02 · Approach
アプローチ
「自分が毎回やっている小作業」を棚卸しし、その一つひとつを単機能で、開いてすぐ使えるツールとして切り出しました。多機能な統合ツールにはせず、目的別に分けて一覧から選べる構成にしています。
- 用途別カテゴリで整理 — 「Web制作・開発向け」と「汎用ツール」に分け、一覧から目的のツールへ最短でたどり着ける導線にしました。
- 処理はブラウザ内で完結 — 変換・整形・生成系の多くを JavaScript でクライアント完結にし、入力データをサーバーに送らない設計に。プライバシー面の不安を取り除きました。
- サイト本体と同じデザインシステムを共有 — ポートフォリオ本体と同じデザイントークン（色・余白・タイポ）で統一し、どのツールも一貫した見た目・操作感に。
- モバイル最適化とアクセシビリティ — タッチターゲットを十分に確保し、スマホからでも片手で使えるレイアウトに。ラベルや aria 属性も適切に付与しています。
- 必要なものから継続的に追加 — 実務で「これも欲しい」と思ったものを随時追加。現在は htpasswd 生成・px→vw 変換・HTML チェッカー・OGP 生成・XMLサイトマップ生成・文字数カウント・カラーコード変換・JSON 整形・エンコード変換・年齢/和暦変換・世界の暦変換・QRコード生成などを公開しています。
03 · Results
成果
「探さずに開いてすぐ使える道具箱」として形になり、自分の制作フローの中でも実際に日々使う常設ツールになりました。公開後も実務で必要になったものを継続的に追加しています。
- 12種類のツールを公開（Web制作・開発向け／汎用の2カテゴリ）※最新の公開数に差し替え
- 変換・生成系はブラウザ内で完結し、入力データを外部送信しない設計を実現
- サイト全体で共通のデザインシステムを適用し、ツール間で一貫した UI・操作感を担保
- PC・スマホ両対応。移動中や手元の確認でも同じツールがそのまま使える
単機能・即起動・プライバシー配慮という方針が、そのまま「自分が普段の制作で大事にしていること」の小さなショーケースにもなっています。