Illustratorの「パターン」で背景テクスチャを量産するテクニック

2026.04.10 09:00
2026.03.16 13:32
Illustratorの「パターン」で背景テクスチャを量産するテクニック

Webサイトやバナーを作っていると、「ちょっとした背景テクスチャが欲しいな」と思う場面が結構あります。無料素材サイトから探すのもいいんですけど、微妙にイメージと違ったり、ライセンスが気になったりすることも多くて。

そんなとき、Illustratorのパターン機能を使えば、自分だけのシームレスな背景テクスチャをサクッと量産できるんですよね。一度コツを覚えると、ドット・ストライプ・幾何学模様など、いろんなバリエーションを短時間で作れるようになったので、今回はその方法をまとめてみました。

Illustratorのパターン機能とは

Illustratorのパターン機能は、小さなタイル状のデザインを繰り返し並べて、塗りとして使える仕組みです。スウォッチパネルにパターンを登録しておけば、どんなオブジェクトにもワンクリックで適用できます。

パターンの最大の特長はシームレス（継ぎ目なし）であること。タイルの端と端がぴったり繋がるように設計されているので、どれだけ大きな面積に適用しても、繰り返しの境目が見えません。これがWebの背景素材として特に相性がいい理由でもあります。

シームレスパターンの基本的な作り方

パターン作成の基本的な流れはこんな感じです。

  1. パターンの元となるオブジェクトをアートボード上に作成する
  2. オブジェクトを選択した状態で、メニューの「オブジェクト」→「パターン」→「作成」を選ぶ
  3. パターン編集モードに入るので、プレビューを見ながら調整する
  4. 完了したら画面上部の「完了」をクリック

これだけでスウォッチパネルにパターンが登録されます。あとは長方形ツールなどで図形を描いて、塗りにそのパターンを適用すれば、シームレスに繰り返される背景が完成します。

パターンオプションパネルの使い方

パターン編集モードに入ると表示される「パターンオプション」パネルが、パターン作成の要になります。ここで押さえておきたい主な設定項目を紹介します。

タイルタイプ

タイルの並び方を決める設定で、以下の5種類があります。

  • グリッド: 縦横にそのまま並べる（最もシンプル）
  • レンガ（横）: 横方向にずらして並べる（レンガの壁のイメージ）
  • レンガ（縦）: 縦方向にずらして並べる
  • 六角形（横）: 六角形状に並べる
  • 六角形（縦）: 六角形状に縦方向で並べる

よく使うのは「グリッド」と「レンガ（横）」の2つですね。特にドットパターンで「レンガ（横）」を使うと、均等に散らばった感じが出せるので良い感じです。

幅・高さと間隔

タイルのサイズ（幅・高さ）を指定できます。「オブジェクトにタイルサイズを合わせる」にチェックを入れると、オブジェクトのバウンディングボックスにぴったり合うようにタイルサイズが自動調整されます。

間隔を空けたいときは、このチェックを外して手動でタイルサイズを大きくするか、「H間隔」「V間隔」の値を調整します。プレビューを見ながらリアルタイムで変化を確認できるので、直感的に操作できます。

実例1: ドットパターン

まずは最もシンプルなドットパターンから作ってみました。

  1. 楕円形ツールで小さな正円を描く（例: 10px × 10px）
  2. 塗りを好きな色に設定し、線はなしにする
  3. 正円を選択して「オブジェクト」→「パターン」→「作成」
  4. パターンオプションでタイルタイプを「レンガ（横）」に変更
  5. タイルサイズを調整して、ドット間の余白を好みに合わせる（例: 幅30px、高さ30px）
  6. 「完了」をクリック

タイルタイプを「レンガ（横）」にすることで、ドットが交互に配置されたポルカドット風のパターンになります。「グリッド」にすると等間隔の格子状ドットになるので、用途に応じて使い分けられます。

なお、パターンの大きさを後から変えたい場合は、「オブジェクト」→「変形」→「拡大・縮小」で「パターンの変形」だけにチェックを入れると、オブジェクト自体のサイズはそのままでパターンのスケールだけを変更できます。これはすべてのパターンに共通のテクニックなので覚えておくと便利です。

実例2: ストライプ・斜線パターン

ストライプパターンも簡単に作れます。

水平ストライプ

  1. 長方形ツールで細長い長方形を描く（例: 幅100px、高さ5px）
  2. 塗りを設定し、線はなし
  3. パターンとして登録
  4. タイルタイプは「グリッド」、タイルの高さを調整してストライプの間隔を決める（例: 高さ20px）

斜線パターン

斜線パターンは少しコツがいります。

  1. 直線ツール（または長方形ツール）で45度の斜めの線を描く
  2. 線の太さと色を設定する
  3. パターンとして登録
  4. パターン編集モードで、タイルの境界をまたぐように線をコピー配置する
  5. タイルの四隅に線がきちんと繋がるよう微調整する

斜線パターンのポイントは、タイルの左端と右端、上端と下端で線が途切れなく繋がること。パターン編集モードのプレビューで、周囲のタイルとの繋がりをしっかり確認するのが大事です。

実例3: 幾何学模様パターン

三角形や六角形を組み合わせた幾何学模様パターンも、パターン機能を使えば効率よく作れます。

  1. 多角形ツールで三角形や六角形などの基本図形を作成する
  2. 回転コピーや反転コピーを使って、繰り返しの単位となるモチーフを組み立てる
  3. 完成したモチーフをすべて選択して「パターン作成」
  4. タイルタイプやサイズを調整してシームレスに繋がるようにする

幾何学模様の場合、「スマートガイド」（表示→スマートガイド、またはショートカット⌘+U）をONにしておくと、図形同士のスナップが効くので位置合わせが格段に楽になります。また、「整列」パネルで等間隔に配置してからパターンにするのも有効です。

パターンの色変更テクニック（オブジェクトの再配色）

パターンを作った後に「やっぱり色を変えたい」ということはよくありますよね。そんなときに便利なのが「オブジェクトの再配色」機能です。

  1. パターンが適用されたオブジェクトを選択する
  2. メニューから「編集」→「カラーを編集」→「オブジェクトを再配色」を選ぶ（またはコントロールパネルの再配色アイコンをクリック）
  3. 「再配色」ダイアログが表示される
  4. カラーホイールをドラッグするか、個別の色をクリックして変更する

この方法なら、パターン編集モードに戻らなくても色だけを自由に変更できます。同じパターンでカラーバリエーションを量産したいときにめちゃくちゃ重宝します。

ただし注意点として、再配色で変更した結果は新しいスウォッチとして保存しないと元のパターンが上書きされてしまいます。色違いを残したい場合は、先にスウォッチパネルでパターンを複製してから再配色するのが良いです。

SVG/PNGへの書き出し方法

作成したパターンをWeb素材として使うには、SVGやPNG形式で書き出す必要があります。

パターンタイル単体を書き出す

パターンの最小繰り返し単位（1タイル分）だけを書き出す方法です。

  1. パターンが適用されたオブジェクトを選択する
  2. 「オブジェクト」→「分割・拡張」を実行する
  3. パターンが個別のオブジェクトに分解される
  4. 1タイル分のオブジェクトだけを残し、アートボードのサイズをタイルに合わせる
  5. 「ファイル」→「書き出し」→「スクリーン用に書き出し」でPNGやSVGとして書き出す

もう一つの方法として、「アセットの書き出し」パネル（ウィンドウ→アセットの書き出し）を使う手もあります。書き出したいオブジェクトをパネルにドラッグするだけで、複数フォーマット・複数サイズの一括書き出しができるので、大量のパターンを処理する際には効率的です。

SVGで書き出す場合のポイント

SVGはベクター形式なのでファイルサイズが小さく、拡大してもきれいに表示されます。書き出し時の設定で「スタイル」を「内部CSS」にしておくと、後からCSSで色を変えることもできて便利です。

また、SVGコードの中に<pattern>要素として直接埋め込む方法もあります。この場合、IllustratorからSVGとして保存し、テキストエディタで<pattern>タグ部分を抽出して使います。

PNGで書き出す場合のポイント

PNGの場合は解像度に注意です。Web用なら72dpiで十分ですが、Retinaディスプレイ対応を考えるなら2倍サイズ（2x）で書き出しておくと安心です。「スクリーン用に書き出し」では、1x・2x・3xなど複数サイズを一括で書き出せるので活用すると良いです。

Web素材としての活用（CSS background-imageへの組み込み）

書き出したパターンをWebサイトの背景として使うには、CSSのbackground-imageとbackground-repeatを組み合わせます。

PNG画像を使う場合

.pattern-bg {
  background-image: url('/images/dot-pattern.png');
  background-repeat: repeat;
  background-size: 30px 30px; /* タイルサイズに合わせる */
}

SVGをインラインで埋め込む場合

小さなパターンなら、SVGをBase64エンコードしてCSSに直接埋め込むこともできます。HTTPリクエストを減らせるのがメリットですね。Base64エンコードには、ターミナルでbase64コマンドを使うか、オンラインの変換ツール（例: base64encode.org）を利用すると手軽にできます。

.pattern-bg {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i...");
  background-repeat: repeat;
}

SVGをURLエンコードで埋め込む場合

Base64を使わず、URLエンコードしたSVGコードを直接指定する方法もあります。可読性が高く、色の変更もしやすいので個人的にはこちらの方が好きです。

.pattern-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23ccc'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

パフォーマンスの観点では、ごくシンプルなパターンならインラインSVG、複雑なものや複数パターンを使う場合は外部ファイル（PNGまたはSVG）にするのがバランスが良いです。

パターンライブラリの管理

パターンをたくさん作っていくと、管理が重要になってきます。Illustratorにはパターンを効率よく管理するための機能がいくつか用意されています。

スウォッチライブラリとして保存

作成したパターンは、スウォッチライブラリとして保存しておくと、別のドキュメントでも再利用できます。

  1. スウォッチパネルの左下にある「スウォッチライブラリメニュー」をクリック
  2. 「スウォッチを保存」を選択
  3. わかりやすい名前をつけて保存（例: 「Web背景パターン_ドット系」）

保存したライブラリは、他のドキュメントのスウォッチパネルから「ユーザー定義」として呼び出せます。

パターンの命名規則

パターンが増えてくると、スウォッチパネルのサムネイルだけでは判別しにくくなるんですよね。以下のような命名規則を決めておくと管理が楽になります。

  • bg_dot_blue_10px – 種類_色_サイズ
  • bg_stripe_gray_45deg – 種類_色_角度
  • bg_geo_triangle_green – 種類_形状_色

スウォッチパネルのパターンをダブルクリックすれば、パターン編集モードに入ると同時にパターンオプションパネルで名前を変更できます。

CCライブラリの活用

Adobe CCライブラリにパターンを登録しておけば、Illustratorだけでなく他のAdobe製品（PhotoshopやXDなど）からもアクセスできます。チームで共有する場合にも便利ですね。パターンが適用されたオブジェクトをCCライブラリパネルにドラッグ&ドロップするだけで登録できます。

まとめ

Illustratorのパターン機能を使えば、Web用の背景テクスチャを効率よく量産できます。ポイントをおさらいするとこんな感じです。

  • パターン作成は「オブジェクト」→「パターン」→「作成」から
  • タイルタイプの切り替えで、同じ素材からバリエーションを出せる
  • 「オブジェクトの再配色」を使えば、色違いの量産が簡単
  • 書き出しはSVG（軽量・高品質）かPNG（互換性）で用途に応じて選択
  • CSSのbackground-repeatと組み合わせれば、すぐにWebで使える
  • スウォッチライブラリやCCライブラリで管理すると再利用しやすい

一度ワークフローを確立してしまえば、1つのパターンを数分で作れるようになりました。フリー素材に頼らず、オリジナルの背景テクスチャをストックしておくと、いざというときにかなり助かります。

今回は以上です！