写真に文字入れ

写真を選んで文字を打つと、元のサイズのまま文字が載ります

写真に文字入れは、撮った写真の上に文字を重ねて描き、写真と同じ縦横サイズの画像1枚として保存するツールです。文字は8個まで入れられ、1つずつ書体・大きさ・傾き・色・縁取り・背景を別々に持ちます。ステージ上で文字を指やマウスでドラッグして位置を決め、右下の点で大きさ、上の点で傾きを変えます。縦書きにも切り替えられます。

文字入れでいちばん多い失敗は、文字が写真の模様に埋もれて読めなくなることです。そのためステージの下の読みやすさチェックが、文字の後ろにある写真の明るさの範囲と文字色を1本のバーに並べて見せ、ウェブアクセシビリティ指針(WCAG)のコントラスト比で読めるかどうかを判定します。「埋もれます」と出たら、縁取り・背景ボックス・文字色の変更のどれかをボタン1つで試せます。写真と文字はこのブラウザの中だけで処理し、サーバーには送りません。

こんなときに使います

• 旅行や日常の写真に、場所と日付を入れたいとき: 上に大きなタイトル、右下に小さな日付という2つの文字の組み合わせが、最初の画面のサンプルです。
• 商品写真に価格や特典を入れたいとき: 黄色ラベルのスタイルは文字の後ろにボックスを敷くので、写真がにぎやかでも価格がはっきり読めます。
• お知らせ画像を手早く作りたいとき: 字幕バンドのスタイルは、写真の横幅いっぱいに半透明の帯を敷いて文字を載せます。動画の字幕のように見えるので、1行の案内に向いています。
• 自分の写真に名前を残したいとき: 繰り返しウォーターマークは薄い文字を斜めに写真全体へ敷き詰め、片隅を切り取っても消えにくくします。
• 縦書きの看板・ポスター風にしたいとき: 縦書きにすると文字は上から下へ、行は右から左へ並びます。しっぽり明朝や佑字 肅と組み合わせると、和の行事や祝いのカードらしい雰囲気になります。

文字を入れる手順

1. 写真を選ぶ: ボタンで選ぶか、編集台に写真ファイルをドラッグ＆ドロップするか、コピーした画像を貼り付けます。最初はサンプル写真と2つのサンプル文字が載っているので、仕上がりを先に見られます。
2. 文字を打つ: 文字のチップを選んで、入力欄に打ち込みます。改行すると複数行になり、1つの文字は300文字までです。「文字を追加」を押すと、今の文字の見た目を引き継いだ新しい文字が少し下に増えます。
3. 見た目を選ぶ: 6枚のスタイルは、今の文字がある位置の写真を切り出し、その上に各スタイルを当ててみた図です。気に入った1枚を押してから、書体・大きさ・色を整えます。
4. 位置を決める: ステージでドラッグするか、位置の9マスを押すと、端から短辺の5%離れた位置に寄せます。ドラッグ中に中央へ近づくと位置合わせの線が出て、ぴったり中央に吸着します。
5. チェックして保存: 読みやすさチェックと「写真の外に出ています」の警告を確かめてから、PNG・JPG・WebPのどれかで保存します。ステージのすぐ下に保存ボタンと読みやすさの表示があり、共有に対応した端末では共有ボタンからそのまま送れます。

写真の上の文字が読めるかを測る方法

WCAG 2.2の1.4.3は、文字と文字画像のコントラスト比を4.5 : 1以上、大きな文字は3 : 1以上と定めています。コントラスト比は、2色の相対輝度を明るい側L1・暗い側L2として (L1 + 0.05) ÷ (L2 + 0.05) で求め、1(同じ色)から21(黒と白)までの値になります。ただし写真は背景が1色ではないので、1点だけを測ると判定がぶれます。

このツールは、文字ブロックの内側にある写真のピクセルを約5,000個まで均等に取り出し、ピクセルごとに文字色とのコントラスト比を測って、低いほうから10%の地点の値を表示します。いちばん不利な場所に近く、しかも数ピクセルのノイズには振り回されない値です。表示は小数第1位で切り捨て、判定もその表示値で行います。4.49は4.4と表示され、4.5に届かないと判定します。

表のとおり、白い文字は明るい空や夕焼けの上では基準を大きく下回ります。縁取りの太さを文字サイズの3%以上にすると文字の周りが縁取りの色になるので、そこからは文字色と縁取り色のコントラスト比で判定します。白い文字に黒い縁取りなら、背景が何色でも18.8 : 1です。背景ボックスを敷いた場合は、ボックスの色を濃さの分だけ写真に混ぜた色を背景として測り直します。文字全体を薄くする不透明度も、文字色とボックス色にそのまま混ぜて計算します。

チェックバーは左が黒、右が白で、見た目の明るさ(CIE L*)の順に並べてあります。オレンジの帯は文字の後ろの写真の明るさの10〜90%の範囲、帯の中の縦線は中央値、白い縁の点は文字色、太い輪は縁取りの色です。点が帯の中に入っていれば、文字と同じ明るさの背景が文字の後ろにあるということで、その場所では文字が消えて見えます。

縁取り・影・ボックス・帯の使い分け

3つの工夫を一度に強くかけると、かえって見づらくなります。縁取りを0から少しずつ上げ、チェックが「読みやすい」に変わる地点を探します。それでも写真が複雑すぎるなら、ボックスか帯に切り替える順番をおすすめします。

文字サイズは写真の幅に対する割合です

文字サイズはpxではなく、写真の幅に対する%で決めます。同じ48pxの文字でも、1,000pxの写真では大きく、4,000pxの写真では小さく見えるからです。割合で決めれば、プレビューと保存した元のサイズで比率が変わらず、写真を替えても画面で占める割合が保たれます。行の高さは文字サイズの1.25倍、縁取りの太さは文字サイズに対する%、ボックスの余白は横0.3倍・縦0.18倍で、いずれも四捨五入したpxで描きます。

キャンバスは縁取りの線を文字の輪郭の内側と外側に半分ずつ引くため、このツールは表の太さの2倍の線を引き、文字の外側に見える太さが表と同じになるようにしています。縦長の写真では幅が短い辺になるので、同じ%でも画面で占める割合が小さく見えます。3行の文字なら、行の高さ × 3が写真の高さの半分を超えないかを見て、超えるなら大きさを下げてください。

日本語の書体8種と利用条件

標準ゴシックは閲覧する端末にもともと入っている書体なので、すぐ描けます。残りの7種は、このサイトに一緒に置いてある無料の書体で、選んだときにだけダウンロードします。表のとおり1〜4 MBほどあるので、初めて選ぶときはダウンロードが終わるまで少し待ち、終わるとステージがその書体に切り替わります。

7種とも Google Fonts で配布されている SIL OFL 1.1 の書体です。SIL の OFL FAQ(1.13)は、OFL の書体で作ったグラフィックが OFL の対象になることはないと説明しています。つまり書体を使って作った画像の使い道は、書体側から制限されません。ただし、書体ファイルそのものを再配布するときは、OFL の条件を満たす必要があります。表の「利用条件」から各書体の原文を開けます。これは利用条件の紹介であり、法律上の助言ではありません。

書体ごとに収録している文字は違います。7種はいずれも、JIS X 0208の漢字6,355字(第1水準・第2水準)をすべて含むことを、cmap(書体の文字表)で照合して確認しました。収録漢字の数は、Zen丸ゴシックとはちまるポップが約6,680字、油性マジックが約6,700字、佑字 肅が約6,750字、デラゴシックが約7,650字、クレーが約7,900字、しっぽり明朝が約13,600字です。一方で、佑字 肅には波ダッシュ「〜」がありません。書体にない文字はその文字だけ標準ゴシックで描かれ、どの文字が替わったかは書体の欄の下に表示されます。

縦書きはこう並びます

W3Cの日本語組版処理の要件(JLREQ)は、縦組では文字を上から下へ、行を右から左へ並べると定めています。このツールの縦書きも同じ向きで、文字を1マスに1字ずつ上から下へ置き、改行すると左側に新しい行が増えます。行の揃えのボタンは縦書きのとき「上・中央・下」に変わり、行の始まりの位置を揃えます。

• 読点「、」と句点「。」は、マスの右上へ寄せて描きます。
• 長音「ー」、波ダッシュ「〜」、三点リーダー「…」、ダッシュ「―」、括弧類(「」『』【】()など)は、90度回転して縦方向に合わせます。
• 小書きの仮名(っ・ゃ・ゅ・ょ・ァ・ッなど)は、少し右上に寄せて描きます。JLREQは、小書きの仮名の字面は縦組ではマスの天地中央で右寄りに置くと説明しています。
• 英数字は回さず、1マスに1文字ずつ正立させます。JLREQが縦組の英数字の配置として挙げる3方式(1字ずつ正立・90度回転・縦中横)のうち、このツールが使うのは1つ目だけで、縦中横には対応していません。「2026」のように数字が長いときは、横書きの文字を別に置くか、漢数字で打つほうが読みやすくなります。
• 書体に入っている縦書き専用の字形(vert)は使いません。位置の移動と回転は、書体ではなくツール側の簡易的な処理です。

縦書きの1行の長さは、文字サイズ × 文字数です。1,920 × 1,080pxの横長の写真で文字サイズ8%なら1文字が154pxで、6文字なら924pxに収まりますが、7文字だと1,078pxで上下いっぱいになります。長い文は改行で行を分け、右の行から左へ読み進める順に並べてください。縦書きに向くのは、明朝系のしっぽり明朝と佑字 肅です。縁取りを太くしすぎると細い線が埋まるので、3〜5%から試してください。

繰り返しウォーターマークの間隔

繰り返しをオンにすると、同じ文字を写真全体に碁盤の目のように敷き詰めます。横の間隔は文字を囲む四角の幅に文字サイズの2倍を足した値、縦の間隔は高さに1.6倍を足した値で、行ごとに半マスずつずらして置きます。1枚に300個を超えるときは間隔を1.2倍ずつ広げ、ステージが重くならないようにしています。繰り返しウォーターマークのスタイルは、不透明度35%、大きさ4%、傾き−30°から始まります。

ウォーターマークは無断使用を減らす目印にすぎず、防ぐものではありません。文字が薄いほど写真は隠れませんが、消すのも簡単になります。元の写真は別に保管し、公開用の写真にだけ入れてください。

保存形式と保存サイズ

• PNG(既定): 文字の輪郭がいちばんきれいで、透明な部分もそのまま残ります。容量は大きくなります。
• JPG: 容量が小さくなります。透明を持てないので背景を白で埋め、画質は50〜100%から選びます(既定は90%)。
• WebP: 容量と鮮明さの中間です。ブラウザーがWebPでの保存に対応していないと、MDNの説明のとおりPNGで作られてしまうため、そのときは保存せずに別の形式を選ぶよう知らせます。

保存サイズは読み込んだ写真と同じです。ただしiPhone・iPadのSafariは、キャンバス1枚の面積が4,096 × 4,096 = 16,777,216ピクセルまでしか描けません(canvas-sizeのテスト結果)。元のサイズで保存できないときは、この面積に収まるよう縦横比を保って縮小して作り直し、縮小したことと大きさを知らせます。

読み込める写真は、ファイル1つにつき20 MiB、4,000万画素、1辺16,384pxまでです。カメラが記録した回転情報は読み込み時に反映するので、縦位置で撮った写真が横に寝てしまうことはありません。

よくある失敗

• プレビューの大きさで判断する: ステージは画面に合わせて縮めた図です。小さい文字のにじみは、保存したファイルを原寸で開いて確かめてください。
• 端ぎりぎりに置く: SNSが正方形や4:5に切り抜いて表示すると、端の文字が切れます。写真の外に出た警告が出ていなくても、位置の9マスの5%の余白を残すほうが安全です。
• JPGで保存した写真にまた文字を入れる: 直すたびに圧縮が1回ずつ重なります。元の写真を読み込み直して、最初から保存してください。
• 細い手書き風の書体を小さく使う: はちまるポップのように線の細い書体は、大きさ4%を下回ると写真の模様に埋もれやすくなります。縁取りをゴシックより少し太くするか、ボックスを敷いてください。
• 縦書きに入れた英数字をそのまま読ませる: 英数字は1文字ずつ立って並ぶため、長い数字や英単語は読みにくくなります。日付や型番は横書きの文字を別に置いてください。

このツールの限界

• 保存した画像は、写真と文字が1枚のピクセルにまとまるので、文字だけを後から直すことはできません。再読み込みすると作業も残りません。
• 文字ごとに違う色、曲線に沿った配置、グラデーション、元に戻す機能はありません。
• 縦書きは、文字をマスに立て、一部の約物だけを移動・回転する簡易的な方式です。縦中横、ルビ、書体の縦書き用字形には対応していません。
• 読みやすさチェックは画面プレビューのピクセルで測り、影と文字の線の太さは計算に入れません。基準を超えていても、実際の画面サイズや見る人の視力によっては読みにくいことがあります。
• HEIC写真は、ブラウザーが読み込めるときだけ開けます。開けないときはJPGに変換してから読み込んでください。

基準: 2026-10-20に、下の標準・文書と各書体の利用許諾の原文を確認しました。表の数字はこのツールの計算と同じです。

出典

• 01W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)文字と文字画像は4.5:1以上、大きな文字は3:1以上、コントラスト比 (L1 + 0.05) ÷ (L2 + 0.05)
• 02W3C — 日本語組版処理の要件(JLREQ)縦組の文字・行の方向、小書きの仮名の字面の位置、縦組の英数字の3つの配置方法
• 03WHATWG — HTML Living Standard, キャンバスへの文字の描画fillText・strokeText、配置とベースライン
• 04MDN — CanvasRenderingContext2D.strokeText()文字の輪郭線を描く
• 05MDN — HTMLCanvasElement.toBlob()非対応の形式はPNGで書き出される、品質の値はJPEG・WebP向け、作れないときはnull
• 06MDN — createImageBitmap()imageOrientationオプションで写真の回転情報を反映
• 07canvas-size — Test ResultsMobile Safari 9+ のキャンバス最大面積 4,096 × 4,096(16,777,216)
• 08SIL — OFL FAQ1.13: OFLの書体で作ったグラフィックはOFLの対象にならない
• 09Google Fonts — Dela Gothic One(デラゴシック)SIL OFL 1.1
• 10Google Fonts — Zen Maru Gothic(Zen丸ゴシック)SIL OFL 1.1
• 11Google Fonts — Shippori Mincho(しっぽり明朝)SIL OFL 1.1
• 12Google Fonts — Klee One(クレー)SIL OFL 1.1
• 13Google Fonts — Yusei Magic(油性マジック)SIL OFL 1.1
• 14Google Fonts — Hachi Maru Pop(はちまるポップ)SIL OFL 1.1
• 15Google Fonts — Yuji Syuku(佑字 肅)SIL OFL 1.1

よくある質問

いっしょに使うツール