ブログ
日本語

画像に文字入れ — フォント・フチ取り・複数行

ブラウザーで画像に装飾付きの複数行テキストを入れ、元の解像度で保存するツール

ブラウザー内で処理・アップロード不要

文字を入れる画像をここにドラッグ&ドロップ

JPG、PNG、WebP を1枚、50MB まで。コピーした画像は Ctrl+V(Mac は ⌘V)で貼り付けることもできます。画像がブラウザーの外に出ることはありません。

Enter で改行できます。自動改行をオンにすると、長い行は行の幅に合わせて折り返されます。

フォントはこのサイトから直接読み込みます(SIL Open Font License)。フォントにない文字は端末の標準フォントで描画します。

画像の横幅に対する割合です。

文字サイズに対する割合です。0 にするとフチなしになります。

行揃え

画像の横幅に対する割合です。これより長い行は次の行に送られます。

位置

プレビューをドラッグまたはタップして好きな場所に置くこともできます。プレビューを選択して方向キーを押すと 1% ずつ(Shift を押しながらだと 5% ずつ)動かせます。スクリーンリーダーをお使いの場合は、先にフォーカスモード(NVDA では Insert+Space)に切り替えてから方向キーを押してください。

保存形式

元の解像度で保存します。PNG は画質の劣化がなく、JPG は品質92で保存します。ファイル名の末尾に -text が付きます。

描き直して保存するため、元の画像の EXIF(撮影機器・日時・GPS 位置)は保存されず、写真の向きは反映されます。画像がサーバーにアップロードされることはありません。

どんなツール?

画像に文字をのせて、そのまま画像として保存できるシンプルなツールです。メニュー写真に値段を書く、イベント写真にタイトルを入れる、ブログのアイキャッチに見出しを入れる、といった用途に使えます。入力した改行はそのまま残り、長い行は自動で折り返せます。内蔵フォントは韓国語とラテン文字をきれいに表示でき、フォントにない文字は端末のフォントで描画します。

使い方

  1. 点線の枠に画像をドラッグ&ドロップするか、画像を選択を押します。
  2. 入れる文字に文章を入力します。Enter で改行できます。
  3. フォント、文字サイズ、文字の色、フチの色とフチの太さ、影、行揃えを選びます。長い文は自動改行と行の幅で整えます。
  4. 位置の9つのボタンで配置するか、プレビュー上でドラッグして動かします。
  5. PNG か JPG を選んで画像を保存を押します。

しくみ

  • 相対サイズ:文字サイズは画像の横幅の1〜40%、フチは文字サイズの0〜30%、行の幅は画像の横幅の20〜100%です。そのため、元のサイズのファイルもプレビューと同じ見た目になります。
  • 改行:行はスペースの位置で折り返します。中国語・日本語やスペースのない長い URL は文字と文字の間で折り返し、家族や国旗などの組み合わせ絵文字は途中で分割しません。
  • 位置:9つの位置は短辺の3%の余白を取ります。ドラッグで置いた場合も、文字のまとまりが画像からはみ出すことはありません。
  • 保存:PNG は劣化なし、JPG は品質92です。ファイル名に -text が付き、元の EXIF 情報は引き継ぎません。

設定例

用途 設定
メニュー写真の値段 極太見出し、サイズ7%、白い文字、黒いフチ12%、中央下
ブログのアイキャッチの見出し ゴシック体、サイズ9%、半透明のボックスあり、中央、行の幅80%
手書き風のカード 手書き風、サイズ10%、フチ0%、影あり

上下に文字を入れる定番のコラ画像ならミーム作成ツールを、たくさんの写真に同じ文字を入れたいときは透かしツールをお使いください。

よくある質問

写真の上だと文字が読みにくいです。

フチの太さを10〜15%に上げ、白い文字に黒いフチのように文字色と反対の色をフチに使うと、ほとんどの背景で読みやすくなります。背景がごちゃごちゃしている写真では「文字の後ろに半透明のボックス」をオンにしてみてください。

保存した画像はプレビューと同じですか?

同じです。文字サイズ、フチ、行の幅、位置はすべて画像サイズに対する割合で計算し、プレビューと保存ファイルは同じコードで描画します。プレビューは画面に合わせて縮小表示しているだけで、保存は元の解像度で行います。

どんなフォントが使えますか?

ゴシック体(Pretendard)、極太見出し、明朝体、手書き風、筆文字の5種類です。すべて SIL Open Font License のフォントなので、作った画像は商用にも使えます。フォントにない文字は端末のフォントで描画します。

文字の位置を細かく調整したいです。

9つの位置ボタンで大まかな場所を決めてから、プレビューをドラッグまたはタップします。プレビューを選択した状態で方向キーを押すと 1% ずつ、Shift を押しながらだと 5% ずつ動きます。

画像はアップロードされますか?

いいえ。文字の描画も保存もブラウザーの中で行います。

ほしいツールはありますか?