ペンツールとカーブについて01/Affinity3

2026-06-29

Affinity パソコン関係

t f B! P L

Affinity Designer 3のペンツールとカーブの基本解説ブログアイキャッチサムネイル画像
意外とややこしい、カーブについて解説していきます。

ペンツールでは、「カーブ」という、線の形を数値データで表したベクター線を書くことができます。
数値を使うので、一度書いた線を後から太さを変えたり、位置を変えたりなど、自由に変更できます。

また、拡大縮小したときに画質が劣化しません。
Affinityのベクターレイヤーとピクセルレイヤーの拡大時における画質劣化の違いを比較した解説図
詳しく知りたい人は
「ゼロから始めるAffinity3 Affinity中級者講座その18 ベクターとラスター」
を参照してください。

とりあえず、ペンツールで線を書いてみましょう。

1.ベクターペルソナで「ペンツール」を選択する

ベクターペルソナでペンツールを選択します。
大体ここら辺の位置にあります。
Affinityのベクターペルソナ画面の左側ツールパネルにあるペンツールのアイコン位置を示すスクリーンショット

2.コンテクストツールバーで「ペンモード」を選択する

コンテクストツールバーから、以下のアイコン(ペンモード)をクリックします。
この4つのアイコンについては後程解説します。
Affinityのコンテクストツールバーに表示されるペンモード、スマートモード、ポリゴンモード、線モードの4つのアイコン

3.線の色を好きな色に、塗りの色をなしにする

コンテクストツールバーやカラーセレクタ、スウォッチやカラーパネルなど、好きな方法で、
線の色を好きな色に、塗りの色をなしにして下さい。

とりあえず見本では線の色を黒にしました。
Affinityのコンテクストツールバーにあるカラーセレクタで塗りをなし、線を黒色に設定した状態のコントロール
いよいよ、線を書いてみましょう!

4.画面上を2回クリックする

好きな場所をクリックし、もう一度別の場所をクリックすると、その間に直線を引くことができます。
Affinityのペンツールを使いキャンバス上を2箇所クリックして直線カーブを作成した画面

5.もう一か所クリックし、そのままボタンを離さずに引っ張る

もう一点好きな場所をクリックしてみましょう。
その際、クリックしたままボタンを離さずに、グイっと下にドラッグしてみて下さい。

すると、何やら謎の青い線が表示され、直線ではなく曲線になりました。
描き終わったらキーボード左上の「Esc」キーを押して、書くのをやめてください。
終点をダブルクリックしても、線を書くのをやめられます。
ペンツールでドラッグ操作を行い青いハンドルを引き出して曲線のセグメントを描画している操作画面
カーブは、「ノード」「セグメント」「ハンドル」という3つのパーツからできています。
ベクターカーブを構成する要素であるノード、セグメント、ハンドルについて文字と矢印で示した解説画像
ノード」とは、カーブを構成する両端、または角度が変わる位置にある点です。
主に、マウスをクリックした位置に作られます。

セグメント」は、そのノードをつなぐ線のことです。

ハンドル」はノードから伸びる方向線で、セグメントの方向を指定します。

今回書いた線だと、こんな感じ。
実際に作成したベクターの曲線オブジェクトにおけるノードとハンドルの位置関係の具体例
試しにハンドルをちょっといじってみましょう。

1.ノードツールを選択する

移動ツールと似ていますが、矢印の根元部分がないアイコンの方です。
ベクターペルソナだと上から3番目くらいにあります。
ベクターペルソナのツールパネルに配置されているノードツールのアイコン位置を示すスクリーンショット

2.右端のノードをクリックする

右端のノードをクリックすると、ハンドルが表示されます。
ハンドルは、ノードが選択されたときだけ表示されます。
通常は非表示になっています。
ノードツールでベクター線の右端にあるノードをクリックしてコントロールハンドルを表示させた状態

3.ハンドルの先端にある•を掴んで、下に引っ張る

ハンドルを掴んで下に引っ張ると、線の形が変わりました。
ノードを基準として、ハンドルの方向に線を引っ張っているような感じです。
ノードツールでハンドルの先端の丸を下にドラッグ操作して曲線の形状を変形させている画面
ノードを杭だと考えると、杭と杭の間にロープの線(セグメント)が張ってあるようなイメージです。
ハンドルの方向に人が引っ張っている、とイメージすると分かりやすいかな?
ノードを杭、セグメントをロープ、ハンドルをロープを引っ張る人に例えた概念のイラスト解説図
Geminiさんによるイメージ図

ハンドルの数だけ、引っ張っている人が居ると思っていいです。

よく見てみると、ノードの形は□と○と、2種類ありますね。

こちら、実は「□」と「○」と、「◎丸の中に点」の3種類あります。
Affinityで利用できる3種類のノードであるシャープ、スムーズ、スマートの外観形状の比較
それぞれ、□「シャープ」 ○「スムーズ」 ◎「スマート」となっています。
シャープはカクッと急に折れ曲がる線。左右のハンドル角度が違う線
スムーズはなだらかに変化する線。
スマートはこの図だとわかりにくいけど、周りに合わせていい感じに調整してくれる曲線です。

それを踏まえて、いよいよツールの個別解説をしていきましょう!

ペンツールを選択したとき、表示されるコンテクストツールバーの内容はこんな感じです。
左の「マスク」と「選択」は後で解説します。

塗りとか線の太さも他のツールと同じなので解説省略。
「ここから解説」と書いてある部分から解説していきます。
ペンツール選択時に上部に表示されるコンテクストツールバーの各種設定項目とモードパネルの解説箇所

モード

ペンモード

コンテクストツールバー上で基本となるペンモードのアイコンが選択されている状態
直線も曲線も書ける、基本機能です。一番よく使う。
大体これを選んでおけばOKです。
線を書くのをやめたいときは、Escキーか、ダブルクリックでやめられます。

スマートモード

自動で前後の傾きを見て、流れるようなカーブを作成します。
柔らかい線を書くときに便利。
コンテクストツールバー上で自動曲線生成を行うスマートモードのアイコンが選択されている状態

ポリゴンモード

クリックした点をつなぐ直線を作成します。
コンテクストツールバー上で多角形の直線を連続作成するポリゴンモードのアイコンが選択されている状態

線モード

クリックした2点をつなぐ直線を作成します。
普通の直線を作成したいときはコレ。
自動で2点目で作成をやめてくれるので、たくさん直線を書きたいときはこれを選んだ方が便利です。
コンテクストツールバー上で単一の独立した直線を引くための線モードのアイコンが選択されている状態
それぞれのペンを使って、上、左、右、と三角形にクリックした結果がこんな感じです。
スマートモードだと、いい感じにふんわりと柔らかくつないでくれました。
ペンモード、スマートモード、ポリゴンモード、線モードのそれぞれで同じ位置をクリックして描画した形状の違いの比較
ノードの形はこんな感じです。
スマートモードで書いた方は、ノードが◎の「スマート」になってます。
描画した各モードのカーブオブジェクトを選択した際のノード形状(シャープ・スマート)の拡大表示
スマートノード◎のハンドルをいじると、そのノードはスムーズノード〇になります。
「スマート」はあくまで自動で前後の傾きを見て調整する機能なので、いじると「スマート」じゃなくなります。
スマートノードのハンドルを手動操作した結果ノードの属性が自動的にスムーズノードに切り替わった状態
手動でハンドル調整を加え細かく変形させた状態のカスタムベクターカーブオブジェクト
ややこしいので、ノードの形が□の時はカクッとした線
〇や◎の時はなだらかな線、とだけ覚えておけばOKかと(=・ω・=)

「どのモードを使えばいいか分からない!」って時は、基本「ペンモード」にしておけばOKです。ノードタイプも後から変更できるんで。

次回、そのノードタイプの変更について解説します。

「ペンツールとカーブについて02/Affinity3」へ続く(=・ω・=)

検索

最新の投稿

ペンツールとカーブについて01/Affinity3

意外とややこしい、カーブについて解説していきます。

ペンツールとカーブについて01/Affinity3

人気の投稿

アーカイブ

Twitter(X)

アフィリエイトについて

このサイトはアフィリエイト広告(Amazonアソシエイト含む)を掲載しています。

QooQ