画像に文字入れ — フォント・フチ取り・複数行
ブラウザーで画像に装飾付きの複数行テキストを入れ、元の解像度で保存するツール
ブラウザー内で処理・アップロード不要
文字を入れる画像をここにドラッグ&ドロップ
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 位置)は保存されず、写真の向きは反映されます。画像がサーバーにアップロードされることはありません。
どんなツール?
画像に文字をのせて、そのまま画像として保存できるシンプルなツールです。メニュー写真に値段を書く、イベント写真にタイトルを入れる、ブログのアイキャッチに見出しを入れる、といった用途に使えます。入力した改行はそのまま残り、長い行は自動で折り返せます。内蔵フォントは韓国語とラテン文字をきれいに表示でき、フォントにない文字は端末のフォントで描画します。
使い方
- 点線の枠に画像をドラッグ&ドロップするか、画像を選択を押します。
- 入れる文字に文章を入力します。Enter で改行できます。
- フォント、文字サイズ、文字の色、フチの色とフチの太さ、影、行揃えを選びます。長い文は自動改行と行の幅で整えます。
- 位置の9つのボタンで配置するか、プレビュー上でドラッグして動かします。
- 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% ずつ動きます。
画像はアップロードされますか?
いいえ。文字の描画も保存もブラウザーの中で行います。