このWEBサイトはInternetExplorerのサポートを終了しました。
GoogleChrome, Firefox, MicrosoftEdge など別のWEBブラウザを使用下さい。

画像結合ツール

2枚以上の画像を結合して1枚の画像ファイルにすることができます。出力解像度の指定や文字の挿入なども可能です。全ての処理をブラウザ上で行っているので、画像データがサーバーに送られることはなく個人情報も守られます。使い方を見る

使い方

結合する画像を入力する

最初に、結合する画像ファイルを読み込みます。読み込む方法は2種類あります。

  • 方法1. [画像追加]ボタンをボタンをクリックします。ファイル選択ダイアログが開くので読み込みたい画像ファイルを選択します。(PC/スマホ 両対応)
  • 方法2. ファイルエクスプローラなどから画像を選択し、ページ内にドラッグドロップします。(マウス操作時)

読み込んだファイルは下のリストに表示されます。画像ファイルは一度に複数を選択して読み込むことができます。使用デバイス、ブラウザによっては対応していないものもあります。対応ファイル形式はJPEG/PNG/GIF/WebP/BMPの5つです。

画像の並び替え

読み込んだ画像は任意の順番に並び変えることができます。画像をドラッグ(タッチ)して、移動したい場所までドラッグ移動(スワイプ)すると位置が入れ替わります。[ソート]ボタンは全ての画像をファイル名降順に並び替えるときに使用します。また、プレビューエリアからも実際の結合画像を見ながら画像の位置を入れ替えることができます。

画像の並び順は結合時に配置される位置に影響します。

画像の削除

読み込んだ画像を削除するには[全削除]ボタン、[使用削除]ボタンをクリックします。[使用削除]ボタンは結合に使用した画像のみを削除するボタンです。また、画像にマウスオーバー(タップ)したときに現れる×ボタンを押すことで個別に削除することもできます。

画像結合の出力設定を行う

何枚の画像を結合するか、出力する画像の縦横の解像度は何pxにするか、などの結合の条件を指定します。

パターン
結合する画像の枚数やレイアウトを選択します。赤い矢印は、その方向に向かって画像が配置されていくことを意味します。[N×N]の項目は任意の枚数の画像を横または縦に連続して結合するときに指定します。1行10列や6行3列といった画像の結合が可能です。また、[N×N]結合は、[制限]と[無制限]のタイプがあります。[制限]は指定した行数(列数)固定の結合になり、最大5×100の500枚までの結合が可能です。[無制限]は現在入力されている画像を最大数使用しての結合が可能です。[N×N]結合は、大量の画像数を使用することが可能ですが、メモリ不足によるフリーズの可能性があるので注意して下さい。
解像度
出力する画像の解像度(縦横の長さ)を指定します。[オリジナル]は各画像を拡大しない範囲で最大の解像度になります。[長辺]/[よこ]/[たて]は該当辺の解像度が指定値になるように縮小または拡大されます。
クロップ
入力画像の横縦比が違う際に、全ての画像の縦横比を揃えるための設定です。切り抜きは画像の中心を基準に行われます。[オリジナル]は切り抜きを行いません。[横と縦の比率を指定]は指定した横縦比で全画像を切り抜きます。[N枚目を基準]は指定枚数目の画像の横縦比で全画像を切り抜きます。
パディング
画像の上下左右に余白を設けます。この設定を使うことで画像周りを線で囲ったような効果をつけることもできます。余白の色は[背景色]の設定値が適用されます。
境界
画像と画像の間に、指定幅の間隔をとり、指定色で境界線を引きます。
クリップ
画像を指定の形でくり抜きます。[角丸め]は四つの角を曲線でまるめます。[楕円]は画像を楕円型でくり抜きます。[パス]は任意のパスで画像をくり抜きます(現在準備中)。くり抜かれた領域は、PNG形式で保存した場合のみ透過になり、JPEG/WebP形式の場合は白(#ffffff)で塗りつぶされます。
背景色
画像の背景色を指定します。この設定は、[パディング]または[境界]を設定している場合のみ効果があります。
プレビューの確認と保存

結合する画像が必要枚数入力されたとき、自動で画像の結合が行われ結果をプレビューで確認することができます。

プレビューのスケーリング

結合画像は、虫眼鏡アイコン横のバーを操作することで指定倍率で表示されます。[100%]は画像を縮小拡大しない実際のサイズになります。[Fit]はプレビューエリア内に収まるように画像が縮小表示されます。

画像の入れ替え

結合画像を見ながら画像の位置を入れ替えることができます。[画像入替]ボタンをONにして、入れ替えたい画像2つを選択することで画像の位置が入れ替わります。

オブジェクトの操作

プレビューエリアのオブジェクト(後述)はマウスドラッグ(スワイプ)で位置を移動することができます。また、ダブルクリック(ダブルタップ)することで編集パネルが開きます。

画像の保存

作成した画像を保存するには[保存]ボタンをクリックします。画像はブラウザソフトで設定された保存先ディレクトリに保存されます。保存先ディレクトリを変更する方法については各ブラウザソフトのヘルプを確認下さい。保存する際の画像形式や画像品質は後述の設定で変更します。

設定

[設定]ボタンを押すと、キャンバスの設定、保存設定を行うパネルが開きます。

保存画像形式はJPEG/WebP/PNGの3つに対応しています(WebPはGoogle ChromeとChromium版のEdgeのみ選択可能)。JPEG/WebPは画像の品質を50-100の範囲で指定できます。品質を上げるとファイル容量が増えますが、画質が上がります。下げるとその逆になります。通常は70~80くらいを指定するとバランスがよくなります。PNGはJPEGに比べファイル容量が数倍大きくなりますが、画質が劣化しません。

保存ファイル名のフォーマットを指定することができます。変数を使用することでファイル名に現在の日時や連番を自動で設定することができます。変数は {変数} の形で使用します。例えばフォーマットに「img_{width}x{height}」と指定すると「img_800x600」のように変換されます。フォーマットを空にした場合は、デフォルトのファイル名にはUnixtimeが使用されます。

変数 説明
name 1枚目のファイル名
year 現在の西暦
month 現在の月
day 現在の日
hour 現在の時間
minute 現在の分
second 現在の秒
q 画像品質
width 画像の幅
height 画像の高さ
index 連番(保存毎に+1される)

[保存時に毎回ファイル情報を入力する]にチェックを入れると、保存毎に、ファイル名、形式、品質を指定するパネルが開かれるようになります。

オブジェクトを追加する

必要に応じて、結合画像上にフレームや文字を描画することができます。

文字を追加する

[オブジェクト追加]-[文字]ボタンをクリックします。文字描画用パネルが開かれるので、設定を行い[OK]ボタンを押して完了させます。

作成したオブジェクトはオブジェクトリストとプレビューに追加されます。オブジェクトリストでは、結合画像の入力と同じように並び替えや削除を行うことができます。並び順は、オブジェクト同士が重なった際の表示優先順位になります。右側のオブジェクトが優先して前面に表示されます。

作成したオブジェクトを再編集する

オブジェクトリストのオブジェクトにマウスオーバー(タップ)すると操作メニューが現れます。メニューの歯車ボタンをクリックすると編集パネルが開くので作成済みのオブジェクトを再編集することができます。また、プレビューに表示されているオブジェクトをダブルクリック(ダブルタップ)することでも編集パネルが表示されます。

パネルの説明

文字オブジェクトパネルの説明
環境によってパネルの形状が異なります。

1.プレビューエリア
実際の表示を確認することができます。
2.設定種別選択タブ
設定種別を切り替えるためのタブです。文字についてと位置についての設定があります。
3.表示文字
作成する文字を入力します。
4.フォント名
フォント名をいくつかの候補から選択、もしくは直接入力で指定します。フォントがインストールされていない場合はデフォルトのフォントが適用されます。
5-6.太字/斜体
選択すると文字が太字(5)、文字が斜体(6)になります。
7.フォントカラー
文字の塗りの色を指定します。ボタンをクリックすると、新たに色選択パネルが開かれます。フォントカラーは単色だけでなくグラデーションカラーを使用することができます。
8.フォントサイズ
文字のサイズを指定します。
9.ライン高
1行の高さを%で指定します。フォントによって高さが枠からはみ出る場合があればここで調節して下さい。複数行の場合は行間のスペース指定になります。
10.揃え
複数行に、文字の揃え位置を指定します。
11-12.文字の縁取り
文字の縁取りの幅を指定します(11)。縁取りを使わない場合は0を指定します。縁取りの色を指定します(12)。
13-16.文字のシャドウ
影を左右方向にずらす距離(13)、上下方向にずらす距離(14)を指定します。マイナスの値も指定できます。影をぼかす距離を指定します(15)。影の色を指定します(16)。
17-18. オブジェクト配置位置
左の9マスのセルはオブジェクトを配置する基準位置を指定するためのものです。結合後の画像サイズに合わせて位置が自動設定されます。例えば、常に画像の右下にIDやURLをウォーターマークとして入れたいときは、右下を指定しておけば毎回レイヤの位置を調節する必要がなくなります。右のX,Yの数値入力欄は基準位置からのオフセット値(ずらす距離)を指定します。数値はマイナスの値も指定可能です。
プロファイル

現在の設定を保存したり、復元する機能です。よく使う設定を登録しておくことで、画像保存までの操作を短縮することができます。

[追加]ボタンを押すと、プロファイル名入力パネルが表示されます。任意の名前をつけて[OK]ボタンを押すと、現在の設定が保存されます。[開く]ボタンを押すと、保存してあるプロファイルがリスト表示されます。項目を選択すると設定が復元されます。[デフォルト]は設定を初期状態に戻すための項目です。

オブジェクトの画像のみ、ブラウザの容量制限上保存することができません。

ページ設定

表示設定のカスタマイズとショートカットキーの設定を行うことができます。

[メニューをタブ化する]を有効にするとプロファイル、入力、出力のメニューを1つのタブにまとめることができます。

[マウスオーバーでタブを開く]を有効にすると、タブ化されたメニューにマウスを乗せたときに自動でタブが開かれます。[メニューをタブ化する]が有効のときのみ効果があります。

[画像の保存]と[使用画像の削除]操作に任意のキーを割り当てることができます。既にブラウザに割り当てられているショートカットキーを設定した場合は両方の処理が発生しますので注意して下さい。

仕様

動作環境
デバイス PC・タブレット・スマートフォンで動作します。PC+マウスでの利用層をメインターゲットとして作っております。解像度の低いディスプレイや、タッチ操作では一部の機能に制限があったりUIが使いづらい箇所があります。
ブラウザ 最近の主要ブラウザ全般で動作します。InternetExplorerでは動作しません。定期的にブラウザのアップデートを行い極力最新版を使用するようにしてください。
最低解像度
Width:360 x Height:640
上記未満の解像度でもツールは動作しますがレイアウトが崩れてUI操作が不便になる箇所が発生します。
結合のタイミングについて

画像が入力されたとき、出力設定が変更されたときに自動で結合処理が行われます。

画像ファイルの個人情報について

画像作成の全ての処理はお使いのPCまたはスマートフォン内で行っています。画像情報がネットワーク上のサーバーに送信されることはなく、個人情報も保護されます。