【お知らせ】 2025年のブログ更新は12/22（月）が最終日です。2026年の更新開始は1/7（水）の予定です。

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

2025.12.22
この記事は約5分で読めます。
記事内に広告が含まれています

イメージ

こんにちは、さち です。

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

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

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

スポンサーリンク

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

ストライプ

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 30 FFC800 262626
線1 R X Y Shift 間隔
45 0 0 0 60

チェック

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 24 F6D6CC CC8258
線1 R X Y Shift 間隔
45 0 0 0 48
線2 R X Y Shift 間隔
135 0 0 0 48

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

グリッド（格子）

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 2 AFEEC0 427E69
線1 R X Y Shift 間隔
0 0 0 0 60
線2 R X Y Shift 間隔
90 0 0 0 60

正三角形（鱗）

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 2 B9F0FF 0C4D86
線1 R X Y Shift 間隔
0 0 0 0 60
線2 R X Y Shift 間隔
60 0 0 0 60
線3 R X Y Shift 間隔
120 0 0 0 60

レンガ

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 2 D06447 4E1C04
線1 R X Y Shift 間隔
0 0 0 0 30
線2 R X Y Shift 間隔
90 0 0 30 30
破線 スペース
30 30

ジグザグ

キャンバスの画面

回転 線の太さ 背景の色 線の色
45 2 AFEEC0 427E69
線1 R X Y Shift 間隔
0 0 0 -30 30
破線 スペース
30 30
線2 R X Y Shift 間隔
90 0 0 30 30
破線 スペース
30 30

ジグザグレンガ（檜垣）

キャンバスの画面

回転 線の太さ 背景の色 線の色
45 2 D09747 502F05
線1 R X Y Shift 間隔
0 0 0 20 20
破線 スペース
60 20
線2 R X Y Shift 間隔
90 0 -20 -20 20
破線 スペース
60 20

ハニカム（正六角形）

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 2 F8DD7A 744611
線1 R X Y Shift 間隔
30 0 0 45 26
破線 スペース
30 60
線2 R X Y Shift 間隔
90 -26 15 45 26
破線 スペース
30 60
線3 R X Y Shift 間隔
150 0 0 45 26
破線 スペース
30 60

千鳥格子

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 2 F8F8F8 C30E0E
線1 R X Y Shift 間隔
0 0 0 0 40
破線 スペース
20 20
線2 R X Y Shift 間隔
90 0 0 0 40
破線 スペース
20 20
線3 R X Y Shift 間隔
45 0 -20 0 28.3
破線 スペース
28.3 28.3
線4 R X Y Shift 間隔
45 20 -20 0 56.6

あみ目

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 2 3B846F F7F7F7
線1 R X Y Shift 間隔
0 -30 0 45 77.9
破線 スペース
60 30
線2 R X Y Shift 間隔
60 0 0 45 77.9
破線 スペース
60 30
線3 R X Y Shift 間隔
120 15 26 45 77.9
破線 スペース
60 30
線4 R X Y Shift 間隔
0 30 52 45 77.9
破線 スペース
60 30
線5 R X Y Shift 間隔
60 30 0 45 77.9
破線 スペース
60 30
線6 R X Y Shift 間隔
120 -15 -26 45 77.9
破線 スペース
60 30

麻の葉

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 2 F1D0FB 41154F
線1 R X Y Shift 間隔
30 0 0 0 60
線2 R X Y Shift 間隔
90 0 0 0 60
線3 R X Y Shift 間隔
150 0 0 0 60
線4 R X Y Shift 間隔
0 0 0 60 34.7
破線 スペース 破線
40 40 40
線5 R X Y Shift 間隔
60 0 0 60 34.7
破線 スペース 破線
40 40 40
線6 R X Y Shift 間隔
120 0 0 60 34.7
破線 スペース 破線
40 40 40

その他のデザイン

水玉

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 20 AFF0F0 2B72D1
線1 R X Y Shift 間隔
45 0 0 0 40
破線 スペース
0 40

ハート

キャンバスの画面

回転 線の太さ 背景の色 線の色
45 30 FFADF6 EB60C8
線1 R X Y Shift 間隔
0 -5 -5 0 90
破線 スペース
20 70
線2 R X Y Shift 間隔
90 -5 -5 0 90
破線 スペース
20 70

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

キャンバスの画面

回転 線の太さ 背景の色 線の色
45 10 524C49 D8D6D1
線1 R X Y Shift 間隔
0 -15 0 45 45
破線 スペース
30 60
線2 R X Y Shift 間隔
90 0 30 45 45
破線 スペース
30 60

シャイニー

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 60 FFE12B 14195F
線1 R X Y Shift 間隔
0 0 0 0 50
破線 スペース
0 57

縄

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 20 F7F7F7 A2694E
線1 R X Y Shift 間隔
30 0 0 -17.3 10
破線 スペース
20 100

ドットウェーブ

キャンバスの画面

回転 線の太さ 背景の色 線の色
0 10 92E3F8 1D4375
線1 R X Y Shift 間隔
0 0 0 40 60
破線 スペース
0 80
線2 R X Y Shift 間隔
0 6 11.5 40 60
破線 スペース 破線 スペース
0 67 0 13
線3 R X Y Shift 間隔
0 16 20 40 60
破線 スペース 破線 スペース
0 48 0 32
線4 R X Y Shift 間隔
0 28 27 40 60
破線 スペース 破線 スペース
0 25 0 55
線5 R X Y Shift 間隔
0 40.5 29 40 60
破線 スペース
0 80

まとめ

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

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

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

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

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

Affinity に関する他の記事

Affinity
「Affinity」の記事一覧です。
at.sachi-web.com

ごあいさつ

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

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

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

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

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

コメント

タイトルとURLをコピーしました