写真にテキストを追加する際の見え方を保つための完全ガイド手順解説

最終更新日：2026年7月17日

写真にテキストを追加するのは簡単に見えますが、スマホで表示されたとき、プラットフォームによって切り取られたとき、あるいはフィード内で他の画像と並んだときにこそ課題が生じます。実用的なアプローチは派手ではありません：余白のある場所を選び、コピーを短くまとめ、コントラストを確認し、最終的なサイズでエクスポートし、実際に表示される環境で結果をテストしてください。

クイックアンサー：写真にテキストをきれいに追加するには？

まず最終的な画像サイズを決定し、写真の落ち着いた部分に見出しと任意の詳細行を配置します。背景が複雑な場合は、テキストの背後に半透明のパネルまたは柔らかいシャドウを追加してください。1枚の画像をすべてのプラットフォームで使えるように無理をするのではなく、チャンネルごとにコピーをエクスポートしましょう。

サインアップ不要でブラウザですぐに使える無料ツールをお探しなら、Text on Photo が最速です — フォント、サイズ、色を選び、写真をクリックして行を配置し、そのままエクスポートできます。ほかにも Canva や Adobe Express などのビジュアルエディターが使えます。製品ラベル、セールバッジ、透かしを反復して作成する場合は、Photoshop actions、GIMP scripts、または Python の Pillow などのバッチ対応ツールを使いましょう。後でテキストを修正できるよう、元の写真はそのままにしておきます。

テキストを追加する前に準備すべきことは？

フォントではなく、出力先から始めましょう。正方形の Instagram 投稿、EC サイトの商品タイル、ブログのヒーダー、縦長のストーリーでは、切り取り方が異なります。キャンバスを選ぶ前にオーバーレイをデザインすると、見出しが端に近すぎたり、リサイズ後に読めなくなったりしがちです。

次の順序で進めてください：

1. 最終的なキャンバスサイズを決定する。
2. そのキャンバス用に写真を切り抜く。
3. 画像の中で最も余白のある場所を見つける。
4. 最短かつ意味のあるコピーを書く。
5. フォントファミリーは1つ、ウェイトは最大2つまで選ぶ。
6. 実際の背景上でコントラストを確認する。
7. 平坦化されたコピーをエクスポートする。
8. 編集可能なソースファイルを保管する。

写真にまだ切り抜きやサイズ調整が必要な場合は、それを先に行ってください。テキストを追加する前に同じ寸法にする必要がある画像のフォルダがある場合、バッチリサイズガイド が役立ちます。

画像にテキストを追加するにはどのツールを使うべき？

唯一絶対のベストツールはありません。正しい選択は、手作業で1枚の画像を作成するのか、反復可能なセットを生成するのかによって異なります。

店舗オーナーが40枚の商品写真に「新着」バッジを追加する場合、スクリプトや Photoshop action は時間を節約し、配置のばらつきを防ぎます。1枚の引用グラフィックを作成するクリエイターであれば、テンプレートエディターの方が速く、十分実用的です。

テキストが主に著作権表示である場合は、始める前に透かし追加ガイド をお読みください。透かしには異なる優先順位があります：画像の主要な被写体になることなく、カジュアルな再利用に耐えうるものであるべきです。

写真のテキストを読みやすく保つには？

可読性は主にコントラスト、サイズ、背景の制御にかかっています。Web Content Accessibility Guidelines ではテキストのコントラスト比が定義されており、通常のテキストには 4.5:1 のコントラスト比、大きなテキストには一般的なケースで 3:1 が求められます (W3C WCAG contrast guidance)。画像内のテキストは HTML テキストとは異なりますが、この比率は依然として実用的な目標値として有効です。

公開前に以下のチェックを行ってください：

• 明るいテキストは暗い領域に、暗いテキストは明るい領域に配置する。
• 写真が複雑な場合は、白文字の背後に 40-70% の濃度のオーバーレイを追加する。
• ソフトシャドウは装飾ではなく、エッジを分離するためだけに使用する。
• 小さなモバイル画像には細いスクリプトフォントを避ける。
• テキストが拡張できる程度の短い行長に保つ。
• デスクトップモニターだけでなく、スマホ幅でも画像をテストする。

ウェブページにおいては、画像に焼き込まれたテキストよりも、画像の上に配置した実際の HTML テキストの方が優れたケースが多いです。それは選択可能で、レスポンシブ対応し、支援技術でも利用できます。CSS オーバーレイを使用する場合は、MDN の text-shadow リファレンスがシャドウのレンダリング方法と、微妙なシャドウがエッジの分離をどのように改善するかを説明しています (MDN text-shadow)。

写真にテキストを配置する最適な場所は？

画像がテキストに余裕を与えている場所に配置しましょう。空の空、単色の壁、テーブル面、ぼかされた背景、暗い隅などが効果的です。顔、手、製品の詳細、食べ物、ロゴ、価格ラベルは通常、覆わずに残す必要があります。

ソーシャルメディア用画像では、メインの行を中央のセーフエリア内に収めてください。フィード、プレビュー、サムネイルでは側面や上部が切り取られる可能性があります。プラットフォーム固有のバージョンを作成する場合は、ソーシャルメディア画像サイズガイド などの専用リファレンスでサイズを確認してください。

最も安全な方法は、通常、画像の余白のある3分の1の領域に短い見出しを配置することです。写真に余白がない場合は、背景レイヤーの複製をぼかす、控えめなパネルを追加する、または別の写真を選ぶようにしてください。

写真に最適なテキストスタイルは？

思うよりも少ないスタイルに抑えましょう。太字の見出しと通常ウェイトの補助行を持つフォントファミリー1つだけで、ほとんどの画像オーバーレイに十分です。セリフ、スクリプト、コンデンスド ディスプレイフォントを混ぜると、完成したアセットではなくポスターのモックアップのように見えてしまいます。

おすすめの設定：

1. 小さなソーシャルグラフィックには太字のサンセリフ体を使用する。
2. デザインにラベルが必要でない限り、センテンスケースを使用する。
3. 大文字のテキストは短く保つ。
4. 写真に明確な境界線や被写体がある場合は左揃えを使用する。
5. 画像自体が対称の場合のみ中央揃えのテキストを使用する。
6. 大きな見出しには行間を少し狭く保つ。
7. アセットがステッカー、ミーム、サムネイルでない限り、輪郭線は避ける。
8. エディター上で必要以上に感じる余白よりも広く取る。

製品や EC サイト用の画像を準備する際、テキストがアイテムを隠すと写真の品質を損なうことがあります。製品最優先のレイアウトでは、このワークフローを AI 製品写真ガイド と組み合わせ、オーバーレイは小さなラベル、バンドル名、期間限定バッジのみに使用してください。

複数の写真に同じテキストを一括追加するには？

バッチオーバーレイが機能するのは、ソース画像が一貫している場合のみです。まずリサイズし、固定されたアンカーポイントを決定し、あふれないコピーを使用してください。ファイル名に基づくキャプション、SKU、著作権表示、価格バッジが適しています。単語長が変動する長い見出しは適しません。

左下ラベル用の小さな Pillow の例を以下に示します。画像はすでに同じサイズであると仮定しています：

from pathlib import Path
from PIL import Image, ImageDraw, ImageFont

input_dir = Path("photos")
output_dir = Path("with-text")
output_dir.mkdir(exist_ok=True)

font = ImageFont.truetype("Inter-Bold.ttf", 44)

for path in input_dir.glob("*.jpg"):
    image = Image.open(path).convert("RGBA")
    overlay = Image.new("RGBA", image.size, (0, 0, 0, 0))
    draw = ImageDraw.Draw(overlay)

    text = path.stem.replace("-", " ").title()
    draw.rounded_rectangle((48, image.height - 132, 560, image.height - 48), 18, fill=(0, 0, 0, 150))
    draw.text((72, image.height - 108), text, font=font, fill=(255, 255, 255, 255))

    result = Image.alpha_composite(image, overlay).convert("RGB")
    result.save(output_dir / path.name, quality=90)

バッチエクスポート後、結果を1回圧縮してください。画像圧縮詳細ガイド では、JPEG を繰り返し保存するとフォントのエッジがぼやける理由と、編集可能なマスターファイルを1つ保管すべき理由が説明されています。

写真のテキストをアマチュアっぽく見せるミスは？

ほとんどの問題は、テキストを追加するのが遅すぎるか、画像に収めようとするコピーが多すぎることが原因です。

実用的なテスト方法：画面から離れるか、画像をスマホ幅に縮小してください。見出しが2秒以内に読めない場合は、レイアウトを簡素化しましょう。

公開前の最終チェックリスト

画像をアップロードする前に、以下の最終チェックを行ってください：

• 写真は最終的な出力先に切り抜かれている。
• モバイルサイズで見出しが読み取れる。
• テキストが製品、顔、重要な詳細を覆っていない。
• コントラストが強すぎており、過剰なエフェクトがない。
• 余白が正方形、縦長、サムネイルの切り抜きに耐えている。
• 編集可能なソースファイルが保存されている。
• エクスポートされたファイルは1回のみ圧縮されている。
• ファイル名がアセットの内容を説明している。
• Alt テキストまたは周囲のページコピーが、画像に焼き込まれた重要な単語を繰り返している。
• 最終ページが画像 SEO チェックに合格している。

画像が検索トラフィックの一部を構成するページでは、SEO 用画像最適化チェックリスト を使用してください。検索エンジンや支援ツールは、画像に焼き込まれたテキストをページコピーとして確実に処理できないため、重要な名称、価格、コールトゥアクションを実際の HTML で近くに繰り返して記載してください。

例はどのように作成されましたか？

4つの図はすべて ImageMagick で作成した 1200 x 675 の WebP エクスポートとしてテストし、CDN にアップロードする前にローカルのファイル形式を確認しました。例は意図的にシンプルに作られています：レイアウトカバー1枚、コントラスト比較1枚、セーフゾーン切り抜きガイド1枚、バッチワークフロー図1枚です。

画像クレジット

• カバーおよび記事の図は、テキスト配置、コントラスト、切り抜き安全性、バッチオーバーレイワークフローを示すために、このガイド向けに ImageMagick で生成されました。

---