模様や背景パターンを自作したいと思っても、ぴったり隙間なく敷き詰まる柄を一から描くのは想像以上に難しいものです。少しでもズレると継ぎ目が目立ち、対称性を手作業で揃えるのは骨が折れます。
ASOBOADは、辺をドラッグするだけで隙間なく敷き詰まるエッシャー風のパターンを作れる無料ツール「Tessellation Studio」を公開しました。M.C.エッシャーの「敷き詰め（テセレーション）」にインスパイアされたツールで、登録もインストールも不要。ブラウザを開くだけですぐに使えます。
どんなツールか
Tessellation Studioは、すき間も重なりもなく平面を埋め尽くす図形の並べ方「テセレーション（敷き詰め・平面充填）」を、ブラウザ上で手軽に作れるツールです。お風呂の床のタイルや蜂の巣の六角形のように規則正しく並ぶ模様を、専門知識なしで作成できます。
エッシャーの敷き詰め作品は複雑に見えますが、その正体は「ある辺をへこませたら、対応する辺を同じだけ出っ張らせる」という単純な対称性のルールです。Tessellation Studioは、このルールをツール側が自動で計算してくれるため、利用者は形をいじることに集中するだけで、常に隙間なく敷き詰まる形だけを作れます。難しい数学の知識は必要ありません。
4つの対称性モード
Tessellation Studioには、生まれるパターンの雰囲気が大きく変わる4つの作図モードがあります。
- 正方形・平行移動 — 正方形の上辺と左辺を変形すると、向かい側の辺が平行移動でコピーされます。最も素直で、エッシャーの動物タイルにもよく使われる基本のモードです。
- 六角形・平行移動 — 六角形の3組の辺をそれぞれ変形。蜂の巣状の充填をベースにした、亀の甲羅や葉のような有機的で密なパターンが得られます。
- 正方形・4回回転 — 1本の基準辺が四隅を中心に90°ずつ回転してタイル全体を構成します。風車のように渦を巻く、回転対称の華やかなパターンに。
- メタモルフォーゼ — 左の形（A）から右の形（B）へ、列ごとに少しずつ変化していくモード。エッシャー『メタモルフォーゼ』のように、ある形が別の形へ連続的に移り変わる帯を作れます。
仕上がりを調整する機能
形が決まったら、見た目を細かく調整できます。「なめらかな曲線」スライダーは0でカクカクした直線的な多角形タイル、右いっぱいで最もなめらかな曲線になり、0〜1で無段階に調整できます。「輪郭線の太さ」では0で線なし、右にずらすほど黒い縁取りが太くなり、タイルの境界をくっきり見せられます。
配色は何色でも追加でき、対称性に応じて自動で塗り分けられます。「配色をランダム」を押せばイメージ違いを一瞬で試せます。さらに「パターンの回転」で敷き詰めた全体を0〜360°の好きな角度に回転させ、斜めのリズムを生み出すことも可能です。形に迷ったときは「ランダム」ボタンを押すと、現在の形からなめらかに変形しながら新しいタイルが自動生成されます。
3ステップで完成
使い方はシンプルで、次の3ステップで完成します。
1. モードを選ぶ — 上部から対称性モード（正方形・六角形・4回回転・メタモルフォーゼ）を選択します。まずは「ランダム」ボタンで形の当たりをつけるのもおすすめです。
2. 辺を編集する — 編集エリアで点をドラッグして形を変えます。辺をダブルクリックで点を追加、点をダブルクリックで削除。対応する辺は自動で同期し、隙間なく敷き詰まります。
3. 配色して書き出す — 配色を調整し、パターン全体を回転。仕上がったらPNGまたはSVGで書き出します。
「敷き詰めプレビュー」のタブに切り替えれば、作ったタイルが実際に並んだ様子を確認できます。プレビューはドラッグで移動、ホイールやピンチで拡大縮小でき、構図を確かめながら仕上げられます。
PNG・SVGで書き出せる
書き出しは、高解像度のPNG（ラスター画像）と、印刷・再編集に強いSVG（ベクター画像）の2形式に対応しています。SVGはどれだけ拡大しても輪郭が劣化しないため、IllustratorやFigmaでの再編集にも向いています。書き出しには現在の回転角度や配色がそのまま反映されます。スマートフォンでは、表示された画像を長押しすると「画像を保存」のメニューから保存できます。
敷き詰め柄は”足し算”より”引き算”。一つの辺の表情で全体が決まる？
パターンづくりというと、ついモチーフを描き込んだり色数を増やしたりと足し算で考えがちですが、敷き詰め柄は逆だと感じています。一枚のタイルがそのまま無限に繰り返されるので、辺をほんの少しへこませただけでも、敷き詰めると全体に強いリズムが生まれます。だから私がこのツールを触るときは、まず「ランダム」で当たりをつけてから、不要な出っ張りを削いで、効かせどころの辺を一つだけ残すように整えます。色数も最初は2〜3色に絞ったほうが、形のおもしろさがちゃんと伝わります。
対称性のルールはツールが自動で守ってくれるので、人間がやるべきなのは「どの辺をどれだけ動かすか」という最小限の判断だけです。曲線の強さを少し足すだけで有機的な印象に振れますし、輪郭線を太くすればタイルの境界がリズムとして立ってきます。SVGで書き出しておけば、後からブランドカラーに差し替えたり、背景パターンとして資料やWebに敷いたりと応用が利きます。足すより削る。その意識だけで、敷き詰め柄はぐっと洗練されます。
活用シーン
- Webサイトや資料の背景パターン、装飾モチーフを自作したいとき
- 包装紙・布地・壁紙など、繰り返し模様のデザイン案を試したいとき
- SVGで書き出して、IllustratorやFigmaでさらに作り込みたいとき
- エッシャー風の幾何学パターンを、数学の知識なしで体験してみたいとき
- 子どもや学習用に、対称性・平面充填のしくみを目で見て理解したいとき
よくある質問
Q. 利用は無料ですか？
A. はい。完全無料でご利用いただけます。アカウント登録もインストールも不要で、ブラウザでアクセスするだけで使えます。生成したパターンにウォーターマークが入ることもありません。
Q. なぜ辺を変形しても隙間ができないのですか？
A. 各モードは対称性のルール（平行移動・回転）に従い、向かい合う辺や隣り合う辺を必ず同じ形で結びます。ある辺をへこませると対応する辺が同じ分だけ出っ張るため、隣のタイルとぴったり噛み合い、平面に隙間なく敷き詰まります。
Q. 作ったパターンはどう保存できますか？
A. PNG（ラスター画像）とSVG（ベクター画像）の2形式で書き出せます。SVGは拡大しても劣化せず、印刷やIllustratorなどでの再編集に向いています。書き出しには現在の回転角度・配色がそのまま反映されます。
Q. スマートフォンでも使えますか？
A. はい。スマートフォンのブラウザに対応しています。点のドラッグ、ピンチ／ホイールでの拡大縮小、ドラッグでのパターン移動に対応しています。
ご利用にあたって
本ツールはすべての処理がお使いのブラウザ内で完結し、データがサーバーへ送信されることはありません。インストールやアカウント登録も不要です。生成したパターンは商用・非商用を問わず利用いただけますが、生成物をM.C.エッシャーや第三者の作品であるかのように表記して販売することはおやめください。本ツールは「現状のまま」提供され、動作の正確性や生成結果の品質について保証するものではありません。仕様や作図アルゴリズムは予告なく変更・終了される場合があります。利用に起因して生じた結果はすべて利用者の責任となります。
辺をひとつ動かすだけで、平面が思いがけない模様で埋まっていく——その面白さを、ぜひTessellationStudioで体験してみてください。
▶︎ デザイン制作実績を見る / ▶︎ デザインのブログ記事一覧 / ▶︎ デザイン制作のガイド・媒体の特徴
この記事について
こんなページも読まれています
