画像文字入れ(写真にテキスト)

画像文字入れツールは、写真や画像にテキストを載せて PNG でダウンロードする無料ツールです。フォント(ゴシック・明朝・丸ゴシック)・サイズ・色・縁取り・影を指定し、プレビュー上のドラッグまたは X / Y スライダーで位置を調整できます。複数のテキストを重ねて配置できるので、見出し+本文のような 2 段構成のサムネイルも作れます。

1. 「画像をアップロード」から画像ファイルを選択します(JPEG・PNG など主要な画像形式に対応)
2. テキスト欄に載せたい文字を入力します
3. フォント(ゴシック・明朝・丸ゴシック)・サイズ・文字色・縁取り色・縁取り幅・影を調整します
4. プレビュー上のテキストを直接ドラッグするか、X / Y スライダーで位置を合わせます
5. 2 つ目以降のテキストが必要な場合は「+ 追加」で新しいレイヤーを作り、同様に調整します
6. 「PNG をダウンロード」で、元画像と同じ解像度のまま文字を合成した画像が保存されます

読みやすい文字サイズの目安は?

文字サイズは画像の横幅に対しておおよそ 4〜6% を目安にすると、離れて見ても読みやすくなります。 たとえば横幅 1200px の画像であれば 48〜72px、横幅 800px なら 32〜48px 程度が目安です。 本ツールではフォントサイズを 1〜500px の範囲で数値入力できるので、まず目安の値を入れてからプレビューを見て微調整するとバランスを取りやすくなります。

よく使う横幅について、下限(横幅の 4%)と上限(6%)を計算したものが次の表です。

写真の上の文字が読みにくいときは?

文字色と反対色の縁取り(ストローク)を 2〜4px つけるのがいちばん手軽で、定番は「白文字+黒縁取り」または「黒文字+白縁取り」です。 写真の上に文字を置くと背景の色や柄によって読みにくくなりますが、反対色の縁取りがあれば、 背景が明るい部分にも暗い部分にも文字が沈みにくくなります。 影(シャドウ)を弱めに(数値を小さく)加えると、縁取りだけでは硬く見える場合の立体感づけにも使えます。 本ツールでは縁取り幅を 0〜20px、影のぼかしを 0〜30px のスライダーで調整できます。

効果は並べて見ると分かります。次の図は明暗が混ざる背景に同じ文字を 3 通りで載せたもので、文字色と縁取り色は本ツールの既定値に合わせています。

SNS に投稿する画像サイズの目安は?

正方形なら 1080 × 1080px、縦型(ストーリーズ)なら 1080 × 1920px、横型なら 1200 × 675px が代表的な目安です。 各 SNS の推奨サイズに合わせてから文字入れすると仕上がりがきれいになります(いずれも各サービスが公開している推奨値)。

• Instagram の正方形投稿: 1080 × 1080px
• Instagram のストーリーズ: 1080 × 1920px
• X(旧 Twitter)の投稿画像: 1200 × 675px
• YouTube のサムネイル: 1280 × 720px
• Facebook の投稿画像: 1200 × 630px

元画像がこれらのサイズと異なる場合は、先に画像リサイズや画像の切り抜き・トリミングで目的のサイズに整えてから、本ツールで文字を載せる順番がおすすめです。

保存形式が PNG 固定なのはなぜ?

本ツールのダウンロードは PNG 固定です。JPEG は圧縮の過程で文字のエッジ(輪郭)がにじみやすく、 特に小さい文字や細い線ではギザギザやモヤつきが目立ちます。PNG は可逆圧縮のため、文字やロゴの輪郭がにじまずシャープに保たれます。 その代わり、写真のように色数が多い画像では PNG のファイルサイズが JPEG より大きくなりやすい点は覚えておいてください。 アップロードする元画像自体は JPEG・PNG など主要な形式をそのまま読み込めます。

保存した画像は元画像と同じ解像度で、テキストが画像に合成(フラット化)されます。ダウンロード後にテキストだけを再編集できないため、修正したい場合は元画像から作業をやり直してください。 PNG 以外の形式で持ちたい場合は、PNG を保存したうえで画像一括圧縮などで変換してください。

どんな用途で使える?

サムネイル作成、資料の写真キャプション、日付・クレジット表記、フリマアプリの注意書きが代表的な使い方です。

• 動画・記事のサムネイル作成: 写真に大きめの見出しテキストを 1〜2 個載せるだけで、クリックされやすいサムネイルになります。 タイトルと補足の 2 行を分けたい場合は、テキストを 2 つ追加してそれぞれ別の高さに配置します
• 資料・スライド用の写真キャプション: 会議資料や報告書に貼る写真に、撮影場所や説明を直接書き込めます。文字が写真に合成されるため、 別途キャプション欄を用意できないスライドにもそのまま貼り付けられます
• 写真への日付・クレジット表記: イベント写真や作品写真の隅に日付・撮影者名・著作権表記を小さめの文字で入れておくと、 後から写真だけが転用された場合の出どころが分かりやすくなります
• フリマアプリの出品画像への注意書き: 「SOLD」「予約済み」「サイズ〇〇」といった注意書きを商品写真に直接書き込めます。 商品説明欄と違い、画像自体に情報が残るため一覧表示やスクリーンショットでも伝わります

顔や住所など個人情報そのものを隠したいときは、文字を重ねるのではなく画像モザイク・ぼかしで元の情報を消してください。文字入れは上に情報を足す加工で、下の情報を消す加工ではありません。

複数のテキストはどう使い分ける?

「+ 追加」で新しいテキストレイヤーをいくつでも作れます。各レイヤーは独立してフォント・サイズ・色・位置を設定できるので、 「大きい見出し+小さい補足」「日本語+英語の2言語表記」のような組み合わせが可能です。 なお 1 つのテキストは折り返し(自動改行)されない 1 行の描画のため、長い文章を複数行にしたい場合は行ごとにテキストを分けて、 Y 位置をずらして配置してください。

どうやって文字を画像に合成している?

ブラウザの canvas 要素に元画像を描画したあと、その上にテキストを fillText / strokeText で重ね描きしています。縁取りは太めの strokeText を先に描いてから fillText で塗りつぶすことで実現し、影は canvas の shadowBlur プロパティで処理しています。

文字に使うのは Web フォントではなく、お使いの端末にインストールされているシステムフォントです。そのため端末や OS によって見え方が多少異なる場合があります。