写真に文字を入れる
写真に文字入れするには、写真を選んで文字を入力し、好きな位置へドラッグするだけ。複数の文字を入れられ、フチ取りや帯で読みやすくできます。画像はお使いの端末から出ません。
出典:WHATWG HTML Living Standard – Canvas: drawing text (fillText, strokeText)。更新日:
計算方法
要点:このツールは、ブラウザ上で写真に文字を入れます。フォント・色・フチ取り・影・背景の帯を自由に選べ、元の写真と同じ解像度で保存されます。写真が端末の外に送られることはありません。
使い方
- 写真をドラッグするか選択、またはCtrl+Vで貼り付けます。
- 文字を入力します。Enterで改行でき、長すぎる行は画像の幅の90%で自動的に折り返します。
- フォント・サイズ・色を選びます。背景がごちゃごちゃしている写真では、フチ取りか背景の帯をオンにすると読みやすくなります。
- 文字を好きな位置へドラッグします。「+ テキスト枠」で上下など複数の文字を追加できます。
- 「写真を保存」を押すと、JPG・PNG・WebPで保存できます。
フチ取りと帯が効く理由
明るい空に白い文字、暗い服に黒い文字は読みにくくなります。Webアクセシビリティの指針WCAG 2.2では、通常の文字で4.5:1以上、大きな文字で3:1以上のコントラスト比が求められています。写真は場所によって背景の明るさが変わるため、明るい文字に暗いフチを付けたり半透明の帯を敷いたりすると、どこでもコントラストを保てます。描画にはHTML標準のcanvas関数strokeTextとfillTextを使い、先にフチ、その上に文字を塗っています。
欧文フォントはすべてSIL Open Font License 1.1で、このサーバーに置いてあり、選んだときにだけ読み込まれます。日本語の文字は端末のシステムフォント(ゴシック・明朝)で描かれます。サイズは画像の幅に対する割合で扱うので、保存した写真はプレビューとまったく同じ見た目になります。
できないこと
- 日本語専用のデザインフォントは同梱していません。和文はシステムフォントで表示されます。
- グラデーションや曲線の文字、スタンプなどの効果はありません。画像全体に透かしを入れるなら「画像に透かしを入れる」ツールが便利です。
- JPGは保存時に再圧縮され、EXIF情報(撮影場所・カメラ)は引き継がれません。iPhone・iPadでは1,670万画素までに制限されます。
プライバシー
写真と文字はブラウザの中だけで処理され、アップロードされません。入力した文字も保存されません。
よくある質問
写真に無料で文字入れするには?
ここに写真をドラッグし、文字を入力して位置を決め、「写真を保存」を押すだけです。スマホでもパソコンでも、アプリや登録なしで使えます。
iPhoneで写真に文字を入れるには?
Safariでこのページを開き、「ファイルを選択」から写真ライブラリの写真を選びます。保存後に「写真に保存」を選ぶと写真アプリに戻せます。写真アプリの「編集→マークアップ」にも簡単なテキスト機能があります。
おしゃれで読みやすい文字入れのコツは?
ポイントはコントラストです。明るい文字に暗いフチを付けるか、半透明の帯を敷きます。手書き風ならCaveat、見出し風ならAntonやBebas Neue(欧文)が向いています。
写真の上と下に文字を入れられますか?
はい。「+ テキスト枠」で枠を増やし、「上」「中央」「下」ボタンかドラッグで配置します。文字は常に写真の上に載り、白い余白は追加されません。
画質は落ちますか?
元の解像度で保存されます。PNGなら劣化なし、JPG・WebPは品質を調整でき、90%前後ならほとんど違いは分かりません。
フォントはSNSや広告に使えますか?
はい。用意したフォントはすべてSIL Open Font Licenseで、商用利用も可能です。作成した画像にライセンス上の制限はありません。
出典・根拠
- WHATWG HTML Living Standard – Canvas: drawing text (fillText, strokeText)
- W3C – WCAG 2.2, 1.4.3 Contrast (Minimum): 4.5:1, large text 3:1
- MDN – FontFace (CSS Font Loading API)
- SIL Open Font License 1.1 – official text
- Anton – SIL Open Font License 1.1 (Google Fonts, ofl/anton)
- Bebas Neue – SIL Open Font License 1.1 (Google Fonts, ofl/bebasneue)
- Bangers – SIL Open Font License 1.1 (Google Fonts, ofl/bangers)
- DM Serif Display – SIL Open Font License 1.1 (Google Fonts, ofl/dmserifdisplay)
- Pacifico – SIL Open Font License 1.1 (Google Fonts, ofl/pacifico)
- Caveat – SIL Open Font License 1.1 (Google Fonts, ofl/caveat)
- ITU-T T.81 / ISO/IEC 10918-1 – JPEG
- W3C – Portable Network Graphics (PNG) Specification
- Google for Developers – An image format for the Web (WebP)
- AOMedia – AV1 Image File Format (AVIF)
- MDN – Image file type and format guide
- MDN – HTMLCanvasElement.toBlob()
- Open-source licenses of the libraries used (MIT, LGPL-3.0)
更新日:
関連ツール
- 画像に透かしを入れる画像に文字やロゴの透かしを無料で入れられるサイトです。透明度・角度・9つの位置やタイル状の配置を調整し、最大20枚を一括加工。画像はアップロードされません。
- 写真加工サイト:オンライン写真編集ブラウザーで写真を加工。明るさ・コントラスト・彩度・色温度の調整、白黒やセピアのフィルター、回転や反転ができます。無料で原寸のまま、アップロード不要。
- 画像トリミング画像をアップロードせずにトリミングできる無料ツール。自由な範囲のほか、正方形1:1、4:3、16:9、9:16、InstagramやYouTube向けのサイズも選べます。スマホでも使えます。
- 写真コラージュ作成写真2〜9枚でコラージュを作成。11種類のレイアウト、Instagram投稿・ストーリーズ・10×15cmプリント向けのサイズ、余白と枠の色も選べます。無料でアップロード不要。
- 写真からステッカーを作成写真から背景を消し、白フチと文字を付けてステッカーに。WhatsApp用(512px WebP)やTelegram用で保存。アプリ不要、アップロードなし。
- BPM測定サイト:音声ファイルからBPMを測定曲のBPMを測定。音声ファイルを選ぶと、ブラウザー内でテンポを計算し、±の誤差、信頼度、半分・倍のテンポの候補まで表示します。無料でアップロード不要。