こんにちは。
株式会社クラウドシードの制作担当です。
ドットやストライプなどの簡単なパターンほど、自分が作りたいイメージにピッタリな素材が見つからないことはないでしょうか？
そんな時、自分で簡単にオリジナルパターンを製作することができれば作業もスムーズに進められます。
この記事では、ストライプとドットの小さな画像を作り、Figmaの画像塗り「Tile（タイル）」で繰り返す方法を説明します。先に結論を言うと、継ぎ目のない正方形の素材を用意し、使いたい図形の画像塗りをTileに変更するのが基本です。
Figmaとは
Figmaは画面設計や共同制作に使われるデザインツールです。この記事で扱う画像の塗り設定は、Figma公式ヘルプでは利用プランを問わず使える機能として案内されています。
ここではWebサイトや画像素材の背景として使える、単純な幾何学パターンに絞ります。図形の色や間隔を変えてからTileの縮尺を調整すると、同じ素材でも見え方を変えられます。
複数人での共同編集にも対応しています。無料のStarterプランにはファイル数や利用できる機能などの条件があるため、共同作業に使う場合はFigma公式のStarterプラン案内で現在の制限を確認してください。
Figmaの詳しい導入方法はこちら
（日本語化については2022年に公式対応されました。）
Figmaを使った簡単なパターンの作り方
以下の掲載画像は2023年の編集画面です。パネルの位置や日本語のラベルは利用時点の画面と異なる場合があります。操作の核となる「画像の塗り」「Tile」「倍率」はFigma公式の画像プロパティで確認できます。現行UIの全画面操作はこの記事の更新時に実機再現していません。
１.ストライプ柄
まずは、下記のような簡単なストライプ柄から制作していきます。
①パターンの背景となる正方形の図形を作る
シェイプツールから長方形を選択します。
shiftキーを押しながらドラッグすると、簡単に正方形が制作できます。
今回は100×100pxにしました。
色を変えたい場合は、右側のパネルから「塗り」を選択し、カラーパレットから任意の色を選択します。
②横幅の1/2サイズの長方形を作る
先ほど100×100pxで背景を制作したので、半分の大きさの50px×100pxの長方形を制作します。
色もここで変更しておきます。
細かい大きさを指定したい場合は、右側のパネルに直接数値を入力することも可能です。
オブジェクトを両方とも選択し、整列パネルから「左揃え」「中央揃え」をクリックし、①と②の図形がピッタリ重なっていることを確認します。
③グループ化して画像書き出し
①と②の図形を両方とも選択し、command＋Gでグループ化します。
次に、右側のパネルの一番下、「エクスポート」を選択します。
※プレビューをクリックすると、書き出しを行う画像をプレビュー画面で確認できます。
書き出し前にここで不備がないか確認しておくとミスを防ぐことができ安心です。
「エクスポート」ボタンをクリックし、パターン用の画像を任意の場所に保存します。
④パターンを使用するためのオブジェクトを作る
パターンを使用したいオブジェクトを用意します。
長方形ツールを選択し、shiftキーを押しながらドラッグします。
今回は300×300pxの正方形にしました。
⑤パターンを読み込む
④で制作した正方形を選択した状態で、塗りをクリックし、カラーパレットを表示させます。
「単色」をクリックし、「画像」を選択。
「画像を選択」ボタンをクリックし、③で書き出したパターン用画像を読み込みます。
⑥パターンを繰り返し表示させる
このままでは画像を読み込んだだけなので、パターンとして繰り返し表示できるよう設定を変更します。
画像塗りの表示モードで「Tile（タイル）」を選ぶと、元画像が図形の領域に繰り返し表示されます。掲載画像には旧画面の「拡大」表示が写っていますが、現在の表示名は利用環境によって確認してください。
・Tileの倍率（％）を変えると繰り返し単位の大きさを調整できます。Figma公式では元画像の寸法を基準にした割合と説明されています。
・また、「90°回転」ボタンをクリックすると、横ストライプにも簡単に変更できます。
2.ドット柄
次に、下記のような簡単なドット柄を制作していきます。
①パターンの背景となる正方形の図形を作る
１.ストライプ柄と同じように、100×100pxの正方形を作成します。
②楕円ツールを選択し、小さい円を作成する
今回は10×10pxで制作しました。
色を水色に変えておきます。
両方のオブジェクトを選択した状態で、整列ツールの「水平方向の中央揃え」「垂直方向の中央揃え」をクリックし、円を真ん中に配置します。
③繰り返しのパターンになるように、円を配置
②で制作した円を選択した状態で、option＋shiftを押しながら右端にコピーします。
この時、半分だけ背景からはみ出すように配置してください。
（今回の場合は10×10pxで円を制作したので、5pxだけ外にはみ出している状態。）
同じように上下左右にも5pxだけ外にはみ出すように円をコピー＆配置していきます。
最後に全てを選択し、command＋Gでグループ化しておきます。
④パターンとして使用できるように、マスクをかける
背景と同じサイズの100×100pxの正方形を作成します。
わかりやすいように色を黒にしておきます。
全てを選択し、整列ツールの「水平方向の中央揃え」「垂直方向の中央揃え」をクリックし、2つの正方形部分がピッタリ重なるようにします。
この時、黒い方の正方形がレイヤーの一番下に来るようにしてください。
「command＋[」は、選択したオブジェクトを1段後ろへ移動する操作です。最背面へ移動する場合は、メニューの「Send to back」を使ってください。
選択内容を確認し、「マスクとして使用」を選びます。マスクの前後関係やはみ出しが想定どおりか、完成画像を拡大して確認してください。
③画像の書き出しとパターン読み込み
あとは、先ほどの１.ストライプ柄の作り方③～⑤と同じように、画像を書き出しし、画像を読み込み設定を「タイル」に変更すればドット柄のパターンの完成です。
3.アレンジ案
ストライプやドットの作り方に少しアレンジを加えるだけで、簡単にパターンの種類を増やすことができます。
①アレンジ１ ドット
２.でドットが等間隔すぎるのが気になった方は、真ん中の円の位置をずらしてみるとちょっと違った雰囲気のパターンができます。
②アレンジ２ ストライプ
長方形の幅を変えたり、線を増やしたりするだけで少し凝ったストライプパターンができます。
③アレンジ3 ストライプをアレンジ～チェック柄～
長方形と線を複数重ね合わせてチェック柄のパターンに
タイルがつながらないときの確認点
繰り返しの境目が見える場合は、書き出した元画像の左右・上下の端がつながる配置か、余白や線が1pxずれていないかを確認します。ドットを端から半分はみ出させる作り方では、反対側の位置も合わせてください。画像が伸びたり切れたりする場合は、Fill・Fit・CropではなくTileが選ばれているか、倍率が適切かを確認します。
公開用画像を作るときは、縮小後の線の太さ、文字とのコントラスト、スマートフォンでの表示も確認しましょう。操作の表示名が変わった場合は、本文中の2023年の画像よりFigma公式ヘルプを優先してください。
まとめ
いかがだったでしょうか？
今回はFigmaで作る簡単なパターンの作り方とそのアレンジを解説しました。
- ストライプパターンの作り方
- ドットパターンの作り方
上記2点の基本のパターンの作り方を知っていれば、アレンジ次第でオリジナルパターンが作れるようになります。
自分の作りたいデザインに合わせたパターンをぜひ作ってみてください。
作成したパターンをWebサイトで活用する場合
パターンをWebサイトやバナーで使う場合は、繰り返しの境界、文字の読みやすさ、スマートフォンでの見え方も確認しましょう。
Webサイトの制作・リニューアルについては、クラウドシードのWebサイト制作サービスをご覧ください。
制作目的や既存サイトの状況を整理してから相談すると、必要なデザインと実装範囲を検討しやすくなります。
