【Affinity】「陰影パターン（ハッチング）」で色々な幾何学パターンを作る

こんにちは、さちです。

この記事は Affinity by Canva Advent Calendar 2025 の22日目に参加しています。前日はなたのさん、翌日は僵尸パアさんです。

無料で利用できる「Affinity 3（Affinity by Canva）」に実装された新機能「陰影パターン（ハッチング・Hatch Fill）」。数値を入れるだけで「ストライプ」などの幾何学パターンを簡単に作れる面白い機能です。

今回は、この「陰影パターン」機能を使って、色々なデザインのパターン（模様）を作ってみます。再現するための「数値」も掲載しますので、ご自由にお使い下さい。

「太い線」を使ったデザイン

ストライプ

回転	線の太さ	背景の色	線の色
0	30	FFC800	262626

線1	R	X	Y	Shift	間隔
線1	45	0	0	0	60

チェック

回転	線の太さ	背景の色	線の色
0	24	F6D6CC	CC8258

線1	R	X	Y	Shift	間隔
線1	45	0	0	0	48

線2	R	X	Y	Shift	間隔
線2	135	0	0	0	48

「細い線」を使ったデザイン

グリッド（格子）

回転	線の太さ	背景の色	線の色
0	2	AFEEC0	427E69

線1	R	X	Y	Shift	間隔
線1	0	0	0	0	60

線2	R	X	Y	Shift	間隔
線2	90	0	0	0	60

正三角形（鱗）

回転	線の太さ	背景の色	線の色
0	2	B9F0FF	0C4D86

線1	R	X	Y	Shift	間隔
線1	0	0	0	0	60

線2	R	X	Y	Shift	間隔
線2	60	0	0	0	60

線3	R	X	Y	Shift	間隔
線3	120	0	0	0	60

レンガ

回転	線の太さ	背景の色	線の色
0	2	D06447	4E1C04

線1	R	X	Y	Shift	間隔
線1	0	0	0	0	30

R	X	Y	Shift	間隔
90	0	0	30	30
破線	スペース
30	30

ジグザグ

回転	線の太さ	背景の色	線の色
45	2	AFEEC0	427E69

R	X	Y	Shift	間隔
0	0	0	-30	30
破線	スペース
30	30

R	X	Y	Shift	間隔
90	0	0	30	30
破線	スペース
30	30

ジグザグレンガ（檜垣）

回転	線の太さ	背景の色	線の色
45	2	D09747	502F05

R	X	Y	Shift	間隔
0	0	0	20	20
破線	スペース
60	20

R	X	Y	Shift	間隔
90	0	-20	-20	20
破線	スペース
60	20

ハニカム（正六角形）

回転	線の太さ	背景の色	線の色
0	2	F8DD7A	744611

R	X	Y	Shift	間隔
30	0	0	45	26
破線	スペース
30	60

R	X	Y	Shift	間隔
90	-26	15	45	26
破線	スペース
30	60

R	X	Y	Shift	間隔
150	0	0	45	26
破線	スペース
30	60

千鳥格子

回転	線の太さ	背景の色	線の色
0	2	F8F8F8	C30E0E

R	X	Y	Shift	間隔
0	0	0	0	40
破線	スペース
20	20

R	X	Y	Shift	間隔
90	0	0	0	40
破線	スペース
20	20

R	X	Y	Shift	間隔
45	0	-20	0	28.3
破線	スペース
28.3	28.3

線4	R	X	Y	Shift	間隔
線4	45	20	-20	0	56.6

あみ目

回転	線の太さ	背景の色	線の色
0	2	3B846F	F7F7F7

R	X	Y	Shift	間隔
0	-30	0	45	77.9
破線	スペース
60	30

R	X	Y	Shift	間隔
60	0	0	45	77.9
破線	スペース
60	30

R	X	Y	Shift	間隔
120	15	26	45	77.9
破線	スペース
60	30

R	X	Y	Shift	間隔
0	30	52	45	77.9
破線	スペース
60	30

R	X	Y	Shift	間隔
60	30	0	45	77.9
破線	スペース
60	30

R	X	Y	Shift	間隔
120	-15	-26	45	77.9
破線	スペース
60	30

麻の葉

回転	線の太さ	背景の色	線の色
0	2	F1D0FB	41154F

線1	R	X	Y	Shift	間隔
線1	30	0	0	0	60

線2	R	X	Y	Shift	間隔
線2	90	0	0	0	60

線3	R	X	Y	Shift	間隔
線3	150	0	0	0	60

R	X	Y	Shift	間隔
0	0	0	60	34.7
破線	スペース	破線
40	40	40

R	X	Y	Shift	間隔
60	0	0	60	34.7
破線	スペース	破線
40	40	40

R	X	Y	Shift	間隔
120	0	0	60	34.7
破線	スペース	破線
40	40	40

その他のデザイン

水玉

回転	線の太さ	背景の色	線の色
0	20	AFF0F0	2B72D1

R	X	Y	Shift	間隔
45	0	0	0	40
破線	スペース
0	40

ハート

回転	線の太さ	背景の色	線の色
45	30	FFADF6	EB60C8

R	X	Y	Shift	間隔
0	-5	-5	0	90
破線	スペース
20	70

R	X	Y	Shift	間隔
90	-5	-5	0	90
破線	スペース
20	70

縞鋼板（チェッカープレート）

回転	線の太さ	背景の色	線の色
45	10	524C49	D8D6D1

R	X	Y	Shift	間隔
0	-15	0	45	45
破線	スペース
30	60

R	X	Y	Shift	間隔
90	0	30	45	45
破線	スペース
30	60

シャイニー

回転	線の太さ	背景の色	線の色
0	60	FFE12B	14195F

R	X	Y	Shift	間隔
0	0	0	0	50
破線	スペース
0	57

縄

回転	線の太さ	背景の色	線の色
0	20	F7F7F7	A2694E

R	X	Y	Shift	間隔
30	0	0	-17.3	10
破線	スペース
20	100

ドットウェーブ

回転	線の太さ	背景の色	線の色
0	10	92E3F8	1D4375

R	X	Y	Shift	間隔
0	0	0	40	60
破線	スペース
0	80

R	X	Y	Shift	間隔
0	6	11.5	40	60
破線	スペース	破線	スペース
0	67	0	13

R	X	Y	Shift	間隔
0	16	20	40	60
破線	スペース	破線	スペース
0	48	0	32

R	X	Y	Shift	間隔
0	28	27	40	60
破線	スペース	破線	スペース
0	25	0	55

R	X	Y	Shift	間隔
0	40.5	29	40	60
破線	スペース
0	80

まとめ

Affinity 2 まではベクターで幾何学パターンを作ろうとすると、大量にできるレイヤーが邪魔なうえに混乱のもとにもなっていました。

「陰影パターン（Hatch Fill）」機能を使えば数値を入力するだけ！　色々なデザインの幾何学パターンをサクッと作れます。後からの修正も簡単なのでどんどん使っていきましょう。

とても便利な機能なんですが、欲を言えば線の端の形状は丸い「ラウンド」以外に角ばった「バット」なども選ばせて欲しいですね。そうすればデザインの幅がさらに広がるので。

今後も、新しいパターンを作ったときは、この記事に随時追加していく予定です。

また、Affinity に関する記事を他にも書いていますので、よろしければ覗いてやって下さい。

Affinity に関する他の記事

Affinity

「Affinity」の記事一覧です。

ごあいさつ

2025年のブログ更新はこの記事が最後です。ブログを読んで下さってありがとうございました。

今年は1年間で733枚の画像を作り、それを使って147本の記事を書きました。ブログを月10回以上更新する目標は今年も無事継続できました。

これからも、備忘録を兼ねてブログ更新をしていきたいと思っていますので、よろしければ記事の後にある X（旧Twitter）・RSS などのご登録をお願いします。

2026年のブログ更新開始は、1/7（水）の予定です。

それでは、少し早いですが良いお年を！