Base64は文字や記号を英数字の組み合わせに変換する方式です。このツールを使えば、テキストをBase64に変換したり、暗号のようなBase64を元の文字に戻すことができます。
いいえ。Base64はデータ崩れを防ぐ形式であり、パスワード保護用の暗号ではありません。
データの長さを揃えるために補うパディング文字です。
はい。日本語や絵文字も文字化けせずに安全に変換できます。
メールの添付ファイル、画像の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 "Base64エンコーダー/デコーダー" that meets the requirements below.
## Goal
Build a two-way converter that encodes text to Base64 and decodes Base64 back to text.
## Core features
- Switch between encode and decode
- UTF-8 handling so non-English text and emoji work
- Choose standard Base64 or Base64URL (-, _)
- Option to keep or omit padding (=)
- Copy-to-clipboard button for the result
## Inputs
- Text or a Base64 string
- Mode (encode/decode), variant (standard/URL), padding on/off
## Outputs
- Converted string
- Byte length of input and output
## Edge cases and handling rules
- Strip spaces and line breaks before decoding
- Restore missing padding so the length is a multiple of 4
- Show an error with the position of any non-Base64 character
- Warn when decoded bytes 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)
- 'Man' → 'TWFu' and 'Hi' → 'SGk='
- '한' → '7ZWc' and decodes back to '한'
- Bytes FB FF give '+/8=' in standard and '-_8=' in URL variant
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-base64-tool/SKILL.md に保存すると、このツールを作る・直すたびに再利用できます。
---
name: build-base64-tool
description: Use when building or changing a Base64エンコーダー/デコーダー tool. Build a two-way converter that encodes text to Base64 and decodes Base64 back to text.
---
# Build: Base64エンコーダー/デコーダー
## Goal
Build a two-way converter that encodes text to Base64 and decodes Base64 back to text.
## 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
- Switch between encode and decode
- UTF-8 handling so non-English text and emoji work
- Choose standard Base64 or Base64URL (-, _)
- Option to keep or omit padding (=)
- Copy-to-clipboard button for the result
## Inputs
- Text or a Base64 string
- Mode (encode/decode), variant (standard/URL), padding on/off
## Outputs
- Converted string
- Byte length of input and output
## Rules
- Strip spaces and line breaks before decoding
- Restore missing padding so the length is a multiple of 4
- Show an error with the position of any non-Base64 character
- Warn when decoded bytes 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
- [ ] 'Man' → 'TWFu' and 'Hi' → 'SGk='
- [ ] '한' → '7ZWc' and decodes back to '한'
- [ ] Bytes FB FF give '+/8=' in standard and '-_8=' in URL variant