タイリングパターン作成(画像を敷き詰めてシームレス素材に)

タイリングパターン作成ツールについて

イラストのワンポイント・アイコン・模様パーツなどのPNG画像を敷き詰めて、繰り返し使えるタイリングパターン画像を作る無料ツールです。生成されるタイルは、スタンプが端をまたぐ場合に反対側へ自動的に回り込む(ラップする)ため、上下左右に並べてもつなぎ目が出ないシームレスパターンになります。ペイントソフトのパターン素材、Webサイトやゲームの背景、総柄デザインのラフ作りなどにそのまま使えます。

配置方法は3種類。「整列(格子)」は指定した行数・列数のマス目に規則正しく並べます(レンガ状の半ずらしや交互90°回転にも対応)。「ランダムに散らす」は個数・大きさ・ばらつきを指定して自然に散布します。「手動配置」はプレビューをクリックして1つずつ自由な位置に置けます。複数の画像を読み込んだ場合は、どの位置にどの画像を使うかを「規則的(順番)」「ランダム」「手動選択(配置済みのスタンプをクリックして割当)」から選べます。

どの配置方法でも、置かれたスタンプは1つずつ手で調整できます。プレビュー上のスタンプをクリックして選ぶと、ドラッグで移動、スライダーで大きさと回転を変更、Deleteキーや「選択を削除」で間引きができます。回転スライダーは中央が0°で、左に動かすとマイナス方向(反時計回り)にも回せます。自動生成した整列やランダム散布をたたき台にして、気になる部分だけ手直しする使い方が可能です。加えた調整は「調整をリセット」でいつでも自動生成の状態に戻せます。

背景は未設定なら透過PNGとして出力されます。単色背景のほか、別の画像を背景に敷くこともでき、背景画像はタイル内でのタイリング数(横×縦の繰り返し数)を指定できます。当サイトのノイズ・フラクタル模様ジェネレーターでシームレス生成した模様を背景に使うと、質感のあるパターンが簡単に作れます。

ランダム配置・ランダム選択はシード値から決まるため、同じ画像・同じ設定・同じシードなら何度でも同じ結果を再現できます。処理はすべてお使いのブラウザ内(端末内)で完結し、画像がサーバーへ送信されることはありません。

使い方

1. パターンにしたいPNG画像をドロップ、またはクリックして選択します(複数可。Ctrl+Vでの貼り付けにも対応)。透過を活かすならPNGがおすすめです。
2. 「タイル幅」「タイル高さ」で1タイルの出力サイズを指定します(32〜2048px)。
3. 「配置」を選びます。整列なら行数・列数・大きさ・半ずらし・回転を、ランダムなら個数・大きさ・ばらつきを調整します。手動配置ではプレビューのクリックで1つずつ置いていきます。
4. 細かく整えたいときは「スタンプ調整」を使います。プレビュー上のスタンプをクリックして選ぶと、ドラッグで移動、スライダーで大きさ(タイル幅に対する比率)と回転(中央0°・左右にマイナス/プラス)を変更できます。Deleteキーまたは「選択を削除」で1つだけ消せます。整列・ランダムに加えた調整は「調整をリセット」で元に戻せます。
5. 複数画像を使う場合は「画像の選択」で使い分け方を選びます。「手動選択」では、サムネイルで使用画像を選んでから配置済みのスタンプをクリックすると、その画像に置き換わります(使用画像が未選択なら順番に切り替わります)。
6. 「背景」で透過・単色・画像を選びます。背景画像はタイリング数(横×縦)を指定して敷き詰められます。
7. 「2×2に並べて確認」でつなぎ目が出ていないかをチェックし、「PNGで保存」でダウンロードします。保存サイズで2×2〜4×4に並べた状態の画像も保存でき、「📋 コピー」でクリップボード経由でペイントソフトに直接貼り付けられます。

よくある質問

作ったパターン画像は商用利用できますか?

このツール自体が生成物に権利を主張することはなく、個人利用・商用利用とも自由です。ただし読み込んだ画像そのものの権利はその画像の規約に従います。ご自身で描いた画像や利用許諾のある素材をお使いください。

シームレス(つなぎ目なし)になる仕組みは?

タイルの端にかかったスタンプを、自動的に反対側の端にも描画しているためです。たとえば右端からはみ出した部分は左端に現れるので、タイルを横に並べたときに絵がぴったりつながります。ランダム散布や手動配置で端に置いても切れません。「2×2に並べて確認」をオンにすると、実際に4枚並べた状態でつなぎ目を確認できます。

PNG以外の画像も使えますか?

JPEGなどブラウザで表示できる画像形式なら読み込めます。ただし透過(背景が透明な部分)を持てるのはPNGなどに限られるため、モチーフを敷き詰めるパターンでは透過PNGの使用をおすすめします。JPEGは画像全体が四角形のまま配置されます。

同じパターンをもう一度作れますか?

はい。ランダムな配置・選択・回転はすべて「シード」欄の文字列から計算されるため、同じ画像を同じ順番で読み込み、同じ設定・同じシードにすれば同じ結果になります。シード欄横の「🎲」はシードを変えて別のバリエーションを試すボタンです。

「大きさ」の%は何に対する比率ですか?

「配置」欄の大きさは、整列(格子)ではマス目1つに対する比率(100%でマス目いっぱい、200%まで拡大でき隣と重なります)、ランダム散布ではタイルの幅に対する比率です。一方「スタンプ調整」欄の大きさは、配置方法にかかわらずタイルの幅に対する比率で、選んだスタンプ1つだけに効きます。画像はいずれも縦横比を保ったまま指定サイズに収まるよう縮小・拡大されます。

整列やランダムで置かれた絵を、1つだけ動かしたり消したりできますか?

できます。プレビュー上のスタンプをクリックすると選択状態(水色の点線)になり、そのままドラッグで移動、「スタンプ調整」のスライダーで大きさ・回転の変更、Deleteキーまたは「選択を削除」で削除ができます。自動生成のままでは単調な部分だけを手直しして仕上げる、といった使い方ができます。加えた調整は「調整をリセット」で一括して元に戻せます。

回転をマイナス方向(反時計回り)にもできますか?

はい。「スタンプ調整」の回転スライダーは中央が0°で、左に動かすと−180°まで(反時計回り)、右に動かすと+180°まで(時計回り)動かせます。スライダーをダブルクリックすると0°に戻ります。なお「整列(格子)」の中にある「回転」は全体に一括で効く設定(なし/交互に90°/ランダム)で、個々のスタンプの微調整は「スタンプ調整」側で行います。

手動で加えた調整や画像の割り当てが消えてしまいました

整列・ランダムでの調整と画像の割り当ては「何番目の位置か」に対して記憶されます。そのため行数・列数や個数を変えると位置の番号がずれて、意図しない結果になることがあります。「調整をリセット」でいったん自動生成の状態に戻せます。配置の数を決めてから手直しするのがおすすめです(手動配置で置いたスタンプはこの影響を受けません)。

背景のタイリング数とは何ですか?

背景に指定した画像を、タイル1枚の中で横×縦に何回繰り返して敷き詰めるかの設定です。たとえば2×2にすると背景画像が4枚敷かれた上にスタンプが乗ります。背景画像自体がシームレスであれば、出力パターンも背景ごとシームレスになります。

画像がぼやける・ギザギザになります

小さな画像を大きく拡大するとぼやけます。なるべく配置サイズと同等以上の解像度の画像をお使いください。また、タイルサイズを大きめ(1024pxなど)にして保存し、使用先で縮小すると綺麗に仕上がります。