バナー作成ツール

Banner Maker の使い方

Banner Makerは、任意サイズのバナー画像をブラウザ上で作成できる画像編集アプリです。
文字、図形、画像などをレイヤーとして重ね、最終的に透過PNGとして保存できます。作成した内容はプロジェクトファイルとして保存し、後から編集を再開できます。

1. キャンバスを作成する

画面左側の「キャンバス」で、作成したいバナーの幅と高さをピクセル単位で入力します。

例：

• 横長バナー：450 × 60 px
• Web広告：300 × 250 px
• ヘッダー画像：1200 × 300 px

数値を入力した後、「サイズを適用」を押してください。
キャンバスの左上が座標 (0,0) です。キャンバス上へマウスを移動すると、現在のマウス位置がX・Y座標で表示されます。

2. 表示倍率を変更する

左側の「表示倍率」で、キャンバスの表示サイズを変更できます。
表示倍率は編集画面上の見た目だけに影響し、保存される画像サイズには影響しません。
中央の描画エリア上で、Ctrlキーを押しながらマウスホイールを回しても拡大・縮小できます。

3. ペイント部品を作成する

「ペイント部品」を押すと、図形や線を組み合わせた部品を作成する画面が開きます。

ペイント画面では、次のツールを使用できます。

• 選択
• フリーハンド
• 直線
• 四角
• 楕円
• 基本図形

基本図形には、次の種類があります。

• 角丸四角
• 三角
• 矢印
• 星
• 吹き出し
• バッジ

複数の図形を作成した後、「1レイヤーとして追加」を押すと、全体が1つのペイントレイヤーとしてメインキャンバスへ追加されます。

4. 四角や楕円を正確なサイズで作成する

図形を選択すると、左側に次の数値入力欄が表示されます。

• X
• Y
• 幅
• 高さ

X・Yは、ペイントキャンバス左上を基準とした図形の位置です。
数値を入力し、「位置・サイズを適用」を押すと、図形の位置とサイズを正確に調整できます。
入力欄でEnterキーを押しても適用できます。

5. 線と塗りを設定する

図形を選択した状態で、左側の設定を変更すると、選択中の図形へ反映されます。

設定できる項目は次のとおりです。

• 線色
• 線幅
• 線なし
• 塗り色
• グラデーション

「線なし」にチェックを入れると、四角、楕円、基本図形の輪郭線を非表示にできます。
直線とフリーハンドは、線そのものが部品になるため「線なし」の対象外です。

6. グラデーションを設定する

塗りの種類から、次の方式を選択できます。

• 単色
• 線形グラデーション
• 放射グラデーション
• 透明

グラデーションでは、次の項目を調整できます。

• 開始色
• 終了色
• グラデーション角度
• 繰り返し回数
• 開始位相

グラデーション角度

色が変化する方向を指定します。

• 0°：左から右
• 90°：上から下
• 180°：右から左
• 270°：下から上

繰り返し回数

開始色と終了色の変化を、図形内で何回繰り返すか指定します。
値を大きくすると、細かい帯状のグラデーションになります。

開始位相

グラデーションの色変化を、どの位置から始めるか指定します。

• 0°：開始色側から開始
• 90°：中間付近から開始
• 180°：終了色側から開始
• 270°：逆方向の中間付近から開始

7. 色を選択する

色欄をクリックすると、色選択画面が開きます。
次の方法で色を指定できます。

• カラーピッカー
• HEXカラーコード入力
• 過去に使用した色から選択

色を選んだ後、「OK」を押すと確定します。
確定した色は「ユーザー設定の色」として保存され、次回以降も使用できます。

8. 文字部品を作成する

「文字部品」を押すと、文字作成画面が開きます。
次の項目を設定できます。

• 文字内容
• フォント
• 文字サイズ
• 文字色
• 太字
• 斜体
• 文字揃え
• 縁取り
• 余白

設定後、「1レイヤーとして追加」を押すと、文字がメインキャンバスへ追加されます。
使用できるフォントは、利用中のパソコンやブラウザにインストールされているフォントによって異なります。
指定したフォントが存在しない場合は、代替フォントで表示されます。

9. 画像を追加する

「画像を追加」を押し、パソコン内の画像を選択します。
対応形式は次のとおりです。

• PNG
• JPEG
• WebP

追加した画像は、マウス操作で次の編集ができます。

• 移動
• 拡大・縮小
• 回転
• レイヤー順変更
• 不透明度変更
• シャドウ追加

SVG形式には対応していません。

10. 部品を選択・解除する

キャンバス上の部品をクリックすると選択できます。
選択中の部品には、周囲に操作用ハンドルが表示されます。
キャンバス外側の市松模様部分をクリックすると、選択状態を解除できます。

11. 部品の位置とサイズを数値で調整する

部品を選択すると、右側の「選択中の部品」に次の項目が表示されます。

• 名前
• X
• Y
• 幅
• 高さ
• 角度
• 不透明度

マウス操作だけでなく、数値入力によって正確な位置やサイズへ調整できます。

12. アスペクト比を固定する

「アスペクト比を固定」にチェックを入れると、縦横比を維持したまま拡大・縮小できます。
画像や文字の形を崩したくない場合に使用してください。
アスペクト比固定中は、幅または高さを変更すると、もう一方の値も自動的に調整されます。

13. エッジを付ける

選択中の部品に、縁取りや発光風の効果を付けられます。
「エッジ」で次の項目を設定します。

• 色
• 太さ

設定後、「エッジを適用」を押してください。
文字や図形の輪郭を目立たせたい場合に使用します。

14. シャドウを付ける

「シャドウ」で、部品に影を付けられます。
設定できる項目は次のとおりです。

• 色
• ぼかし
• 横位置
• 縦位置

「影を適用」を押すと反映されます。
影を消す場合は「影を解除」を押してください。

15. 画像の背景を透明化する

画像レイヤーを選択すると、「画像の外周透明化」が表示されます。
これは、画像の四辺からつながっている背景色を透明にする機能です。
次の項目を調整できます。

• 色差許容値
• 境界ぼかし

「外周を透明化」を押すと処理されます。
結果が適切でない場合は、「元画像に戻す」で復元できます。

注意点

被写体が画像端に接している場合や、背景色と被写体の色が近い場合は、被写体の一部まで透明になることがあります。
背景が単色に近い画像で使用すると効果的です。

16. レイヤーを操作する

画面右下の「レイヤー」には、作成した部品が一覧表示されます。
上にあるレイヤーほど、キャンバス上では手前に表示されます。
使用できる操作は次のとおりです。

• 最前面
• 前へ
• 後ろへ
• 最背面
• 表示・非表示
• 削除

レイヤー名をクリックすると、その部品を選択できます。

17. 部品を複製・削除する

部品を選択して、左側の編集ボタンを使用します。

• 複製：同じ部品をコピー
• 削除：選択中の部品を削除

キーボードのDeleteキーでも削除できます。

Ctrl + Dで複製できます。

18. 操作を元に戻す

左側の「元に戻す」「やり直す」を使用します。
ショートカットキーも利用できます。

• Ctrl + Z：元に戻す
• Ctrl + Shift + Z：やり直す

19. 文字・ペイント部品を再編集する

新版で作成した文字部品またはペイント部品を選択すると、右側に再編集ボタンが表示されます。

• 文字内容を再編集
• ペイント内容を再編集

再編集画面では、作成時の設定や図形を復元できます。
変更を確定しても、メインキャンバス上の次の状態は維持されます。

• 位置
• サイズ
• 回転
• 不透明度
• レイヤー順
• シャドウ

20. プロジェクトを保存する

「プロジェクト保存」を押すと、編集内容をJSON形式で保存できます。
プロジェクトファイルには、次の情報が含まれます。

• キャンバスサイズ
• レイヤー情報
• 文字設定
• ペイント図形
• 位置とサイズ
• 色やグラデーション
• シャドウなどの設定

作業を後日再開する場合は、PNGだけでなくプロジェクトファイルも保存してください。

21. プロジェクトを読み込む

「プロジェクト読込」を押し、保存したJSONファイルを選択します。
読み込みが完了すると、保存時の編集状態が復元されます。
不明な配布元から取得したプロジェクトファイルは、安全のため読み込まないでください。

22. PNG画像として保存する

編集が完了したら、「PNG保存」を押します。
キャンバスはアルファチャンネル付きPNGとして保存されます。
背景表示が「透明」の場合、透明部分はそのまま保持されます。
白背景や黒背景を指定している場合は、その背景色を含んだ画像として保存されます。

主なショートカットキー

操作	キー
元に戻す	Ctrl + Z
やり直す	Ctrl + Shift + Z
複製	Ctrl + D
削除	Delete
表示倍率変更	Ctrl + マウスホイール
色選択画面を閉じる	Esc

使用上の注意

• 大きな画像や多数のレイヤーを使用すると、ブラウザの動作が重くなることがあります。
• 編集内容は自動保存されません。定期的にプロジェクト保存を行ってください。
• ブラウザを閉じる前に、必要なPNGとプロジェクトファイルを保存してください。
• 本アプリは、利用者が明示的に選択した画像やプロジェクトファイルのみを読み込みます。
• 選択した画像や編集内容を外部サーバーへ送信する処理はありません。
• 今回バナーを作るためだけに作ったものですので、少々の不具合はあるかもしれませんが、お許し下さい

---

【免責事項】
本ツールは無保証で提供されます。利用による損害について開発者は一切の責任を負いません。
また、本ツールに関する個別のサポートやお問い合わせへの対応は行っておりません。
あらかじめご了承の上、自己責任でご利用ください。

こんなのが作れます