画像テキスト合成ツールを公開しました
InstagramやXの投稿画像、ブログのOGPサムネイル、販促バナー。こうした「写真＋テキスト」の画像を作るためにデザインツールを起動している方も多いのではないでしょうか。「画像テキスト合成」ツールはブラウザだけで複数のテキストやSVGを写真に重ね合わせ、PNG・JPEG・WebP・AVIFとしてダウンロードできるツールです。
マルチレイヤーで自由に重ねる
このツールの中心機能はレイヤー管理です。テキストレイヤーとSVGレイヤーをいくつでも追加でき、それぞれの位置・サイズ・順序を自由に調整できます。
| レイヤー種別 | 主な用途 |
|---|---|
| テキストレイヤー | キャプション・タイトル・コピー文言 |
| SVGレイヤー | ロゴ・アイコン・装飾パーツ |
各レイヤーには以下の操作ができます。
- 表示/非表示：目のアイコンで瞬時に切り替え
- ロック：誤って動かさないようにロック
- 重ね順変更：上へ・下へボタンでZ-index操作
- 削除：不要なレイヤーを削除
テキストレイヤーの設定項目
テキストレイヤーはデザインに関わる項目を幅広く設定できます。
基本設定
| 項目 | 内容 |
|---|---|
| フォント | 10種類（Noto Sans JP・Noto Serif JP・Poppins など） |
| フォントサイズ | 8〜200px スライダー |
| 太字・イタリック | 対応フォントで切り替え |
| 文字色 | カラーピッカー |
| テキスト配置 | 左・中央・右 |
位置・変形
- X・Y座標：ピクセル単位で数値指定
- 回転：0〜360度スライダー
- 透明度：0〜100%スライダー
文字間隔・行間
- 文字間隔（Letter Spacing）：ピクセル単位で調整
- 行間倍率（Line Height Factor）：1.0〜2.0で設定
ストローク（輪郭線）
- On/Offで切り替え
- ストローク色・太さ（0.5〜8px）を調整
シャドウ（影）
- On/Offで切り替え
- 影の色・ぼかし量・透明度・X/Yオフセットを個別に調整
テキスト背景
文字の後ろに半透明の背景矩形を表示できます。
- 背景色・透明度：カラーピッカー＋スライダー
- パディング X/Y：背景の余白をピクセルで調整
- 角丸半径：0〜32pxで丸みを調整
SNS向けクロッププリセット
出力サイズを主要SNSの規格に合わせてトリミングできます。
| プリセット | サイズ | 主な用途 |
|---|---|---|
| 元の比率 | オリジナルのまま | 用途を限定しない場合 |
| 1:1（正方形） | 1080×1080 px | Instagramフィード |
| 16:9（横長） | — | YouTube・ヘッダー |
| 9:16（縦長） | — | Instagram Stories・TikTok |
| 4:5 | — | Instagram縦フィード |
| OGP | 1200×630 px | ブログ・SNS共有画像 |
出力フォーマットと品質
| フォーマット | 特徴 |
|---|---|
| PNG | ロスレス・透明度対応 |
| JPEG | 品質調整可・ファイルサイズ小 |
| WebP | モダン・高圧縮率 |
| AVIF | 最新形式・最高圧縮率 |
JPEG・WebP・AVIFは品質スライダー（0〜100%）で細かく調整できます。
プロジェクトの保存と読み込み
作業中のレイヤー状態はLocalStorageに保存できます。ブラウザを閉じてもレイヤーの配置・テキスト内容・設定が保持されるため、翌日続きから作業を再開できます。
こんな方におすすめ
- Instagram・X・Facebookの投稿用画像を手軽に作りたい方
- ブログ記事のOGPサムネイルを毎回作成している方
- 販促バナーや告知画像をすばやく用意したい方
- デザインツールを持っていないが画像加工が必要な方