画像へ文字を入れるときは、最初に用途に合うキャンバスサイズを決め、背景との明暗差と十分な文字サイズを確保します。縁取りを加えて読みやすくし、プレビュー上で位置を調整してから、用途に合うPNG・WebP・JPG形式で保存しましょう。
インストール不要。ブラウザですぐに画像を処理できます。
画像から始める方法と空白キャンバスから始める方法
AllEditの文字入れツールは、手元の画像をそのままキャンバスとして使う方法と、用途別サイズの空白キャンバスを作ってから画像と文字を配置する方法に対応しています。写真へ短い説明を加える場合は画像から、SNS投稿やサムネイルを一から作る場合は空白キャンバスから始めると分かりやすくなります。
画像はファイル選択やドラッグ＆ドロップのほか、クリップボードからCtrl＋Vで貼り付けることもできます。空白キャンバスでは定番サイズを選ぶか、幅と高さを64～6000pxの範囲で指定できます。
| 開始方法 | 向いている作業 | キャンバスサイズ | 背景 |
|---|---|---|---|
| 画像を追加 | 写真への説明・タイトル追加 | 元画像と同じサイズ | 追加した画像 |
| プリセット | SNS投稿・サムネイル・カバー | 用途別の定番サイズ | 背景色または後から追加した画像 |
| カスタム | バナー・資料・指定サイズ画像 | 幅・高さを数値指定 | 背景色または後から追加した画像 |
用途に合ったキャンバスサイズを選ぶ
キャンバスの縦横比が投稿先と合っていないと、公開時に画像の端が切れたり、余白が付いたりすることがあります。最初に利用先を決め、その用途に近いプリセットを選びます。利用先の仕様は変更される場合があるため、重要な投稿では公開前に各サービスの最新案内も確認してください。
| プリセット | サイズ | 主な用途 |
|---|---|---|
| Instagram投稿 | 1080×1080 | 正方形の投稿画像 |
| X（Twitter）投稿 | 1200×675 | 横長の投稿画像 |
| YouTubeサムネイル | 1280×720 | 16:9のサムネイル |
| TikTok・ショート動画 | 1080×1920 | 9:16の縦長画像 |
| Instagramストーリー | 1080×1920 | 縦長のストーリー画像 |
| ロゴ・アプリアイコン | 1024×1024 | 正方形のデザイン |
投稿先によっては、プロフィール画像、操作ボタン、タイトル表示などが画像へ重なることがあります。見出しやロゴはキャンバスの端から余裕を取り、中央寄りの安全な範囲へ配置してください。
AllEditで画像に文字を入れる手順
- 01画像またはキャンバスを選ぶ
手元の画像を追加するか、用途別プリセット・カスタムサイズから空白キャンバスを作成します。
- 02文字を入力して書体を選ぶ
テキスト欄へ内容を入力し、ゴシック・明朝・丸ゴシック・等幅から雰囲気に合うフォント系統と太さを選びます。
- 03色・縁取り・位置を調整する
文字色、縁取り色と幅、不透明度、左右の揃え方を設定し、プレビュー上の文字をドラッグして配置します。
- 04形式と画質を選んで保存する
PNG・WebP・JPGから保存形式を選び、WebP・JPGでは画質も確認して完成画像を保存します。
フォントと太さを使い分ける
ゴシック体は小さな画面でも読みやすく、見出しやSNS投稿に使いやすい書体です。明朝体は落ち着いた印象を作りやすく、丸ゴシックは柔らかい雰囲気、等幅フォントはコードや数値を整えて見せたい場面に向いています。
AllEditでは標準・太字・極太を選べます。背景が細かい写真では太字以上を使い、文字の形が背景に埋もれないようにします。同じデザイン内で使うフォントと太さを増やしすぎず、見出しと補足の2段階程度に絞ると統一感が出ます。
- ✓短い見出しは太字・極太で目立たせる
- ✓長い説明文は標準または太字で読みやすくする
- ✓1枚の画像で使うフォント系統は1～2種類に絞る
- ✓数字を整列させたいときは等幅フォントを試す
- ✓端末によってシステムフォントの見た目が多少異なることを考慮する
写真の上でも文字を読みやすくするコツ
文字の読みやすさは、文字色そのものより背景との明暗差で大きく変わります。明るい背景には暗い文字、暗い背景には白や明るい文字を使い、背景の色が場所によって変わる写真では縁取りを加えます。
不透明度を下げると背景になじみますが、下げすぎると読みにくくなります。主見出しは不透明度を高く保ち、透かしや補足文字だけを控えめにするのが基本です。
- ✓白文字には黒や濃紺の縁取りを付ける
- ✓暗い文字には白い縁取りを付ける
- ✓小さな画面でも読める文字サイズにする
- ✓顔や商品など、写真の主役へ文字を重ねない
- ✓改行を使って1行を長くしすぎない
縁取りが太すぎると文字そのものがつぶれて見えます。まず細い縁取りから始め、背景と文字を分離できる最小限の幅へ調整してください。
文字の位置と複数レイヤーを調整する
キャンバス上の文字を直接ドラッグすると、見た目を確認しながら位置を変更できます。文字が重なって選びにくい場合は、左側のテキストレイヤー一覧から編集したい文字を選択します。
テキストレイヤーは複数追加できるため、見出し、補足、日付、出典などを別々に管理できます。役割ごとにレイヤーを分けると、文字色やサイズ、位置を後から変更しやすくなります。
- ✓見出しと補足文を別のレイヤーにする
- ✓文字はプレビュー上で直接ドラッグして移動する
- ✓左揃え・中央揃え・右揃えを内容に合わせて選ぶ
- ✓不要な文字は選択して削除する
- ✓背景画像は「覆う・全体表示・引き伸ばす」から合わせ方を選ぶ
背景画像をキャンバスに合わせて引き伸ばすと、元画像とキャンバスの縦横比が異なる場合に画像が歪みます。通常は「キャンバスを覆う」または「画像全体を表示」を利用してください。
PNG・WebP・JPGの保存形式を選ぶ
WebPとJPGでは保存画質を調整できます。文字の周囲ににじみが見える場合は画質を上げるか、PNG保存を試してください。保存後はファイルを開き直し、文字の欠け、位置、画質を確認します。
| 形式 | 向いている画像 | 特徴 |
|---|---|---|
| PNG | 文字・ロゴ・図形が中心の画像 | 輪郭を保ちやすいが容量が大きくなる場合がある |
| WebP | Web掲載・SNS投稿 | 画質と容量のバランスを調整しやすい |
| JPG | 写真を背景にした画像 | 幅広く利用でき、画質設定で容量を調整できる |
よくある質問
画像に複数の文字を追加できますか？
はい。テキストレイヤーを追加し、見出しや補足文を別々に編集できます。各レイヤーで文字、サイズ、色、縁取り、透明度、位置を変更できます。
文字をプレビュー上で直接移動できますか？
はい。キャンバス上の文字をドラッグして位置を変更できます。文字が重なっている場合は、左側のレイヤー一覧から対象を選択してください。
利用できるフォントは何ですか？
ゴシック、明朝、丸ゴシック、等幅の4系統から選べます。端末にあるシステムフォントを使用するため、OSや環境によって細かな見た目が異なる場合があります。
元画像と同じサイズで文字を入れられますか？
はい。最初の画面で画像を追加すると、その画像の幅と高さを使ってキャンバスが作成されます。空白キャンバスではプリセットまたはカスタムサイズを指定できます。
画像はサーバーへアップロードされますか？
選択した画像の読み込み、文字の描画、保存用画像の生成はブラウザ内で行われ、画像自体はAllEditのサーバーへアップロードされません。
この記事の内容を、AllEditで実際に試してみましょう。