Seamless Pattern Maker：タイルと繰り返しパターン

Seamless Pattern Maker とは？

Seamless Pattern Maker は1枚のタイル画像を取り込み、設定可能なキャンバスに描画してシームレスなタイリングパターンをプレビュー・エクスポートするツールです。スケール、回転、ギャップ間隔を調整し、4つのタイリングモード（通常グリッド、ハーフブリックオフセット、ダイアゴナル、ミラー）から選択することで、タイルが繰り返されたときの見た目を正確に確認できます。確認後は大きなPNG画像としてエクスポートするか、すぐに使えるCSS background-image スニペットをコピーできます。すべての処理はブラウザ内でローカルに完結し、サーバーへのファイルアップロードは一切ありません。

主な機能

• ドラッグ＆ドロップまたはクリックでタイル画像をアップロード: アップロードエリアはドラッグ＆ドロップとクリックによるファイル選択の両方に対応。10 MBを超えるファイルはエラーメッセージとともに拒否されます。読み込んだタイルのサイズはプレビューサムネイルの下に表示されます。
• リアルタイムシームレスタイリングプレビュー: 設定を変更するたびにキャンバスが即座に再描画されます。プレビューエリア全体を埋めるのに十分なタイルが描画され、回転のオーバーフローを補うための余分なタイルも含まれます。
• タイルスケール（5%〜400%）: 5%刻みのレンジスライダーでタイルを元のピクセルサイズに対して拡大・縮小できます。100%でネイティブサイズでの描画となります。
• 回転コントロール（0〜360度）: 描画前に各タイルをその中心点を軸に回転させます。どのタイリングモードとも組み合わせ可能です。
• タイル間のギャップ間隔: -50〜50pxのスライダーで間隔を調整します。正の値はタイル間に背景色で埋められたスペースを追加し、負の値はタイルを重ね合わせてレイヤー効果を生み出します。
• 4つのタイリングモード: 通常 — オフセットなしの標準グリッド。ハーフブリック — 奇数行がタイル幅の半分ずつオフセットされる、レンガ積みのようなレイアウト。ハーフドロップ — 奇数列がタイル高さの半分ずつ下にオフセットされる、縦方向のスタガーパターン。ミラー — 交互の列が水平反転され、交互の行が垂直反転されることで万華鏡のような対称性が生まれます。
• キャンバスサイズの設定: 幅と高さは100〜4096ピクセルで設定可能です。プレビューキャンバスとエクスポートされるPNGはこの寸法で描画されます。
• PNGエクスポート: 描画済みキャンバスを pattern-[幅]x[高さ].png としてダウンロードします。
• CSSバックグラウンドスニペットのコピー: 単一タイルのキャンバスを生成し、background-image、background-repeat、background-size の3つのCSS プロパティをクリップボードにコピーします。

Seamless Pattern Maker の使い方

ステップ1: タイル画像をアップロードする

アップロードエリアに画像ファイルをドラッグするか、クリックしてファイルを選択します。ブラウザがネイティブサポートする画像フォーマットであれば何でも使用できます。タイルの寸法はサムネイルの下に表示されます（例: 「64 x 64px」）。10 MBを超えるファイルをアップロードすると、「ファイルが大きすぎます」というエラーが表示されて拒否されます。アップロードが成功すると、プレビューキャンバスがすぐにデフォルト設定でタイリングパターンを描画します。

良いタイル画像とは、目に見えるつなぎ目なく自然に繰り返せるもの（シームレスにタイル可能なテクスチャ、アイコンパターン、幾何学的な形状、タイリング専用に設計した画像）です。シェブロン、ドット、布地の織り柄など規則的なパターンは特に相性が良いです。

ステップ2: タイリングモードを選択する

コントロールセクションに4つのモードボタンが表示されます:

• 通常: 標準グリッド。すべてのタイルが行と列に整列します。
• ハーフブリック: 奇数行がタイルのステップ（ギャップを含む）の半分だけ右にシフトされます。標準的なレンガの壁パターンそのものです。
• ハーフドロップ: 奇数列がタイルのステップの半分だけ下にシフトされ、壁紙や布地のパターンでよく見られる縦方向のスタガー効果を生み出します。
• ミラー: 一列おきに水平反転（ctx.scale(-1, 1)）、一行おきに垂直反転（ctx.scale(1, -1)）が適用され、タイルの境界を越えた対称的な反射が生まれます。

各モードをクリックするとキャンバスにすぐ効果が反映されます。ミラーモードは方向性のはっきりしたタイルに特に効果的で、全体のテクスチャに見えやすいリピートパターンを隠してくれます。

ステップ3: スケール、回転、ギャップを調整する

3つのスライダーでタイリングを微調整します:

• スケール（5%〜400%）: 100%でタイルをネイティブのピクセルサイズで描画します。200%にするとタイルが大きく目立ち、50%にすると密なマイクロパターンになります。
• 回転（0°〜360°）: タイルを回転させて斜め縞効果を作ったり、パターンに躍動感を加えたりできます。縞タイルを45°回転すると斜め縞パターンが生まれます。
• ギャップ（-50〜50px）: 正の値はタイル間に背景色で埋められたスペースを追加します。負の値は隣接するタイルを重ね合わせてレイヤー効果を生み出します。

ステップ4: キャンバスサイズと背景色を設定する

2つの数値入力フィールドに出力キャンバスの幅と高さ（それぞれ100〜4096px）を入力します。ライブプレビューは画面に合わせて表示されますが、実際のキャンバスは指定した寸法で描画されます。CSSバックグラウンドのテストには800×600で十分です。印刷用エクスポートには2400×2400以上を使用してください。

背景色スウォッチをクリックすると、タイルの間や周囲を埋める色を選択できます。

ステップ5: PNGとしてエクスポートするか、CSSをコピーする

PNG ボタンをクリックすると、描画済みキャンバスが pattern-[幅]x[高さ].png としてダウンロードされます。デザインソフト、ゲームエンジン、または <img> 要素のテクスチャとして使用できます。

CSS をクリックすると、すぐに使えるCSSスニペットがクリップボードにコピーされます。スニペットは単一タイルを別のキャンバスに描画し、Base64データURIとしてエンコードします。コピーされる3つのプロパティ:

background-image: url("data:image/png;base64,...");
background-repeat: repeat;
background-size: 72px 72px;

background-size の値はスケール適用後のタイル幅にギャップを加えたもの、スケール適用後のタイル高さにギャップを加えたものです。これをスタイルシートに直接貼り付けてください。

実用例

ウェブサイト用レンガ背景パターン

128×64のレンガテクスチャタイルをアップロードします。「ハーフブリック」モードを選択し、スケール100%、ギャップ2px、背景色を #2c1810（濃いモルタルブラウン）に設定します。キャンバスを800×600にすると、リアルなレンガパターンのプレビューが表示されます。CSSスニペットをコピーして .hero-section のCSSルールに貼り付けます。

バナー用ハーフドロップストライプパターン

40×40のストライプタイル（透明背景に単色の斜め線をPNGで保存したもの）をアップロードします。「ハーフドロップ」を選択し、スケール150%、回転45°、ギャップ0px。ストライプとハーフドロップオフセットが組み合わさって、密度の高いスタガードストライプパターンが生まれます。バナー背景用に1200×400 PNGでエクスポートします。

プリントデザイン用万華鏡タイル

1つの象限に色付きパターンを持つ100×100の幾何学的タイルをアップロードします。「ミラー」モードを選択し、スケール100%、回転0°、ギャップ0px。ミラーモードはタイルを2×2の繰り返し単位で水平・垂直に反射させ、キャンバス全体に四重対称モチーフを作り出します。高解像度の印刷用パターンとして2400×2400でエクスポートします。

カードコンポーネント用CSSバックグラウンドパターン

小さなドットテクスチャタイル（32×32 PNG）をアップロードします。「通常」モード、スケール75%、ギャップ6px、背景 #f8f8f8、キャンバス400×400でCSSスニペットをコピーします。スタイルシートに:

.card-background {
  background-image: url("data:image/png;base64,...");
  background-repeat: repeat;
  background-size: 30px 30px;
}

サイズに関わらず、ドットがカード全体にシームレスに繰り返されます。

ヒントとベストプラクティス

シームレスになるよう設計されたタイルを使用してください。 ツールは提供されたタイルをそのまま描画します。タイルの端が合っていない場合は、つなぎ目が見えてしまいます。あらかじめシームレスにタイル可能な素材を用意してください。

ミラーモードは繰り返しの見えにくさを改善します。 非シームレスなタイルでもミラーモードなら反射が継ぎ目を隠してくれることが多いです。シームレス設計でないタイルにはまずミラーモードを試してみてください。

回転はキャンバスの余白タイルを追加します。 ツールは 2 × Math.max(タイル幅, タイル高さ) の余白を計算し、回転によって生じる隙間を埋めるためにキャンバス境界の外にもタイルを描画します。

CSSスニペットは単一タイルのデータURLを使用します。 CSSエクスポートはスニペット用に (タイル幅 + ギャップ) × (タイル高さ + ギャップ) サイズの新しいキャンバスを作成します。これによりデータURLが小さく保たれ、ブラウザが background-repeat: repeat でネイティブに無限タイリングを処理します。

設定はURLで共有できます。 ツールは useShareableState を使って現在の設定（スケール、回転、ギャップ、キャンバスサイズ、背景色、タイリングモード）をURLにエンコードします。URLを共有するだけで同じ設定を再現できます。

ギャップは-50〜50pxです。 グラウト（目地）風の効果には、対照的な背景色を使って3〜8pxの正のギャップが現実的です。20px以上はアイコングリッドや間隔の広い幾何学パターンに向いています。

よくある問題とトラブルシューティング

「ファイルが大きすぎます」エラー: 10 MBを超えるファイルは拒否されます。アップロード前にタイル画像を10 MB以下に圧縮してください。

「無効なフォーマット」エラー: 有効な画像ファイル（file.type.startsWith('image/')）が必要です。画像以外のファイルは拒否されます。

パターンにつなぎ目が見える: タイルの端が合っていません。シームレスな結果を得るには、目に見える端のないタイリング専用に設計された画像を使用してください。ミラーモードで非シームレスな端を部分的に隠せる場合があります。

アップロード後にキャンバスが空白になる: ライブプレビューはタイル画像が読み込まれているときのみ描画されます。アップロードは成功した（サムネイルが表示されている）のにキャンバスが空白の場合は、クリアして再アップロードを試してください。

エクスポート時に「画像が読み込まれていません」のトースト表示: 画像なしでPNGまたはCSSをクリックした場合です。先にタイル画像をアップロードしてください。

CSSスニペットのデータURLが非常に大きい: 単一タイルのキャンバスはスケール設定に比例したサイズになります。大きなタイルをスケール400%にすると、CSSのデータURIがかなり大きくなります。本番CSSではタイルを別の画像ファイルとして保存し、通常のURLで参照することをお勧めします。

プライバシーとセキュリティ

Seamless Pattern Maker はすべての画像をブラウザ内で完全に処理します。タイル画像はFileReader APIで読み込まれ、メモリ内のデータとして保存されます。すべてのキャンバス操作（描画、スケール、回転、ミラー）はサーバー通信なしにブラウザのCanvas 2D APIを使用します。CSSエクスポートはローカルのクリップボードにのみデータをコピーします。ページを一度読み込んだ後はオフラインでも動作します。

よくある質問

Seamless Pattern Maker は無料ですか？ はい、完全無料です。4つのタイリングモード、すべてのコントロール、PNGエクスポート、CSSコピーが費用なし・アカウントなしで利用できます。

Seamless Pattern Maker はオフラインで動作しますか？ はい。最初のページ読み込み後は、すべての描画がブラウザのCanvas 2D APIで行われます。パターン作成やエクスポート中にネットワークリクエストは発生しません。

Seamless Pattern Maker でデータは安全ですか？ タイル画像はデバイスの外に出ることはありません。FileReader APIでローカルのブラウザメモリに読み込まれ、すべての処理とエクスポートはクライアントサイドで行われます。

タイルとして使える画像フォーマットは？ ブラウザがネイティブサポートする画像フォーマットであれば何でも使用できます: JPEG、PNG、WebP、GIF、SVG（画像要素として）、新しいブラウザではAVIFとHEICも。アニメーションGIFは最初のフレームのみ使用されます。

タイルファイルの最大サイズは？ 10 MBのファイルサイズ制限があります。10 MBを超えるファイルは「ファイルが大きすぎます」エラーで拒否されます。

ハーフブリックタイリングモードはどう動作しますか？ ハーフブリックモードでは、奇数行（行インデックス % 2 === 1）の開始X位置が stepX / 2 だけ右にシフトします。水平目地がずれたクラシックなレンガ積みパターンが生まれます。

ミラータイリングモードはどう動作しますか？ ミラーリングはキャンバス描画時に各タイルに適用されます。列インデックスが奇数なら水平反転、行インデックスが奇数なら垂直反転します。描画前に ctx.scale(-1, 1) や ctx.scale(1, -1) を適用し、描画後にキャンバス状態を復元します。

CSSスニペットを本番環境で使えますか？ 使えますが、本番環境では独立した画像ファイルの方が一般的に好ましいです。CSS内に埋め込まれたデータURLはブラウザが独立してキャッシュできず、スタイルシートのサイズが増え、更新が困難になります。

回転はタイルグリッドにどう影響しますか？ 回転は ctx.save()、ctx.translate()、ctx.rotate()、ctx.restore() を使って各タイルに個別に適用されます。タイルグリッド自体は回転しません。各位置のタイル画像だけが回転します。

パターン設定を保存できますか？ はい。設定は useShareableState によって自動的にURLにエンコードされるため、URLをブックマークまたは共有すると現在の設定が保持されます。プレミアムサポーターはスケール、回転、ギャップ、キャンバスサイズ、背景色、タイリングモードの名前付きプリセットを保存することもできます。

関連ツール

• 近日公開: SVG Pattern Generator — ソースとなるタイル画像なしにプログラムでスケーラブルなベクターパターンを作成。
• 近日公開: Placeholder Generator — パターンメーカーのテスト用にフラットカラーのプレースホルダー画像を生成。
• 近日公開: Noise Texture — シームレスタイル入力として最適なプロシージャルノイズテクスチャを生成。
• 近日公開: Image Effects — パターンメーカーへの入力に使う前にタイル画像にフィルターを適用。

今すぐ Seamless Pattern Maker を試す: Glyph Widgets Seamless Pattern Maker