オンラインで画像にテキストを追加

カスタムフォント、サイズ、色、位置で画像にテキストを追加します。

テキスト追加の機能

テキスト追加は、サーバーに何かを送信するのではなく、ブラウザ内のキャンバス描画を使って、画像のピクセルに直接テキストレイヤーを描きます。テキスト内容に入力したものは、選んだフォント、フォントサイズ、色でレンダリングされ、画像の左上隅を基準にしたピクセル単位のオフセットである水平位置と垂直位置で配置されます。影のトグルをオンにすると、文字の背後に固定のドロップシャドウが落ち、背後の領域が写真やグラデーション、単色よりも複雑な何かであっても、テキストが背景に溶け込まず読みやすいまま保たれます。 このツールがやらないことも知っておく価値があります。自動的な折り返しはないため、大きなフォントサイズで長い文字列を入力すると、新しい行に折り返されるのではなくキャンバスの端をはみ出します。改行はテキスト内容の中で自分で入れる必要があります。回転のコントロールもないため、テキストは常に水平に配置され、文字単位や単語単位でのスタイル指定もありません。文字列全体が1つのフォント、1つの色、1つのサイズ、1つの影の状態を共有します。書き出すとテキストは画像のピクセルに統合され、あとで開き直して再スタイルできる独立した可動レイヤーとしては保持されません。そのため、書き出す前のプレビューで見えているものが、そのあと固定される最終形です。

テキスト追加を使う場面

汎用のキャプションバーではなく、その言葉がどう見えてどこに置かれるかを正確にコントロールしたいときに、写真の上に文字を載せるためのツールです。ミーム風の画像が分かりやすい例です。太字のテキストを上端や下端近くに固定し、影をオンにしておけば、下の写真で何が起きていても確実に読めます。SNS投稿用の引用グラフィックも同じ考え方です。背景写真を選び、引用文をオーバーレイし、複雑なディテールを避けるまで水平位置と垂直位置を調整して書き出します。 もっと控えめで実用的な用途にも使えます。写真を共有する前に隅に小さなクレジットや帰属表示の1行を入れる、商品写真にサイズや価格をラベルとして付ける、ハウツーガイド用にスクリーンショットに指示のキャプションを注釈として入れる、といった作業です。これらのどのケースでも価値があるのは影の機能です。写真にはテキストを載せられるきれいな平坦な領域がめったになく、夕焼けのグラデーションや柄のある布地、散らかった机の写真の上に単色のテキストをそのまま置くと、上に読みやすく載るのではなく画像の中に紛れてしまいがちです。

影を使って複雑・低コントラストな背景の上でも読みやすいキャプションに
水平位置と垂直位置でピクセル単位の正確な配置
完全にクライアントサイドで動作し、プレビューや調整中にアップロードは発生しない
ミーム、引用グラフィック、クレジット表記、スクリーンショットのキャプションを1つのツールでカバー

画像にテキストを追加する方法

すべての項目はブラウザ内でプレビューにリアルタイムで反映されるため、書き出す前にテキストがどう配置されるか正確に確認できます。

1

キャプションや引用、クレジット表記をテキスト内容に入力します。長いテキストは自動で折り返されないため、2行目が必要な場合は自分で改行を入れてください

2

フォントを選び、画像の解像度に見合ったフォントサイズを設定します。大きな元写真ほど、フルサイズで読みやすくするにはより大きなフォントサイズが必要です

3

テキストの背後にあるものとコントラストのつく色を選び、背後が写真やグラデーションなど単色以外のものであれば影をオンにします

4

水平位置と垂直位置を設定してテキストを正確に配置したい場所に置き、背景の中で最も複雑な部分と重ならないか確認してから書き出します

よくある質問

テキスト追加は、テキストをキャンバスに合わせて自動で折り返したり自動で縮小したりしないため、長い文字列と大きなフォントサイズの組み合わせは左右の端を越えて伸び、書き出し時に切り取られることがあります。テキスト内容の中で自分で改行を入れて短い行に分けるか、文字列が枠の中に無理なく収まるまでフォントサイズを下げてください。回転のコントロールもないため、すべて厳密に水平にレンダリングされます。読みにくくなるまでフォントを縮めるより、長い1行を2行に分ける方が確実な対処法です。
テキスト追加は、その1枚の写真専用に、フォント、色、サイズ、正確な水平・垂直位置まで完全に手動でコントロールしながら、1枚の画像に1つのキャプションを配置するのに適しています。透かしツールは、テキスト追加にはないタイル配置や不透明度の処理を伴いながら、同じマークを多数の画像に一貫して適用するために作られています。1つの引用グラフィックや1回限りのキャプションをスタンプするならテキスト追加を、写真のバッチ全体を同じ方法でブランド化するなら透かしツールを使ってください。
どちらも画像の左上隅を基準にしたピクセルのオフセットです。0/0はテキストを左上隅に固定し、どちらかの値を増やすと右または下にスライドします。有効な値はおおよそ0から画像の幅・高さのピクセル数までで、それを超えるとテキストは表示可能なキャンバスの外にはみ出します。パーセント指定のグリッドではなく画像自身のピクセル寸法に結び付いているため、同じ数値の位置でも4000pxの写真と400pxのサムネイルでは相対的な位置が変わります。リサイズ後は配置を再確認してください。
いいえ。テキスト追加は完全にクライアントサイドで動作します。フォントのレンダリング、色の合成、位置決めはすべてサーバーではなくブラウザのキャンバス内で行われます。編集中に画像が送信されることはなく、ページを一度読み込んでしまえばインターネット接続なしでも動作を続け、その後もどこかにサーバー側のコピーが残ることはありません。
テキスト内容は複数行の入力を受け付けるため、自分で改行を入れれば1行目にキャプション、2行目にクレジットや日付を置くことができます。ただし独立したフォント、色、位置を持つ2つ目のテキストブロックは用意できません。テキスト内容に入力したものはすべて1つのスタイルと1つの水平・垂直位置を共有します。まったく異なるスタイルの2つのキャプションが必要な場合は、テキスト追加を一度適用して書き出し、その結果に対してもう一度実行してください。
影は単一のトグルであり、独自の色やぼかし、オフセットを持つパネルではありません。オンにすると一貫した1種類のドロップシャドウがテキストの背後に適用されます。これは特に、グラデーションの空やテクスチャのある壁のような複雑・低コントラストな背景からテキストを分離するためのものです。単色のテキストだけでは背景に溶け込んでしまう場面を想定しています。既定の影よりも強い分離が必要な場合、主な手段はテキスト自体に、もともと十分コントラストのある色を選ぶことです。影自体の見た目はカスタマイズできません。
文字のスタイルは、フォントのドロップダウンで選んだオプションだけで決まります。上に重ねる独立した太字・斜体のトグルはなく、自分のフォントファイルを読み込むオプションもありません。太字や斜体のテキストが欲しい場合は、リストの中からすでにそのスタイルになっているファミリーを選んでください。書式のスイッチで見た目だけ真似ることはできません。フォントサイズと色は、どのファミリーを選んでも引き続き自由に調整できます。
テキスト追加はJPGやPNGといった標準的な写真形式に対応しており、書き出されるファイルは読み込んだときと同じ形式を保ちます。JPGはJPGのままで、テキストはピクセルに焼き込まれ、独立した編集可能なレイヤーとして保存されるわけではありません。書き出し時にテキストが画像に統合されるため、あとから戻ってきて元の手を加えていない写真からやり直すことなく、位置やスタイルを変更することはできません。あとで別のキャプションを試したくなりそうな場合は、元画像を安全な場所に保管しておいてください。

その他の画像ツール

画像編集のニーズに応える他の強力なツールをご覧ください

画像圧縮

サイズ縮小

サイズ変更

寸法変更

画像切り抜き

領域を切り取る

形式変換

形式を変更

フォトエディター

写真を編集

画像回転

画像を回転

画像反転

水平/垂直反転

透かしを追加

透かし

枠線追加

画像枠線を追加

角丸

角丸を追加

フィルター

明るさ/コントラスト

顔をぼかす

顔を隠す

モザイク

領域をぼかす

背景削除

背景を削除

画質向上

AI拡大

コラージュ

複数の画像を結合

HTMLから画像

Webを画像に

GIF からシーケンス

フレーム抽出

画像の余白を削除

空白の縁を削除

画像を一括リネーム

ファイル名を安全に一括変更

円形切り抜き

画像を円形に切り抜き

白黒

画像をグレースケールに変換

画像分割

画像をグリッドに分割

画像結合

画像を1つに結合

DPI変更

画像のDPIメタデータを設定

画像→Base64

画像をBase64にエンコード

画像をPDFに結合

複数の画像を1つのPDFにまとめる

HEIC→JPG

iPhoneのHEIC写真をJPGに変換

EXIF除去ツール

GPS位置情報を含む写真の隠しメタデータを表示・除去

ファビコン ジェネレーター

完全なアイコンセットとHTML

カラーパレット

画像から色を抽出

Base64→画像

Base64をデコードして画像に戻す

HEIC→PNG

iPhoneのHEIC写真をロスレスでPNGに変換

文字を被写体の後ろに

写真の被写体の後ろに文字を回り込ませる。すべてブラウザ内で完結

カラーピッカー

任意のピクセルのHEX・RGB・HSLを取得

署名メーカー

署名を手書きして透過PNGでダウンロード

署名の背景削除

紙の上のインクを透過に

背景透過ツール

背景を透明にする