写真に文字を入れる

写真に文字入れするには、写真を選んで文字を入力し、好きな位置へドラッグするだけ。複数の文字を入れられ、フチ取りや帯で読みやすくできます。画像はお使いの端末から出ません。

出典:WHATWG HTML Living Standard – Canvas: drawing text (fillText, strokeText)。更新日:

ここにファイルをドラッグ&ドロップ または

画像1枚(JPG、PNG、WebP、HEICなど)、最大50 MB

ヒント:画像はCtrl+Vで貼り付けることもできます。

ファイルはブラウザー内だけで処理され、アップロードされません。お使いの端末の外に出ることはありません。

すばやく配置

文字入り写真

写真を選ぶと、ここに文字入りのプレビューが表示されます。

    マイツールボックス

    結果

    計算方法

    要点:このツールは、ブラウザ上で写真に文字を入れます。フォント・色・フチ取り・影・背景の帯を自由に選べ、元の写真と同じ解像度で保存されます。写真が端末の外に送られることはありません。

    使い方

    1. 写真をドラッグするか選択、またはCtrl+Vで貼り付けます。
    2. 文字を入力します。Enterで改行でき、長すぎる行は画像の幅の90%で自動的に折り返します。
    3. フォント・サイズ・色を選びます。背景がごちゃごちゃしている写真では、フチ取りか背景の帯をオンにすると読みやすくなります。
    4. 文字を好きな位置へドラッグします。「+ テキスト枠」で上下など複数の文字を追加できます。
    5. 「写真を保存」を押すと、JPG・PNG・WebPで保存できます。

    フチ取りと帯が効く理由

    明るい空に白い文字、暗い服に黒い文字は読みにくくなります。Webアクセシビリティの指針WCAG 2.2では、通常の文字で4.5:1以上、大きな文字で3:1以上のコントラスト比が求められています。写真は場所によって背景の明るさが変わるため、明るい文字に暗いフチを付けたり半透明の帯を敷いたりすると、どこでもコントラストを保てます。描画にはHTML標準のcanvas関数strokeTextとfillTextを使い、先にフチ、その上に文字を塗っています。

    欧文フォントはすべてSIL Open Font License 1.1で、このサーバーに置いてあり、選んだときにだけ読み込まれます。日本語の文字は端末のシステムフォント(ゴシック・明朝)で描かれます。サイズは画像の幅に対する割合で扱うので、保存した写真はプレビューとまったく同じ見た目になります。

    できないこと

    プライバシー

    写真と文字はブラウザの中だけで処理され、アップロードされません。入力した文字も保存されません。

    よくある質問

    写真に無料で文字入れするには?

    ここに写真をドラッグし、文字を入力して位置を決め、「写真を保存」を押すだけです。スマホでもパソコンでも、アプリや登録なしで使えます。

    iPhoneで写真に文字を入れるには?

    Safariでこのページを開き、「ファイルを選択」から写真ライブラリの写真を選びます。保存後に「写真に保存」を選ぶと写真アプリに戻せます。写真アプリの「編集→マークアップ」にも簡単なテキスト機能があります。

    おしゃれで読みやすい文字入れのコツは?

    ポイントはコントラストです。明るい文字に暗いフチを付けるか、半透明の帯を敷きます。手書き風ならCaveat、見出し風ならAntonやBebas Neue(欧文)が向いています。

    写真の上と下に文字を入れられますか?

    はい。「+ テキスト枠」で枠を増やし、「上」「中央」「下」ボタンかドラッグで配置します。文字は常に写真の上に載り、白い余白は追加されません。

    画質は落ちますか?

    元の解像度で保存されます。PNGなら劣化なし、JPG・WebPは品質を調整でき、90%前後ならほとんど違いは分かりません。

    フォントはSNSや広告に使えますか?

    はい。用意したフォントはすべてSIL Open Font Licenseで、商用利用も可能です。作成した画像にライセンス上の制限はありません。

    出典・根拠

    更新日:

    関連ツール