Free Web Tools
無料で使える、制作現場のWebツール
Web制作会社が実案件で毎日使っている道具をそのまま公開しています。各ツールの処理・データ送信の有無は、ツールごとに明記しています。
- 登録 不要
- 料金 ¥0
- データ取扱 ツールごとに明記
- AIエージェント対応
-
画像→WebP一括変換 PNG/JPEGをWebPへ一括変換。品質調整・ZIP一括ダウンロード対応。Safariでも動作します。 画像をドロップ → 品質を調整 → ZIP保存
-
白背景の透過 縁につながる白背景だけを自動で透明化。イラスト内部の白は保持。ロゴ・イラストの切り抜きに。 画像をドロップ → 自動で透過 → PNG保存
-
コントラスト比チェッカー 文字色×背景色のWCAG 2.1コントラスト比を計算し、AA/AAA基準の合否を判定。納品前チェックに。 2色を選ぶ → 合否がすぐ出る → URLで共有
-
文字数カウント 全角・半角・行数に加え、X（Twitter）の実カウント（全角=2・URL=一律23換算）に対応。 テキストを貼る → 即カウント
-
llms.txt ジェネレーター 生成AI・AI検索にサイト概要を伝える llms.txt をフォーム入力で生成。GEO/LLMO対策の第一歩に。 フォーム入力 → 生成 → ルートに設置
-
JSON-LD構造化データ生成 Organization・FAQ・Service・パンくずのJSON-LDをフォーム入力で生成。リッチリザルト・AI検索対策に。 タイプを選ぶ → 入力 → headに貼り付け
-
Markdown→PDF変換 MarkdownをA4整形の文書に変換してそのままPDF保存。提案書・見積書・仕様書に。表・コード対応。 Markdownを貼る → プレビュー → PDF保存
-
OGPメタタグ生成ウィザード 3ステップ入力でSNSカードをプレビューしながらog:/twitter:タグ一式を生成。必須項目の充足チェック付き。 3ステップ入力 → カード確認 → コピー
-
faviconジェネレーター 画像1枚から favicon.ico・apple-touch-icon・PWAアイコン・webmanifest を一括生成。設置スニペット付き。 画像をドロップ → プレビュー → ZIP保存
-
TikTok投稿ツール PCブラウザからTikTokへ動画を直接投稿。公開範囲・コメント・商用開示を投稿前に確認できます。 TikTok接続 → 設定を選ぶ → TikTokへ直接投稿
-
文字コード・改行コード変換 CSVの文字コード（Shift_JIS/UTF-8）・BOM・改行コード（CRLF/LF）を判定してUTF-8に変換。文字化け調査に。 ファイルをドロップ → 判定を確認 → 書き出し
-
画像→AVIF変換＋<picture>生成 PNG/JPEGをAVIFへ一括変換し、AVIF優先の<picture>スニペットをコピー。品質調整・ZIP一括DL対応。 画像をドロップ → 変換 → スニペットをコピー
-
テストデータ生成 氏名・住所・メール・電話などのダミーデータをCSV/JSONで生成。文字コード・改行コードの指定、境界値テキスト、指定サイズのダミーファイル生成にも対応。 列を選ぶ → 行数やサイズを指定 → コピー/保存
-
Marp Markdown→スライド MarkdownをMarpのスライドにその場で変換。和文向けテーマ内蔵で、印刷からPDF保存、単体で開ける自己完結HTMLのダウンロードにも対応。 Markdownを書く → テーマを選ぶ → PDF/HTMLで保存
-
テキスト・コード差分チェッカー 2つのテキスト/コードの追加・削除・変更を行単位＋単語単位でハイライト。インラインと左右2列の表示を切り替えでき、unified diff（.patch）も書き出せる。 2つを貼り付け → 差分を確認 → .patchを保存
-
Cron式ビジュアル解説＆発火日時 */15 * * * * のようなCron式を日本語の文へ読み下し、フィールドごとの意味と次回からの発火日時を表示。タイムゾーン指定にも対応。 式を貼り付け → 読み方を確認 → 発火日時で答え合わせ
-
Base64 & Data URI変換 テキストとBase64を相互変換し、ドラッグ＆ドロップした画像から data:image/… のData URIとHTMLのimgタグ・CSSのbackground-imageを生成。SVGはパーセントエンコードで最小化。 貼る／画像を落とす → スニペットをコピー
-
URLパラメータ分解・UTMタグ編集 URLを貼るとクエリパラメータをキーと値の表に分解。編集・追加・削除とUTMタグの付与、gclid等のクリックID一括削除、URLエンコード/デコードに対応。 URLを貼る → 直す → コピー
-
HTMLエンティティ・特殊文字エスケープ < > & " ' などのHTML特殊文字をエンティティへ変換し、& や ' を元の文字へ戻す。名前付き・10進・16進の切り替えと二重エスケープの検出、エンティティ早見表つき。 貼る → 変換 → コピー
-
JSON ⇄ YAML 相互変換＆構文フォーマッター JSONとYAMLをその場で相互変換。インデント幅や引用符を選んで整形でき、構文エラーは行と桁を指して説明。タブ字下げや 0755・yes/no などYAML特有の落とし穴も警告。 貼る → 変換 → コピー
-
PX ⇄ REM / EM 単位変換＆スケール表 ルートのフォントサイズを基準に px・rem・em を即時換算。12px〜64pxのスケール表をCSS変数やSCSSで書き出せ、CSSを貼れば px→rem を一括変換。1pxの罫線と@mediaは残せます。 入れる → 換算 → コピー
-
Colorコード変換＆アルファ透過計算機 HEX・RGB・HSL・OKLCHを相互変換。アルファを指定した rgba() / hsla() をその場で作れ、背景に重ねたときの実際の色・コントラスト比・明度パレット11段まで出せます。 入れる → 変換 → コピー
-
MD5 / SHA-256 / SHA-512 ハッシュ生成 テキストやファイルの MD5・SHA-1・SHA-256・SHA-384・SHA-512 を同時に算出。配布元のチェックサムを貼れば一致をその場で照合でき、16進・Base64で書き出せます。 入れる → 算出 → 照合
-
JWTデコーダー＆有効期限チェッカー JWTを貼るとヘッダーとペイロードを整形JSONで表示し、有効期限までの残り時間をバーで可視化。alg:noneや秒とミリ秒の取り違えも指摘し、鍵を入れれば署名も検証できます。 貼る → 読む → 検証
-
User-Agent 解析＆デバイス判定 UA文字列を貼るとブラウザ・バージョン・エンジン・OS・デバイス種別を表に分解。トークンごとの意味に加え、凍結された値やアプリ内ブラウザなどUAでは分からないことも指摘します。 貼る → 分解 → 確かめる
-
UUID (v4) & ULID 一括生成 UUID v4 と時系列ソート可能な ULID を1〜100件まとめて生成。ハイフンなし・大文字・JSON配列など貼り付け先に合わせた形で書き出せ、同じミリ秒でも順序が崩れません。 選ぶ → 生成 → コピー
-
アスペクト比計算＆レスポンシブサイズ算出 16:9 や 4:3 を選んで幅を入れると高さが即座に決まります。幅と高さから比率を割り出し、aspect-ratio のCSSとブレークポイント別の高さ早見表をそのままコピーできます。 選ぶ → 入れる → コピー
-
Markdownテーブル整形＆CSV/TSV変換 Excelやスプレッドシートからコピーした表を貼るだけでMarkdownの表になります。全角文字を2桁で数えて縦線を揃え、数値の列は自動で右寄せ。CSV・TSV・HTML・JSONへの書き出しにも対応。 貼る → 選ぶ → コピー
-
SQLクエリフォーマッター＆整形 1行に固まったSELECT・JOINのクエリを貼るだけで、予約語の大文字化・句ごとの改行・サブクエリの字下げまで自動で整形。インデント幅やカンマの位置も選べ、WHEREの無いUPDATE・DELETEも指摘します。 貼る → 選ぶ → コピー
-
QRコード生成（SVG / PNG） URLや文章を入れるだけでQRコードになり、印刷でぼやけないSVGとPNGで保存できます。サイズ・誤り訂正レベル・余白を指定でき、Wi-Fiやメールの書式も下書きから作れます。 入れる → 選ぶ → 保存
-
正規表現テスター 正規表現とテキストを入れるだけでマッチした箇所が色分けされ、キャプチャグループの中身・位置・置換した結果までその場で確認できます。フラグの切り替えと、g忘れやReDoSの指摘つき。 書く → 貼る → 確かめる
-
UNIXタイムスタンプ⇄日時変換 1755999999 のような数値と、ISO 8601や日本時間の表記を相互に変換します。タイムゾーンを選ぶと現地時刻・UTC・「○分前」が同時に並び、ログから貼った複数行もまとめて変換できます。 貼る → 選ぶ → 読む
-
新規タブメモ帳 Chromeの新しいタブをメモ帳にする拡張機能。プレーンテキストのメモと簡易チェックリストだけの軽量版で、保存はブラウザの中だけ。このページで実際の画面をそのまま試せます。 試す → 入れる → 書く
-
画像リサイズ＆クロップ 写真やスクリーンショットを、長辺1200pxのような一言の指定でまとめて縮小します。16:9や正方形へ中央で切り抜くこともでき、JPEG/PNG/WebPで書き出せます。 入れる → 指定する → 保存
-
EXIF情報の確認＆除去 写真に埋め込まれた撮影日時・カメラの機種・GPSの位置情報を一覧で確認できます。位置情報が入っていれば警告し、再圧縮せずにメタデータだけを取り除いて保存できます。 入れる → 確かめる → 除去
-
robots.txt ジェネレーター クロールの許可・禁止とサイトマップの宣言をフォームで作れます。GPTBotなどAIクローラーは「学習だけ断ってAI検索には出す」をプリセットから選べます。 選ぶ → 確かめる → 置く
-
安全なパスワード生成 長さ・文字種・紛らわしい文字の除外を指定して、推測されにくいパスワードを最大50件まとめて発行。強度はビット数と解読までの目安で確認できます。 決める → 生成 → コピー
-
文字列ケース変換 camelCase・snake_case・kebab-case・PascalCase・CONSTANT_CASE を相互変換。複数行の一括変換とCSVヘッダーの整形に対応し、頭字語や数字混じりの語も切れ目を推定します。 選ぶ → 貼る → コピー
-
CSV/TSV ⇄ JSON 相互変換 表計算ソフトのCSV・TSVとJSON配列を相互変換。区切り文字の自動判定、見出し行の有無、a.b列と入れ子オブジェクトの相互展開に対応し、先頭0や長いIDの桁落ちも防ぎます。 貼る → 選ぶ → コピー
-
PDF結合・分割・ページ抽出 複数のPDFを1つに結合、ページ範囲を指定して抽出・分割、並べ替えと回転。契約書や見積書をアップロードせず、ブラウザの中だけで加工します。 入れる → 範囲を書く → 保存
-
全角⇄半角変換＆テキストクリーナー 英数字・カタカナ・記号・スペースを文字種ごとに全角⇄半角へ変換。半角カナ「ｶﾞ」と全角「ガ」も正しく行き来し、連続空白・行頭行末の空白・空行の除去と、全角スペースやゼロ幅文字の指摘までまとめて行います。 貼る → 選ぶ → コピー
-
X(Twitter)投稿の文字ウェイト計算 Xの投稿は単純な字数ではなくウェイトで数えます（漢字・かなは2・URLは長さに関係なく23・上限280）。下書きを貼ると残量と超過位置を即時に表示し、URL・メンション・ハッシュタグを検出して実効ウェイトで計算します。 貼る → 見る → 直す
-
CSS clamp() フルイドタイポグラフィ計算機 「375pxで24px・1280pxで40px」と決めるだけで、画面幅に合わせてなめらかに変わる clamp(最小, vw式, 最大) を生成します。幅スライダーのライブプレビュー、rem基準の出力、見出しから注釈までの型スケール一括生成つき。 2点を入れる → 見る → コピー
-
CSSグラデーションジェネレーター linear / radial / conic のグラデーションをGUIで設計してCSSを出力します。カラーストップのドラッグ編集、角度と中心の指定、OKLCH補間（in oklch）で濁らない中間色、古いブラウザ向けsRGBフォールバックの同時出力つき。 色を置く → ドラッグ → コピー
-
画像からカラーパレット抽出 スクリーンショットや支給ロゴをドラッグ&ドロップすると、主要色を最大8色まで抽出します。HEX / RGB / OKLCH をワンクリックでコピーでき、占有率の帯と、白文字・黒文字とのコントラスト比も同時に表示。画像は端末から出ません。 画像を落とす → 見る → コピー
-
QRコード読み取り QRコードの画像をドラッグ&ドロップ・貼り付けすると、中身の文字列を読み取ります。URLは自動で開かず、スキーム・ドメイン・パスに分け、http・「@」による偽装・国際化ドメイン・短縮URLなど確かめる点を添えて表示。Wi-Fi設定や連絡先の書式も読み解きます。 画像を落とす → 中身を読む → 判断する
-
SVG最適化＆data URI化 IllustratorやFigmaから書き出したSVGを、SVGOでブラウザ内最適化します。削減率とBefore/Afterのプレビューで見た目が変わっていないことを確認でき、CSSのbackground-imageにそのまま貼れるエンコード済みdata URIとbase64版も同時に出力。 貼る → 見比べる → コピー
-
リダイレクトルール ジェネレーター サイトリニューアルや移転で変わるURLの対応表を貼り付けると、.htaccess（Apache）・nginx・Netlify _redirects の301リダイレクトを一括で書き出します。www統一・https統一・末尾スラッシュはプリセット、旧URLの重複・ループ・連鎖はその場で指摘。 対応表を貼る → 形式を選ぶ → コピー
-
IPアドレス・CIDR計算機 192.168.1.0/24 のようなCIDR表記から、ネットワークアドレス・ブロードキャスト・使えるホストの範囲と台数をその場で算出します。サブネットへの分割表、許可リストに載せるIPが範囲に入るかの確認、IPの範囲から最小のCIDR集合を求める逆算まで。IPv4・IPv6対応。 CIDRを入れる → 範囲を読む → コピー
-
カレンダー予定（.ics）ジェネレーター ウェビナーや打ち合わせの案内に添える「予定に追加」ファイル（.ics）を作ります。タイトル・日時・場所・説明・リマインダーを入れるだけ。タイムゾーンの切り替え規則ごと書き出すので、Googleカレンダー・Appleカレンダー・Outlookのどれで開いても同じ時刻。終日予定・繰り返しにも対応。 予定を入れる → 時間帯を選ぶ → 配る
-
イージング（cubic-bezier）プレビュー＆比較 CSSアニメーションの速度曲線を、つまみをドラッグしながら決めます。2つのイージングが同時に走るので「どちらが気持ちいいか」をその場で見くらべられます。ease-out-expo などの定番プリセット、行き過ぎ（back）の可視化、linear() 関数への近似出力つき。DevToolsからコピーした値の貼り付けにも対応。 つまみを動かす → 並べて走らせる → コピー
-
box-shadow ジェネレーター CSSの影をスライダーで調整して、そのままコピーできます。影を何枚も重ねる多層シャドウに対応し、1本の影を「なめらかにする」ボタンで薄い影の重なりへ分けられます。Material風・ニューモーフィズム・フォーカスリングなどの定番プリセット、DevToolsからコピーした影の読み込みつき。 スライダーを動かす → 重ねる → コピー
-
和文ダミーテキスト生成 デザインカンプに流し込む日本語のダミー文を、文字数・段落数を指定して作ります。和文の見た目を決める漢字の割合をスライダーで変えられるので、本物の原稿に近い黒みで確かめられます。見出し・箇条書き混在、HTML/Markdown出力、流し込みプレビュー、Lorem Ipsumつき。 量を決める → 流し込む → コピー
-
SNS画像サイズ一括書き出し 1枚の画像から、OGP（1200×630）・X・Instagram・YouTubeサムネイルなど媒体ごとの規定サイズをまとめて書き出します。切り抜く位置はプリセットごとにプレビューで調整でき、ZIPで一括保存。カスタムサイズも追加できます。 入れる → 位置を合わせる → ZIP保存
-
タイムゾーン変換・世界時計 基準の日時とタイムゾーンを決めると、選んだ都市の現地時刻が同時に並びます。「JST 15:00 は PST で何時？」の相互変換、前日・翌日のずれ、業務時間が重なる時間帯まで一目で分かり、予定調整用のテキストをそのままコピーできます。 日時を決める → 都市を足す → コピー
-
日数・営業日計算 2つの日付の間が何日・何営業日あるか、受領から10営業日後の期日がいつになるかを、土日と日本の祝日を除いて数えます。月末締め翌月末払いのような支払サイトから支払日も出せます。夏季休業など自社の休みも足せます。 日付を入れる → 休みを合わせる → コピー
-
HTML→Markdown変換 WebページのHTMLを貼り付けるとMarkdownになります。見出し・リスト・表・リンク・画像・コードブロックに対応し、scriptやstyle、装飾のためのタグは自動で除去。相対URLの絶対化と本文だけの抽出もできるので、既存サイトの原稿をMarkdown管理へ移すときに使えます。 HTMLを貼る → 整え方を選ぶ → コピー
-
HEIC→JPEG/PNG変換 iPhoneの「高効率」設定で撮った .heic 写真を、JPEG（またはPNG）へ一括変換します。WindowsやブラウザやCMSが開けないHEICを、そのまま使える形式に。長辺の上限を決めて縮小でき、ZIPでまとめて受け取れます。写真はアップロードされません。 HEICを入れる → 形式を選ぶ → 保存
-
印刷サイズ・DPI計算機 A4・名刺・はがきなどの用紙と解像度（350dpi・300dpi）を選ぶと、印刷入稿に必要なピクセル数が決まります。塗り足し3mmを含めた寸法も同時に表示。手持ちの画像が何cmまで印刷できるか、A4に使うと実効何dpiになるかの逆算にも対応します。 用紙を選ぶ → dpiを決める → コピー
-
色覚シミュレーター 配色や画像が、P型（1型）・D型（2型）・T型（3型）色覚でどう見えるかを並べて確かめられます。2色が判別しづらくなる組み合わせは、色差とコントラスト比を添えて警告。赤と緑で合否を示すグラフやUIの見直しに使えます。画像はアップロードされません。 2色を入れる → 見え方を見比べる → 画像でも試す
-
SERPプレビュー＆メタタグ文字数チェック title・descriptionがGoogle検索結果でどう表示され、どこで切り詰められるかを確認できます。判定は文字数ではなくピクセル幅なので、和文でも欧文でも実際の切れ方どおり。パソコンとスマートフォンの両方をプレビューできます。 文言を入れる → 切り詰め位置を見る → タグをコピー
For AI Agents
このツール集は人だけでなくAIエージェントからも使えるように設計しています。コントラスト比・文字数カウント・OGP確認はURLパラメータで直接呼び出せるほか、MCPサーバーとしてClaude等のAIツールに組み込めます。AIエージェントからの使い方 / llms.txt
Why Free
私たちは中小企業のホームページ制作とAI活用支援を仕事にしています。ここにある道具は自分たちの制作・検収で実際に使っているもので、同じ作業に困っている方にそのまま役立つと考えて公開しています。制作のご相談は first-ch.com へ。