Web制作歴15年の私が毎日使う、ブラウザ完結の無料ツール38選【自作しました】

公開日
最終更新日

「文字数を数えたいだけなのに、広告だらけのサイトを開いてスクロールする」
「客先から預かった画像を、よく知らない海外の圧縮サイトにアップロードするのは正直気が引ける」

Web制作の仕事をしていると、こういう”数秒で終わるはずの作業”のたびに小さなストレスが積み重なっていきませんか?

私はWordPressを中心に15年、150件以上のサイト制作に携わってきましたが、この「ちょっとした変換・計算・整形」のためにツールサイトを探し回る時間が、積もり積もるとバカにならないとずっと感じていました。

それなら自分で作ってしまおう、ということで、制作の現場で本当に使うツールを中心に38個、自分で開発して公開しました。この記事では、その全ツールを実際の使用場面と一緒に紹介します。

すべて無料・登録不要で、バドツール(ツール一覧)からいつでも使えます。

なぜ自作したのか:既存ツールへの3つの不満

世の中に便利ツールサイトはたくさんあります。それでも自作した理由は3つあります。

1つ目は、広告が多すぎて使いにくいこと。 ツール本体より広告の面積が大きく、どこに入力すればいいのか一瞬迷うサイト、ありますよね。広告自体は否定しませんが(本サイトにも掲載しています)、ツールの使いやすさを壊さない配置にこだわりました。

2つ目は、データがサーバーに送信されるのが不安なこと。 特に画像圧縮やテキスト整形で、クライアントから預かった素材や原稿を外部サーバーにアップロードするのは、守秘義務の観点でずっと引っかかっていました。そこでバドツールは、原則すべての処理をブラウザ内のJavaScriptだけで完結させています。入力したテキストも画像も、サーバーには一切送信されません。

3つ目は、スマホで使いにくいツールが多いこと。 移動中や客先でサッと使えるよう、全ツールをスマホ最適化しています。

コーディング中に使うツール(12個)

まずは私と同じ制作者の方に一番刺さるはずの、開発系ツールから。

JSON整形・検証
APIのレスポンスが1行に潰れていて読めない時、貼り付けるだけでインデント付きに整形します。構文エラーの内容も表示されるので、「設定ファイルが読み込めない原因はどこだ」というデバッグにも。逆に圧縮(minify)もできます。

URLエンコード・デコード
アクセスログやGETパラメータの%E3%81%82...を日本語に戻して確認したい時に。encodeURIComponentとencodeURIの切り替えに対応しているので、「URL全体」と「パラメータの値だけ」を使い分けられます。

Base64エンコード・デコード
Basic認証まわりの確認や、データURIの中身を見たい時に。日本語(UTF-8)に完全対応しているので、他ツールでありがちな文字化けが起きません。

ハッシュ生成
MD5・SHA-1・SHA-256・SHA-512を一括計算します。ダウンロードファイルのチェックサム照合や、テストデータの作成に。

HTMLエスケープ
ブログにソースコードを掲載する時の<&lt;変換。逆変換(アンエスケープ)もできるので、エスケープ済みログの解読にも使えます。

htpasswdファイル生成
Basic認証用の.htpasswdの中身を生成します。Apache標準のMD5(APR1)方式に対応し、複数ユーザーもOK。この手のツールは入力したパスワードをサーバーに送るものが多いのですが、本ツールはハッシュ化までブラウザ内で完結するので、本番用のパスワードでも安心して使えます。

htaccessファイル生成
HTTPSリダイレクト、wwwの統一、301リダイレクト、Basic認証、IP制限、キャッシュ、Gzip圧縮など10種類の設定を、スイッチをONにして入力するだけで生成。「htaccessの書き方を毎回検索して、記述ミスで500エラー」から解放されます。

CSSグラデーションジェネレーター
バー上のツマミをドラッグする直感操作で、linear-gradient / radial-gradientのコードを生成。最大6色、各色の位置(%)と透明度、カラーコードの直接入力に対応しているので、実案件レベルのグラデーションがそのまま作れます。

CSS三角形ジェネレーター
吹き出しのしっぽや矢印に使う、borderで作る三角形のCSSを自動生成。8方向対応で、正三角形の自動計算もできます。「borderの三角形、どっちを透明にするんだっけ」と毎回検索する生活が終わります。

CSS Gridジェネレーター
列・行ごとのサイズ指定(fr/px/auto)に対応し、セルをドラッグで連結するとgrid-areaのコードまで出力します。ヘッダー・サイドバー・メインのようなページレイアウトの設計が直感的にできます。

メタタグ生成
サイト公開前の定番作業、OGP・Twitterカードのメタタグ一式をフォーム入力から自動生成します。titleとdescriptionの文字数ガイド付きなので、SEOの基本を押さえたタグがもれなく揃います。

カラーコード変換
HEX・RGB・HSLを相互変換。デザインカンプのRGB値をCSS用のHEXに直したり、HSLに変換して「同じ色相で少し明るいバリエーション」を作る時に便利です。

テキスト処理・原稿まわりのツール(9個)

原稿の流し込みやライティング業務で使う群です。

文字数カウンター
文字数・行数に加えてUTF-8/Shift-JISのバイト数まで出るのがポイント。システムの文字数制限やmeta descriptionの調整に。

差分チェックツール
修正前後の原稿やコードを比較して、変更点を赤・緑でハイライト。行単位と文字単位を切り替えられるので、誤字修正の見落とし確認にも使えます。

原稿用紙換算
「400字詰め原稿用紙で何枚分か」を自動計算。ライター案件の分量確認に。

Pタグ・BRタグ生成
クライアントから届いたテキスト原稿を、改行ルールを選んでHTMLに一括変換。原稿流し込みの時間がかなり短縮できます。

ダミーテキストジェネレーター
指定文字数ぴったりのダミーテキストを生成。夏目漱石やLorem Ipsumも選べます。モックアップの文字量チェックに。

全角半角変換
英数字・カタカナ・スペース・記号を個別に選んで全角⇔半角を統一。濁音・半濁音の半角カナにも正確に対応させました。名簿データの整形に。

大文字小文字変換
英字の大文字・小文字・Title Caseへの変換。英語見出しの表記統一に。

ひらがなカタカナ変換
フリガナ欄のデータを一括で「ふりがな⇔フリガナ」変換できます。

改行削除・空白削除
PDFからコピーした原稿の変な位置の改行を一括除去。全角スペースにも対応しています。翻訳ツールに入れる前の整形にも。

日常の計算・変換ツール(10個)

事務作業や書類作成で意外と出番が多い群です。

  • 西暦和暦変換 … 契約書や請求書の日付表記の確認に。改元年(平成31年/令和元年)の両方表記にも対応
  • 年齢計算 … 生年月日から満年齢・数え年を自動計算
  • 日数計算 … 「請求書発行から30日後」のような支払期日の計算に
  • 消費税計算 … 見積書作成の必需品。10%/8%と端数処理3種に対応
  • 割引計算 … 「〇%オフでいくら」を瞬時に
  • 時間計算 … 稼働時間の集計に。休憩控除と10進数表記(7時間30分→7.5h)対応で時給計算がラク
  • 単位変換 … インチ⇔cm、坪⇔平米など。海外フォントのサイズ確認や不動産サイト制作の確認用に
  • BMI計算 … 健康管理の定番計算
  • 基礎代謝計算 … 1日の消費カロリーの目安を計算
  • うるう年判定・曜日計算 … 過去・未来の日付の曜日を一発確認

その他の便利ツール(5個)

QRコード作成
URL・テキスト・電話番号・メール・Wi-Fiの5種類に対応。名刺やチラシの制作案件で「QRコードも載せたい」と言われた時、その場で作ってPNGでダウンロードできます。

パスワード生成
BASIC認証やテストアカウントのパスワード発行に。文字種・記号の種類まで細かく指定でき、複数個の一括生成もできます。前述のhtpasswd生成ツールとセットで使うと、Basic認証の設定が全部ブラウザで完結します。

画像リサイズ・圧縮
このツールこそ「ブラウザ完結」の真価です。クライアントから預かった画像を外部にアップロードすることなく、手元のブラウザ内だけでリサイズ・圧縮してダウンロードできます。

IPアドレス確認
サーバーのIP制限を設定する時、「自分のIPアドレスなんだっけ」を一発確認。htaccess生成ツールのIP制限設定と組み合わせてどうぞ。

ローマ字変換
ヘボン式・パスポート式(長音省略)を切り替えられます。「しんぶん→shimbun」のような撥音のm化にも対応した、地味に真面目な作りです。

おまけ:エンタメ系ツール(2個)

正直に言うと、この2つは「毎日使う制作ツール」ではありません。ただ、「名前や生年月日を入力するツールこそ、データを送信しない設計が活きるのでは?」という考えから作ったものです。話のネタにどうぞ。

姓名判断
名前の画数から五格(天格・人格・地格・外格・総格)を診断します。約3,000字の画数データを内蔵し、画数の手動修正にも対応。入力した名前はブラウザの外に一切出ません。この安心感は、名前を扱うツールでは特に大事だと思っています。

誕生日占い(数秘術)
生年月日から数秘術の運命数を計算します。計算過程まで表示する「理屈が見える占い」なのがエンジニアっぽいところ。マスターナンバー(11・22・33)にも対応しています。

まとめ:ブックマークして使い倒してください

38個すべて、無料・登録不要・ブラウザ完結です。

→ バドツール ツール一覧はこちら

一覧ページをブックマークしておけば、「あの作業どうやるんだっけ」という時にすぐ辿り着けます。

今後もツールは追加していく予定です。「こんなツールが欲しい」という要望があれば、こちらから気軽に教えてください。制作の現場で本当に使えるものから順に作っていきます。

IPPEI FUKUTA(株式会社バッズブルー 代表)

IPPEI FUKUTA(株式会社バッズブルー 代表)

WordPress専門のWeb制作者として15年・150サイト以上を担当。現場でつまずいた問題と解決策を、同じ制作者・フリーランスの方に向けて発信しています。無料のWeb便利ツール集「バドツール」を開発・運営中。