何の記事？

これはぐらだけアドカレ2023の6日目の記事です。

Figmaで色差分を作りやすい用にデータを作り、マスキングテープを自作しました。

誰向け？どんな役にたつ？

Figmaをなんとなく触れるけれど、パターンデザインをやったことがない人
Figmaでパターンデザインを作りたい人
デザインの色差分を作って同じ画面で比較したい人
Webブラウザでパターンデザインを行いたい人
iPadでデザインを行いたい人

あらすじ

PixivFactoryでマスキングテープを気軽に受注生産できるので、作りたいなー……と考えていました。
しかし、こういったデザインをClipStudio等のイラスト編集ソフトで行うのはやり辛く……。
そこで、Adobeイラストレーターと同じようなデザイン編集ができるFigmaを知り、こういったパターン化デザインを作ったり、似たデザインを比較するのが簡単だとわかったので、Figmaで作ることにしました。

FigmaはUI/UXのデザインツールなのですが、こういった使い方もあるんだとみていただけましたら。

参考リンク

Figmaでのパターン化のやり方参考

ここにパターン化の簡単な方法を書いてくださっていたので、参考にしました。

画像はめ込みの方法

いつも画像挿入→はめ込む図形を選択……としていたのですが、塗りにドラッグ＆ドロップでいけるらしいです。
話が早い……！

pixivFACTORY

自分の制作したデザインデータをアップロードすることで、1点からグッズの受注生産ができるサイトです。
1点のみ注文の場合価格は張りますが、在庫を抱えなくてもよいことが強みです。

作り方

1. マスキングテープサイズのフレームを作る

1.1　pixivFACTORYからマスキングテープのテンプレートをダウンロードする

今回は最終的にPixivFactoryにデータをアップロードするので、PixivFactoryからマスキングテープの入稿用テンプレートをDLし、Figmaに読み込みます。

入稿用テンプレートはマスキングテープの説明ページを開き、ページ下部のテンプレートからダウンロードします。
https://factory.pixiv.net/products/masking_tape

1.2 Figmaでテンプレート画像を読み込む

Figmaのデザイン画面を開き、テンプレート画像を読み込みます。
今回は一番小さい15mm x 50mm を選択しています。

1.3 テンプレート画像の大きさに合わせてフレームを作成

フレームを作ることで背景が透過せずに済み、テンプレート範囲外が表示されなくなります。

2. パターンを作る

ドット4つのシンプルなパターンを作成します。

正方形のフレームを作成し、〇を等間隔に配置します。Figmaは図形を動かすといい感じの位置に自動で止まってくれるので、自動調整機能を使って等間隔にします。

3. パターンがシームレスになるようにする

3.1 〇の色を変更する

今回は2色の図形を使いたいので、それぞれ当てはめる図形に近い色に塗りを変更します。
Shiftキーを押しながらクリックで複数選択ができます。

3.2 パターンをpngでダウンロード

パターンをクリックし、右メニューのエクスポートの＋マークをクリック。
エクスポートボタンをクリックすると、png画像がダウンロードできます。

3.3 マスキングテープに塗りを追加する

シームレスになっているかを確認します。
マスキングテープの画像を選択したあと、右メニューの塗りの＋をクリックし、塗りを追加します。

3.4 塗りを画像＆タイルに変更する

追加した塗りの色アイコンをクリック＞開いたウインドウの画像アイコンをクリック＞画像プレビューにオンマウスして画像を選択します。

3.5 表示をタイルに変更

拡大のプルダウンをクリックし、タイルに変更すると、画像が並びます。
2色でシームレスになっていることを確認してください。
また、タイル横の%を変更すると、パターンタイルの大きさを変更できます。

4. パーツを置き換える

シームレスになることを確認したら、ドット部分にパーツをはめ込みます

画像をはめ込みたい図形の塗りを開き、画像に変更するか、画像・動画を配置から画像を読み込んで、はめ込みたい図形をクリックするとはめ込むように置き換えできます。

5. 置き換えた画像をパターンに並べる

見本の時と同じようにパターン画像を出力し、マスキングテープのフレームにタイル設定をして並べます。

Figmaから完成データをエクスポートする時は、左メニューのテンプレート画像を非表示にしてエクスポートします。

6. pixivFACTORYへアップロードする

テンプレートをダウンロードしたページの「つくってみる」ボタンから先に進みます。

左メニューの自分の画像をクリックすると画像アップロードが開くので、「ファイルを選択」ボタンから今回作ったファイルを選びます。

右上のプレビューボタンを押して、仕上がりが良さそうだったら「保存する」を選びます。

7. BOOTHに並べたり、自分のみ購入したりする

「注文する」ボタンからは自分用の注文が、「ネットショップで販売」ボタンからはBOOTHでのオンデマンド販売の設定ができます。

結果

色差分を１画面で並べて比較できて便利
パターン変更の微調整が楽
イラスト編集ソフトよりも編集が楽
カラーバリエーションやパターン別などを自由に増やせて比較できるのがとてもよいです。
塗りを足して背景色を追加すると、背景色を変えた差分を並べたりできます。
また、今回はあらかじめ色がついている画像を読み込ませましたが、画像ではなく白黒の図形を使って、塗りを変えたものを並べて比較するのも良いと思います。

応用事例

壁紙など、シームレス素材を作るのにも

タイル機能に加えて色差分を増やすのが容易なので、色違いでシームレス素材を量産するのもオススメです。

Figmaで図形などを作成した後、細かな加工をイラスト編集ソフトで行う

図形を作った後でパーツ毎に出力することができるので、簡易的な図形などをFigmaで作った後、イラスト編集ソフトで細かな加工を行うのも良いと思います。
Figmaは大雑把な加工を広範囲に施したり、等間隔に図形を配置することが得意なので、それぞれの長所を生かして制作できると捗ります。

他にも使えそうな事例ややってみたいことがあれば書く
これも見出し機能で目次に載るようにする

できなかったこと

パターン配置後に要素の拡大縮小をすると位置がズレる

ドットのサイズを拡大したところ、ドット位置がズレるということがありました。
ドットの中心座標はそのままに、サイズのみ変更する方法が見つからなかった為、後からサイズ変更した場合は等間隔配置などを再度行って調整してください。