自分の素材でバナーを作る
背景色、任意の画像、移動できるテキストレイヤーを組み合わせてPNGを作ります。サイトの見出し、お知らせ、簡単な告知画像、指定サイズのグラフィックに使えます。画像の自動生成、SNSへの投稿、テンプレート販売などは行いません。入力した画像と文章はブラウザー内で処理します。
プリセットを選ぶか幅と高さを直接入力し、背景色と必要なら端末内の画像を選びます。「テキストを追加」で空のレイヤーを作り、一覧で選んで文章を入力します。フォント、サイズ、色、揃え方、位置を調整するとプレビューが更新されます。すべて収まれば、指定のピクセル寸法で現在のデザインをPNG保存できます。
テキストを欠けずに配置する
XとYはテキスト枠の左上の位置で、出力画像のピクセル単位です。枠の幅が折り返し位置を決め、文字揃えはキャンバス全体ではなく枠の中に適用されます。プレビューで枠をドラッグするか数値で正確に配置してください。キーボードで枠にフォーカスし、Enterで選択、矢印キーで移動もできます。Shiftを押すと10pxずつ動きます。
属性を変える前にレイヤーを選びます。前面へ・背面へは隣のテキストレイヤーとの順序を1つ変えます。一覧の最後のレイヤーが最前面です。削除は選択中のレイヤーだけを消します。元に戻す・やり直すは最初の操作にも対応し、同じ欄への短時間の入力をまとめます。文字入力欄の通常の編集操作はそのまま使えます。履歴は現在のページセッションだけに残ります。
試せる2つの例
横長のお知らせなら1200×400、白背景を選びます。濃い色の見出しをX 96、Y 80、枠幅1008、文字サイズ64で追加し、「地域のオープンデー」のような短文を入れます。日時や会場は別レイヤーにして小さめの文字で下へ置きます。プレビューが小さく表示されても、保存画像は正確に1200×400pxです。
小さな画像なら300×250を選び、背景写真を追加します。画像全体の表示は端を残し、切り抜きはキャンバスを満たしてはみ出す部分を除きます。サイズ32の短文を追加し、周囲に余裕を残します。横長デザインを縮めても既存の文字位置は自動拡縮しません。保存前に各レイヤーを移動・縮小してください。
出力と上限について
プレビューとPNGは同じキャンバス描画を使います。選択枠や編集ボタンは別要素なので保存画像には入りません。PNGは1枚の画像です。再読み込みしても文字が個別の編集レイヤーに戻ることはありません。背景は常に選択した色で塗ります。文字のない単色バナーも有効で、空のテキストレイヤーは何も描きません。
各辺64〜4096pxの整数、合計1600万画素まで使えます。最大20レイヤー、1レイヤー1,000文字です。複合文字を途中で分割せずに折り返し、長い単語は次の行へ続きます。文章を勝手に短くしません。収まらないレイヤー番号を表示し、文字サイズ・枠幅・位置を直すまでPNG保存を無効にします。
PNG保存が無効なのはなぜ？
サイズが不正、画像の読み込み中、またはテキストがキャンバスの外にある場合です。メッセージにあるレイヤーを選んで修正してください。折り返しが多い場合は文字を小さくするか、Yを小さくして上へ移す必要があります。以前のデザインを最新の結果として保存することはありません。
対応する画像とフォントは？
静止JPG・PNG・WebP、最大5 MiB、各辺8192px、合計1600万画素に対応します。SVGとアニメーションは受け付けません。画像の置き換えに失敗しても以前の背景を保持します。フォントは端末の標準ゴシック・明朝・等幅を使うため、OSによって字形が変わります。外部フォントのダウンロードは不要です。
どのサービスにもそのまま使えますか？
プリセットは便利なピクセルサイズであり、各サービスの最新アップロード制限、安全領域、モバイルの切り抜きを保証しません。出力先の条件を先に確認し、重要な文字を端に寄せすぎないようにしてください。PNG保存のみで、アップロードや公開は行いません。
作業を残すには？
完成したらPNGを保存してください。編集可能なプロジェクトの保存や、ページを閉じた後の自動復元には対応しません。未保存の変更があるまま移動・言語切り替えをすると警告するので、取り消して保存に戻れます。ダウンロード後も編集を続けて別のPNGを保存できます。元画像ファイルは変更しません。