この背景パターン、どっちが正解?パターンを扱うセンスを磨こう

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

DTPオペレーター・イラストレーターのhamkoです。

今回、私は「背景パターン」についてのクイズを出題します。

早速ですが、3問クイズを出します。

以下の3つの作例を見て、AとB、あなたはどちらの「背景パターン」がよいと感じますか?

1問目「ギンガムチェック柄の背景パターン」(難易度★)

2問目「工作道具のイラスト柄の背景パターン」(難易度★)

3問目「ドット柄の背景パターン」(難易度★★)

いかがでしたか?

私が考える答えは……

1問目の答え:B

2問目の答え:B

3問目の答え:A

以上が私なりの解答です。

あなたがよいと感じた背景パターンはどちらでしたか?

定番のチェックやドット、ストライプから、イラストを使った複雑なものまで、デザインに使われるパターンには様々な種類があります。

ほんのわずかな違いが、デザインで伝えるべき印象やクオリティに影響することも少なくありません。

ではここからは、AとBの背景パターンを比較して、どこが異なっているかを解説します。

作例を通じて、パターンを扱う際のポイントについて一緒に考えてみましょう。


※本コーナーの作例は、Adobe Illustrator使って作られています。

Illustratorは、ロゴやイラストをはじめ、ポスターや名刺といった紙媒体のデザイン、さらにwebやアプリのUI設計まで対応できるデザインツール。

多くのプロが使っており、最新のAI機能搭載しています。

ワンランク上のデザインを実現したい方や、プロフェッショナルなデザイナーを目指したい方は、ぜひAdobe Illustrator使ってみてください。


1.パターンは軸を揃える

まずは1問目を振り返ります。

この作例では、背景に「水色のギンガムチェック柄」を使用しています。

あなたはどちらの背景パターンが、より美しく見えると感じたでしょうか?

私が選んだ答えは「B」でした。

実は、AとBのどちらも、使っている色のトーンやチェック柄のひとつひとつの大きさは全く同じです。

それなのに見た目の印象が違う理由は、水色の格子パターンの「位置」にあります。

よく見ると、Aは中心に対してチェック柄が少しズレてしまっていますが、Bは上下左右のバランスが均一に配置されているのがわかります。

このように、中心を軸にしてきれいに配置されているほうが、デザイン全体がスッキリと整って見えます。

そのため、今回のクイズではより洗練された印象を与える「B」を正解としました。

もちろん、制作するレイアウトの大きさや、パターンの細かさなど、様々な要素によって最適なバランスは異なります。

そのため、その時々の状況に合わせて柔軟に判断することが大切で、場合によってはAのような配置を許容しても問題ありません。

ただ、今回の作例のようなギンガムチェック柄といった、規則的でシンプルなパターンほど、中心からズレていると悪目立ちしやすくなります。

特に、名刺やショップカードのような小さな紙面や、柄そのものを主役に見せたいデザインのときは、中心を意識して整えることが、美しく仕上げるための重要なポイントになります。

Illustratorでパターンの位置を整えるコツ

Illustratorでは、図形の「線」や「塗り」に好きな(パターン)を設定できます。

しかし、図形はそのままで、中の柄だけを少しずらしたいと思っても、通常の「整列」機能は使えません。

ここでは、図形を動かさずに中身のパターン位置だけを調整する方法を解説します。

「移動」ダイアログで正確に数値を指定して動かす

  1. 動かしたいオブジェクトを選択し、「オブジェクト」メニューから「変形」>「移動」をクリック
  2. 表示されたダイアログの「オプション」で、「オブジェクトの変形」のチェックを外し、「パターンの変形」にチェックを入れる
  3. 「プレビュー」をオンにし、中の柄が動く様子を確認しながら位置を調整

2.パターンに動きを取り入れて、ワクワク感を足す

続いて、2問目を振り返ります。

この作例では、背景に「工作道具のイラスト」を散りばめたパターンを使用しています。

AとB、どちらも背景に使っているイラスト素材自体はまったく同じものですが、「並べ方」によって見る人に与える印象に違いが生まれています。

Aは、それぞれのモチーフが水平・垂直にきっちりと整列しているため、どこか規則正しく、落ち着いた雰囲気を感じさせます。

一方でBは、一つひとつのモチーフにランダムな角度がついていることで、画面の中に「動き」が生まれ、全体としてにぎやかな印象に仕上がっています。

私が選んだ答えは「B」でした。

今回のデザインの目的は「子ども向けの工作イベント」を告知することです。

そのことを踏まえると、静かで整ったデザインよりも、明るく・にぎやかな印象にしたほうが、より伝わるデザインになりそうです。

こうした理由から、背景パターンの動きによって楽しさを演出できている「B」を正解としました。

Illustratorの「パターン編集モード」で動きのあるパターンを作ろう

Illustratorで動きのあるパターンを作りたいときは、「パターン編集モード」を活用しましょう。

このモードを使うと、柄のつながり方をリアルタイムで確認しながら、自由自在に調整ができます。

編集方法について、以下で手順をご紹介します。

パターン編集を始めるまでの手順

  1. 「ウィンドウ」メニューから「スウォッチ」をクリックして「スウォッチ」パネルを開く
  2. 柄にしたいイラストや図形を選び、「スウォッチ」パネルの中へドラッグ&ドロップし、パターンスウォッチとして登録
  3. 何も選択していない状態でスウォッチパネルに今登録されたサムネールをダブルクリックし、「パターン編集モード」に切り替える

このパターン編集モードでは、「パターンオプション」パネルでパターンタイルの大きさや形を調整しながら、パターン内のパーツに対して直接編集ができるようになります。

柄のつながり方や密度など、仕上がりの確認にも便利な機能です。

「規則正しさ」をあえて崩して、にぎやかさを出すコツ

登録したばかりのパターンは、デフォルトで「タイルの種類:グリッド」になっているため、繰り返しが強調されて単調に見えてしまいがちです。

ここで「パターンオプション」パネルの設定を少し変えてみましょう。

例えば、「タイルの種類:レンガ(縦)」にし、「レンガオフセット:1/2」に変更すると、タイルの半分の高さで柄がずれて配置されます。

これだけでも、パターンの「繰り返している感」が薄れ、自然なリズムが生まれます。

さらに、今回の作例のようなイラストのパターンなら、パーツ一つひとつの角度をバラバラにしたり、大きさを変えたりするのも有効です。

あえて、タイルからはみ出るようにイラストを配置すると、並びにバラつきが生まれてランダム感を演出できます。

編集を終了して保存する

調整が完了したら、「escキー」を押すか、画面上部に表示されているグレーのバーの空いている場所をクリックしましょう。

これで編集モードが終了し、「スウォッチ」パネルの中にあるパターンも自動的に最新の状態へ更新されます。

Illustratorの生成AIを使ってシームレスなパターンを作る

ここまで自分でパターンを作る方法を解説してきましたが、アイデア出しに困ったときは生成AIの力を借りてみましょう。

Illustratorには、AIでプロンプトからパターンを生成できるパターンを生成機能があります。

使い方はシンプルです。

以下の手順で実行してみましょう。

  1. 「オブジェクト」メニューから「生成」>「パターンを生成」を実行し、「パターンを生成」パネルを表示
  2. 「プロンプト」欄に、作りたいパターンのイメージを言葉で入力
  3. そのほか設定したいオプションがあれば設定(以下の図の1〜3)
  4. 「生成」ボタンのクリックで生成開始

※3「ND値」のスライダーでは、柄の密度を変更できます。

短時間で多数のバリエーションを提案してくれるのが、生成AIの強みです。

1回の操作では、3種類のパターンが同時に生成されます。

気に入った生成結果がないときは、「明るい色」「リアルな柄」などのプロンプトを追加しながら生成を繰り返しましょう。

アイデア出しはもちろん、自分の予想していなかったテイストでデザインの方向性を探りたいときにも活用できます。

3.シンプルな柄ほど「形のゆがみ」に注意する

最後に、3問目を振り返ります。

この作例の背景には、デザインの定番である「ドット柄」を使用しています。

AとBは、色やドットの密度も同じですが、よく比較するとBはドットの丸が縦に少し潰れてしまっています。

ドットやチェックのようなシンプルで規則正しいパターンほど、こうした「わずかなゆがみ」が大きな違和感につながります。

意図せず形が崩れたままになっていると、デザイン全体のクオリティを下げる原因にもなりかねません。

そのため、特別な演出の意図がある場合を除いて、ドットパターンは「きれいな正円」を保ち、規則正しく並べるのがよいでしょう。

よって、この作例でもドットが正円のまま保たれている「A」を正解に選びました。

「パターンの変形」チェックは必要なときだけオンにしよう

ここで挙げたドット柄の例のように、パターンの歪みは気づかないうちに発生していることがあります。

その多くは、「パターンの変形」のオン・オフの状態を気にせずに編集を進めていることが原因です。

1問目でも触れたとおり、パターンの位置や大きさを調整するには「パターンを変形」をオンにする必要がありますが、このオプションは一度オンにすると、自分でオフにするまでずっとオンのままになってしまいます。

オンにしたことを忘れたまま、「選択ツール」のバウンディングボックスを使ってオブジェクトを変形すると、中の柄まで一緒に伸び縮みしてしまい、意図しない歪みが生まれてしまうことがあるので注意しましょう。

パターンを使っているオブジェクトを変形するときは、その都度「パターンを変形」の状態を確認するのがオススメです。

この「パターンを変形」オプションは1問目で紹介した「移動」ダイアログ以外にも、拡大・縮小や回転といった変形に関する様々なダイアログで設定できます。

どこか一箇所でチェックを入れると、それ以降の編集でもパターンの変形が有効になるため、注意しましょう。

「パターンの変形」は以下の場所で確認・切り替えができます。

作業中はオン・オフの状態をできるだけ把握するようにしましょう。

  • 「オブジェクト」メニュー>「変形」で実行できる変形処理すべてのダイアログ
  • 「環境設定」ダイアログの「一般」の中にあるチェック項目

まとめ:背景パターンのセンスを磨くためのポイント

今回は背景パターンに関するクイズと、デザインテクニックを取り上げました。

最後に今回のノウハウのまとめです。

1.レイアウトの中心を基準にしてパターンの位置を整えよう

  • 小さなサイズのレイアウトや、パターンが主役になるものは特に注意する
  • シンプルなパターンほどズレが目立ちやすい
  • 位置の調整には「移動」などの変形処理を使う

2.パターンの雰囲気を訴求内容に合わせよう

  • デフォルトの「タイルの種類:グリッド」は単調な仕上がりになりやすい
  • パターン編集モードを活用して、パターンタイルやパターン内のオブジェクトを調整する
  • 困ったときは「パターンを生成」でアイデアを出す

3.意図していないパターンの変形に注意しよう

  • 「パターンの変形」は一度オンにすると切り替えるまでそのままになってしまうので注意する
  • オンにしたことを忘れて「うっかり変形」しないよう注意する
  • 変形するときは「パターンの変形」のオン・オフを確認する

お相手はDTPオペレーター・イラストレーターのhamkoでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。

※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。


執筆:五十嵐華子 a.k.a. hamko

印刷会社出身のフリーランス。DTP・デザイン、イラスト制作のほか、Adobe Illustratorのテクニカルライティングやセミナースピーカー、コンテンツ作成も行う。近著に『◯△▢でつくる Illustrator描き方講座』

Adobe Japan Prerelease Advisor, Adobe Community Expert, Adobe Community Evangelist


すべての問題にチャレンジしてみよう!

あなたの感性はどれを選ぶ?「デザインクイズチャレンジ」

第40回 この色の選び方、どっちが正解?配色のセンスを磨こう

第39回 この図版、どっちが正解?見やすい図版作成のセンスを磨こう

第38回 このグラフの見せ方、どっちが正解?伝わるグラフをデザインするセンスを磨こう

第37回 この文字の遊ばせ方、どっちが正解?文字デザイン演出のセンスを磨こう

第36回 この写真の見せ方、どっちが正解?買いたくなる商品写真のセンスを磨こう

第35回 この情報の強弱の付け方、どっちが正解?情報整理のセンスを磨こう

第34回 このあしらい、どっちが正解?装飾のブラッシュアップ力を磨いておこう

第33回 この文字のあしらい、どっちが正解?バナーの文字デザインのセンスを磨こう

第32回 このアイコン、どっちが正解?アイコン作成のセンスを磨こう

第31回 この背景パターン、どっちが正解?パターンを扱うセンスを磨こう

第30回 このZINEのデザイン、どっちが正解?誌面デザインのセンスを磨こう

第29回 このタイポグラフィ、どっちが正解?作字のセンスを磨いておこう

第28回 このカラー値、どっちが正解?印刷におけるCMYKの「黒(ブラック)」のセンスを磨こう

第27回 表のデザイン、どっちが正解?情報の整理に役立つデザインセンスを磨いておこう

第26回 そのデザインの仕上げ、どっちが正解?「整列」や「ガイド」を使いこなすセンスを磨こう!

第25回 このレイアウト、どっちが正解?視線誘導のセンスを磨いておこう

第24回 このパス、どっちが正解? ロゴ制作で必要になる造形センスを磨いておこう

第23回 この矢印のデザイン、どっちが正解?図解における矢印選びのセンスを磨いておこう

第22回 線の扱い、どっちが正解? 罫線のセンスを磨いておこう

第21回 このドロップシャドウ、どっちが正解?ドロップシャドウのセンスを磨いておこう

第20回 この名刺の文字組、どっちが正解?名刺デザインのセンスを磨いておこう

第19回 この価格の見せ方、どっちが正解?数字のデザインのセンスを磨いておこう

第18回 この書き出し、どれが正解?画像の特徴に合わせた書き出しを学ぼう

第17回 色の組み合わせ、どっちが正解?配色のセンスを磨いておこう

第16回 このスライドのデザイン、どっちが正解?伝わるプレゼン資料作成のセンスを磨いておこう

第15回 このコントラスト、どっちが正解?文字と背景の配色のセンスを磨いておこう

第14回 この余白、どっちが正解?レイアウトにおける余白のセンスを磨いておこう

第13回 このレイアウト、どっちが正解?レイアウトのセンスを磨いておこう

第12回 このフォント選び、どっちが正解?フォントを上手に使うセンスを磨いておこう

第11回 この改行や行揃え、どっちが正解?文字組みのセンスを磨いておこう

第10回 この約物の使い方、どっちが正解?約物の違和感に気付けるセンスを磨いておこう

第9回 このグラデーション、どっちが正解?グラデーションのセンスを磨いておこう

第8回 この吹き出し、どっちが正解?デザイン演出のセンスを磨いておこう

第7回 この名刺デザイン、どっちが正解?名刺作成のセンスを磨いておこう

第6回 このデザインのあしらい、どっちが正解?装飾のセンスを磨いておこう

第5回 欧文フォントの見せ方、どっちが正解? フォント選びのセンスを磨こう

第4回 このデザインの配置、どっちが正解?整列のセンスを磨いておこう

第3回 この文字間や行間、どっちが正解?文字の余白のセンスを磨いておこう

第2回 この文字組み、どっちが正解?ベースライン調整のセンスを磨いておこう

第1回 この文字詰め、どっちが正解?文字間調整(カーニング)のセンスを磨いておこう

Illustratorを始めましょう。