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

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

イメージ

こんにちは、さち です。

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

このブログでも使っている無料の画像編集アプリ「Affinity 3（Affinity by Canva）」に、新しい機能「陰影パターン（ハッチング・Hatch Fill）」が追加されました。

「塗りつぶし（グラデーション）」ツールの中にひっそりとあるこの機能、実は「数値」を入れるだけで「ストライプ」などの幾何学パターンを簡単に作れるスゴイ奴なんです。

そこで今回は、この「陰影パターン」機能を使って、色々なデザインのパターン（模様）を作ってみます。再現可能な「レシピ（数値）」も公開しますので、創作活動にお役立て下さい。

スポンサーリンク

「陰影パターン」の基本操作

「陰影パターン」の基本的な操作方法は、下記リンク先の記事で紹介しています。この機能を使ったことがない人は先に読んでみて下さい。

【Affinity】 簡単に幾何学パターンを作れる「陰影パターン」の使い方
こんにちは、さち です。あけましておめでとうございます。2026年最初のブログ更新です。本年もよろしくお願いします。今回は Affinity 3（Affinity by Canva）以降に実装された、簡単に幾何学パターンを作れる「陰影パター
at.sachi-web.com
2026.01.07
「線」を設定するときの「単位」は、「線の太さ」の単位と同じものを使用して下さい

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

ストライプ

キャンバスの画面

回転 線の太さ 背景の色 線の色
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

プチプラス（十字）

※ 2025/12/29追加
キャンバスの画面

回転 線の太さ 背景の色 線の色
0 2 F8F8F8 9299AF
線1 R X Y Shift 間隔
0 -5 0 0 50
破線 スペース
10 40
線2 R X Y Shift 間隔
90 0 -5 0 50
破線 スペース
10 40

原稿用紙

※ 2025/12/29追加
キャンバスの画面

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

方眼紙

※ 2025/12/29追加
キャンバスの画面

回転 線の太さ 背景の色 線の色
0 2 F8F8F8 76AADC
線1 R X Y Shift 間隔
0 0 0 0 40
線2 R X Y Shift 間隔
90 -20 0 0 40
線3 R X Y Shift 間隔
0 6.5 -20 0 40
破線 スペース
3 5
線4 R X Y Shift 間隔
90 0 2.5 0 40
破線 スペース
3 5

その他のデザイン

水玉

キャンバスの画面

回転 線の太さ 背景の色 線の色
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

雷紋

※ 2026/1/31追加
キャンバスの画面

回転 線の太さ 背景の色 線の色
0 6 F8F8F8 BB3636
線1 R X Y Shift 間隔
0 -36 12 28 48
破線 スペース 破線 スペース
36 12 24 12
線2 R X Y Shift 間隔
0 -24 0 28 48
破線 スペース 破線 スペース
12 24 12 36
線3 R X Y Shift 間隔
0 -36 -12 28 48
破線 スペース 破線 スペース
24 12 36 12
線4 R X Y Shift 間隔
90 -36 -12 -48 28
破線 スペース
24 120
線5 R X Y Shift 間隔
90 -12 -12 -48 28
破線 スペース
12 132
線6 R X Y Shift 間隔
90 0 -12 -48 28
破線 スペース
24 120
線7 R X Y Shift 間隔
90 12 0 -48 28
破線 スペース
12 132
線8 R X Y Shift 間隔
90 36 -12 -48 28
破線 スペース
24 120

まとめ

Affinity 2 まではベクターで幾何学パターンを作ろうとすると、大量にレイヤーができ、あとで修正するときも大変でした。

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

欲を言えば、線端の形状は「ラウンド（丸形）」以外に「バット（四角）」も選ばせて欲しいですね。デザインの幅がさらに広がりますし。

ちなみに、「陰影パターン」という機能名ですが、日本語翻訳が怪しそうなので「ハッチパターン」とかの方が分かりやすい気がします。

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

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

陰影パターンをもっと使いこなす【応用編】

【Affinity】 「陰影パターン（ハッチング）」で色々な幾何学パターンを作る 【応用編】
こんにちは、さち です。このブログでは画像編集に「Affinity 3（Affinity by Canva）」を使っています。先日、この Affinity 3 の「陰影パターン（ハッチング・Hatch Fill）」の機能を使って、いろいろな
at.sachi-web.com
2026.01.23

Affinity に関する他の記事

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

ごあいさつ

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

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

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

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

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

コメント

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