ウェブアドレスにはスペースや特殊文字をそのまま使えません。このツールは特殊文字を安全な形式（%記号）に変換したり、エンコードされたURLを読みやすい元のテキストに戻します。
ブラウザがスペースを%20という記号に置き換えて認識するためです。
URLのパラメータに日本語や記号が含まれている場合にエンコードが必要です。
はい。制限なく完全無料でご利用いただけます。
メールの添付ファイル、画像のdata URI、JWTトークンまで、Base64は開発の現場で毎日のように登場します。このガイドでは、Base64が何をしているのか、なぜ出力が元より長くなるのか、使うべき場面と使うべきでない場面を整理します。
コンピューターのデータはすべて最終的にはバイトです。ところが、メール本文、HTTPヘッダー、JSON、URLなど、テキストしか安全に通せない経路は意外に多くあります。こうした経路に画像のバイト列や暗号文をそのまま流すと、制御文字や改行が混ざってデータが壊れたり、途中のシステムが内容を書き換えたりすることがあります。
Man → TWFu
Hi → SGk=
한 → 7ZWc
안녕 → 7JWI64WVBase64が3バイトを4文字に変える仕組み、末尾の = の意味、Base64URLとの違い、そしてBase64が暗号化ではない理由を例とともに解説します。ガイドを読む →
自分用のバージョンが必要なら、作業指示プロンプトをAIチャットに貼り付けるか、スキルファイルをAIコーディングエージェントに保存してください。私たちが開発時に整理した機能、例外、テストケースが含まれています。
プロンプトとスキルは英語で提供しています。AIツールはどの言語でもよく理解できます。
Claude、ChatGPT、GeminiなどのAIチャットにそのまま貼り付けてください。
You are an experienced full-stack web developer. Build a web tool called "URLエンコーダー/デコーダー" that meets the requirements below.
## Goal
Build a tool that percent-encodes and decodes whole URLs or individual query parameter values.
## Core features
- Encode and decode modes
- Component mode (encodeURIComponent) or full-URL mode (encodeURI)
- Option to write spaces as %20 or +
- Break a query string into a key/value table
- Copy result
## Inputs
- A URL or a value to encode
- Mode and space-style option
## Outputs
- Encoded or decoded result
- List of query parameters with decoded values
## Edge cases and handling rules
- Warn when double encoding such as %2520 is detected
- Keep malformed sequences (%G1, trailing %) and show a warning instead of crashing
- Let the user decide whether + means a space
- Handle byte sequences that are not valid UTF-8
## Implementation requirements
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.
## Definition of done (test cases)
- Component-encoding 'a b&c=d' gives 'a%20b%26c%3Dd'
- '안녕' gives '%EC%95%88%EB%85%95'
- Full-URL mode keeps :, /, ? and = in 'https://x.com/a?q=1'
First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.Claude CodeなどのAIコーディングエージェントで .claude/skills/build-url-codec/SKILL.md に保存すると、このツールを作る・直すたびに再利用できます。
---
name: build-url-codec
description: Use when building or changing a URLエンコーダー/デコーダー tool. Build a tool that percent-encodes and decodes whole URLs or individual query parameter values.
---
# Build: URLエンコーダー/デコーダー
## Goal
Build a tool that percent-encodes and decodes whole URLs or individual query parameter values.
## Workflow
1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.
## Core features
- Encode and decode modes
- Component mode (encodeURIComponent) or full-URL mode (encodeURI)
- Option to write spaces as %20 or +
- Break a query string into a key/value table
- Copy result
## Inputs
- A URL or a value to encode
- Mode and space-style option
## Outputs
- Encoded or decoded result
- List of query parameters with decoded values
## Rules
- Warn when double encoding such as %2520 is detected
- Keep malformed sequences (%G1, trailing %) and show a warning instead of crashing
- Let the user decide whether + means a space
- Handle byte sequences that are not valid UTF-8
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
## Verification
- [ ] Component-encoding 'a b&c=d' gives 'a%20b%26c%3Dd'
- [ ] '안녕' gives '%EC%95%88%EB%85%95'
- [ ] Full-URL mode keeps :, /, ? and = in 'https://x.com/a?q=1'