使い方
- ファイルを選択を押すか、画像を枠にドロップします。Ctrl+V で貼り付けることもできます。
- 文字に言葉を入力します。Enterで改行し、2つ目の文字の枠には文字を追加を押します。
- フォント、サイズ、文字の色、配置を設定します。文字が読みにくい場合は、縁取りか影を加えます。
- 画像の上で文字をドラッグして置くか、画像の左右の位置（%）と画像の上下の位置（%）を設定します。
- 保存の形式を選び、画像をダウンロードを押します。
フォント、縁取り、影
文字は、画像そのものの解像度で描かれます。文字のサイズは画像の短い辺に対する割合なので、同じ配置は小さな写真でも大きな写真でも同じに見えます。OnestとBricolageはこのサイトの書体です。そのほかのフォントは、お使いの端末にインストールされているもので、別の端末では違って見えることがあります。
縁取りは各文字の周りに描かれ、影は右下に落ちます。暗い色の細い縁取りは、明るい空を背景にした白い文字を読みやすくします。
写真の上で読みやすい文字
文字は、空、無地の壁、暗い帯のように静かな部分に置き、背景から目立つ色を選んでください。見出しには大きいサイズが合い、キャプションには、短い辺の4から8%程度で十分なことが多いです。
画像は端末の中にとどまります
画像を開き、文字を描き、ファイルを保存するまでの処理は、すべてブラウザの中で行われます。画像はアップロードされず、何も保存されません。
計算例：休日の写真のキャプション
4000 × 3000ピクセルの写真を選び、「イスタンブールの夏」と入力します。フォントはOnestのままで、サイズを8、文字の色を白、縁取りを文字サイズの6%で黒にします。原寸の画像では、フォントの大きさは240ピクセルで、短い辺3000ピクセルの8%です。
文字を空の下の部分にドラッグし、画像をダウンロードを押します。ファイルは4000 × 3000ピクセルの全体を保ったPNGで、名前の末尾は -文字 になります。
よくある質問
写真に文字を入れるとき、写真はアップロードされますか？
いいえ。画像は開かれ、文字が描かれ、ファイルが保存されるまで、すべてブラウザの中で行われます。ページを読み込んだ後にインターネット接続を切り、画像に文字を入れて確かめられます。
保存された画像は、なぜ元の写真と同じ大きさなのですか？
文字は写真自身の画素の上に、原寸の解像度で描かれるため、保存されたファイルは写真の幅と高さを保ちます。プレビューだけが画面に収まるように小さく表示されます。
どのフォントを使えますか？
このサイトの書体であるOnestとBricolageは、いつでも使えます。Arial、Georgia、Verdana、Courier New、Times New Romanはシステムのフォントです。お使いの端末にあればそれが使われ、なければブラウザが似たフォントを使います。
日本語の文字は、正しく描かれますか？
字形は選んだフォントに含まれる文字によって決まるため、日本語を入れるときは、保存前にプレビューで字形を確認してください。端末に日本語の書体がない場合は、別のフォントを選ぶと見やすくなることがあります。
文字の位置が、ドラッグした場所に留まらないのはなぜですか？
位置は文字の枠の基準点で、配置に応じて左、中央、右の端と、最初の行の上端になります。配置を変えると文字が動くので、変えた後に位置を確かめ直してください。
透明な背景で画像を保存できますか？
文字は写真に描かれ、写真は不透明なので、残すべき透明な部分はありません。PNGは画像を劣化させずに保存し、JPEGは小さなファイルになりますが、わずかに劣化して書き出されます。
出典
- MDN（英語）: CanvasRenderingContext2D.fillText()、文字の描画
- MDN（英語）: CanvasRenderingContext2D.shadowBlur、影の柔らかい縁
- MDN（英語）: CanvasRenderingContext2D.measureText()、各行の幅
数値と文章の最終確認日：2026年11月10日火曜日。