クリスタはマウスでイラストが描ける!3次ベジェの使い方!!

※記事内に広告を含みます

皆さん、閲覧ありがとうございます。
山本電卓と申します。

イラスト・漫画制作ソフトCLIP STUDIO PAINT(クリップスタジオペイント)が2020年4月にバージョン1.9.9にアップデートされまして、「3次ベジェ曲線」がとても使いやすくなりました!


今回はその「3次ベジェ曲線」の使い方を紹介させていただきます◎

それではよろしくお願いいたします
( `・∀・´)ノ!


▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】

CLIP STUDIO PAINT PRO


▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】

CLIP STUDIO PAINT EX


参考記事:クリスタを購入する3つの方法と手順紹介!!

目次

CLIP STUDIO PAINT(クリスタ)の「3次ベジェ曲線」とは

3次ベジェ曲線は2種類の制御点で形成される曲線!

クリスタの「3次ベジェ曲線」とは「通過点」と「方向点」という2種類の制御点で成り立っている曲線をいいます。

(直線を描くことも可能です)

クリスタ:3次ベジェ曲線


「通過点」を基準にそこから伸びる「方向点」の向きと長さで線の形が決まります。

3次ベジェ曲線はマウス操作が可能!制御点をツールで配置して描く曲線!

クリスタの「3次ベジェ曲線」の描画はツールを使用し、2つの制御点を配置することで行います

クリスタ:3次ベジェ曲線


線自体を描くわけではないのでゆがみのない均一でキレイな曲線を描くことができます!

その為、マウス操作でもイラストが描けるというのも大きな特徴といえるでしょう◎

その代わり、手で描いたような強弱や入り抜きのある線は描けません

クリスタの3次ベジェ曲線は描画中にも制御点を動かして線を調整・修正できる!

クリスタで「3次ベジェ曲線」を使う利点は2つの制御点の配置次第で複雑な曲線でも描くことができ、尚且つそれを描画中に制御点を移動させて線の調整・修正ができるところです!

クリスタ:3次ベジェ曲線


これによって曲線の曲がり具合を自由に決めながら描画することができるのです!

3次ベジェ曲線はクリスタPRO・EXどちらでも利用できる!

「3次ベジェ曲線」はクリスタEXはもちろん、少しお安いクリスタPROでも利用可能ですよ◎


CLIP STUDIO PAINT PRO


CLIP STUDIO PAINT EX


参考記事:クリスタPROとEXの機能の違い全29項目を紹介します!!

参考記事:クリスタを購入する3つの方法と手順紹介!!

アナログ制作とCLIP STUDIO PAINT(クリスタ)で3次ベジェを利用した制作との違い

アナログでキレイな曲線を描くとなると、「雲形定規」や「曲線定規」を使用しなければなりません。

雲形定規/曲線定規


しかし、「雲形定規」は曲線が固定されていますし、曲線を自由に変えられる「自在曲線定規」も描画中に曲線が変形されて線が歪んでしまったりと、思い通りに曲線が描けない場合が結構あります。


今回紹介するクリスタの「3次ベジェ曲線」を利用すればキレイな曲線を自在に描画することができ、さらに修正も可能なのです!

CLIP STUDIO PAINT(クリスタ)「3次ベジェ曲線」の活用例!

いままではPhotoshopやillustratorで作成するのが一般的だったデザイン制作も、「3次ベジェ曲線」が描きやすくなったことによりクリスタでも制作できるようになります!

マスコットキャラクター・ゆるキャラが3次ベジェで描ける!

よく見るマスコットキャラクターやゆるキャラのイラストには均一な線で描かれているものも多いですね。

クリスタ:3次ベジェ曲線:ゆるキャラ


このようなイラストを描くには「3次ベジェ」を利用するのがいいですね◎

また、クリスタでは「対称定規」というツールも使用できますので正面のイラストでしたら左右対称で描くこともできますよ◎

クリスタ:線対称定規

ロゴマーク・ロゴ文字が3次ベジェで作成できる!

ロゴで使用するマークや文字は手描きではなくゆがみのない線の方が見栄えがいいですね。

クリスタ:ロゴ制作


クリスタの3次ベジェ曲線を利用してロゴそのものを作成するのもいいですし、漫画やイラストで使用するロゴを作成するにもいいですね◎

曲線のあるアイテムや建物(背景)が3次ベジェで描ける!

クリスタの3次ベジェは曲線を自由に描ける上、直線や角のある線も描けますので、アイテムや背景もより描きやすくなります。

クリスタ:ベース描画
クリスタ:ビル描画

CLIP STUDIO PAINT(クリスタ)「3次ベジェ曲線」の使い方!

困った時は:クリスタのウィンドウ・アイコン・項目がない時の見つけ方!!

クリスタで「3次ベジェ曲線」を使う準備をしよう!

クリスタで「ベジェ曲線」ツールの設定をしよう!

まずはクリスタで「図形ツール」を選択し、サブツールパレット上部で「直線」を選択、さらに下部の一覧から「ベジェ曲線」を選択しましょう。

クリスタ:ベジェ曲線


そしてツールプロパティの「曲線」の項目で右端の「3次ベジェ」のアイコンを選択しましょう。

クリスタ:3次ベジェ曲線


これで「3次ベジェ曲線」を描けるようになります◎。

ブラシサイズなどの細かい設定はお好みで行いましょう!

指定方法を確認しておこう!

ベジェ曲線ツールのサブツール詳細ウィンドウ「連続曲線」カテゴリーの「指定方法」にて「ドラッグで指定」か「クリックで指定」を選択することができます。

※「曲線」の項目で「3次ベジェ」のアイコンを選択している時に設定できる項目です。

クリスタのベジェ曲線「ドラッグで指定」


●「ドラッグで指定」
ドラッグの始点が「通過点」に、終点が「方向点」になります。


●「クリックで指定」
「通過点」→「方向点」→「通過点」と順番にクリックで位置を指定していきます。


この記事では「ドラッグで指定」で紹介していきますが、基本的な内容は同じです。

描画するレイヤーは「ベクターレイヤー」がおすすめ◎

クリスタ特有の「ベクターレイヤー」に描画した線はオブジェクトツールや線修正ツールで描画後にも線の調整・修正ができます。

ですので個人的には線画だけでも「ベクターレイヤー」上に描いた方がいいかなと思います。

これぞクリスタの特徴!ベクターレイヤーが便利すぎる!!

クリスタは便利!ベクター制御点ツールでこんなことができる!!

MEMO

ラスターレイヤーで描画する場合は、「ツールプロパティ」内の「線・塗り」の項目でのアイコンの選択により描画結果が変わるので注意しましょう。

クリスタ:3次ベジェ曲線(線・塗り)
クリスタ:3次ベジェ曲線(ラスターレイヤー)

クリスタで「3次ベジェ曲線」を描いていこう!

それでは実際にクリスタで「3次ベジェ曲線」を描いていきましょう。

※ペンで描画することを想定して説明いたしますが、マウスでも同じ作業が可能です。


3次ベジェの描画で行うのは「通過点」の配置と「方向点」の角度と長さの指定です。

ペンで任意の場所をタッチし、そのままドラッグさせて下さい。

クリスタ:3次ベジェ曲線の描き方


最初にタッチした場所が「通過点」に、ドラッグしてペンを離した場所に「方向点」が配置されます。

「通過点」から「方向点」を伸ばすイメージですね。

クリスタ:3次ベジェ曲線(通過点と方向点)


1回この作業を行っただけでは線は描画されません。

「通過点」上に丸い点ができるだけです。

続けて同じ作業を行い、「通過点」が2つ以上配置された時にそれぞれの「通過点」の間に曲線が描画されます。

クリスタ:3次ベジェ曲線の描き方


この曲線の形を決めるのが「方向点」で、「通過点」から「方向点」までの角度・長さによって描画される曲線が変わります。

クリスタ:3次ベジェ曲線の描き方


※基本的に2つの「方向点」は一直線で繋がっています。


この操作により、曲線の曲がり具合を自由に決めることができるということなのです◎

この方法でどんどん「通過点」と「方向点」を配置していき、3次ベジェ曲線を描いていきましょう!

クリスタ:3次ベジェ曲線

3次ベジェ曲線の描画を1つ前の状態に戻したい時

3次ベジェ曲線の「通過点」「方向点」の配置操作を1段階前の状態に戻したい時は、[Delete]もしくは[Back space]キーを押すか、右クリックを押しましょう。

iPadなどのタブレット版(初期設定)では2本指タップで1段階前に戻ります。

クリスタ:3次ベジェ曲線(取り消し)


ここから改めて3次ベジェ曲線の描画の続きを行うことができます。

ちなみにこの1段階戻る作業は「通過点」の数だけ行うことができます。

クリスタ3次ベジェ曲線のいろいろな描画方法

クリスタの3次ベジェ曲線で、ドラッグによる「方向点」の配置を行っている最中に[Space]キーを押しながらドラッグすると「方向点」までの長さ・角度を維持したまま「通過点」の位置を移動させることができます。

クリスタ:3次ベジェ曲線(通過点の移動)


[Space]キーだけを離してそのままドラッグを続けると再び「方向点」の配置作業に戻れます。

クリスタで3次ベジェ曲線を[Shift]キーを押しながら描画すると、「方向点」の角度を水平・垂直、45度刻みに配置することができるよになります。

クリスタ:3次ベジェ曲線(+Shiftキー)


※45度というのは初期設定です。「ツールプロパティ」もしくは「サブツール詳細」内の「角度の刻み」の項目で角度の数値を変更できます。

クリスタ:3次ベジェ曲線(角度の刻み)

クリスタで3次ベジェ曲線を[Alt(Option)]キーを押しながら描画すると、「通過点」から角を付けた曲線を描くことができます。

※この作業を行いますと、その「方向点」が付いている「通過点」が「角あり」の表示(□)に変わります。

クリスタ:3次ベジェ曲線(+[Alt(Option)])

クリスタ:3次ベジェ曲線(角あり)

描画例

クリスタ:3次ベジェ曲線(角あり)

クリスタの3次ベジェ曲線をドラッグをせずにタッチだけで描画すると折れ線のように直線を描くこともできます。

クリスタ:3次ベジェ曲線(折れ線)

クリスタの3次ベジェ曲線をうまく描くコツ!

クリスタの「3次ベジェ曲線」をうまく描いていくには実際自分で操作をしてみて感覚をつかむのが一番ですが、少しだけ私個人が思う描画のコツを紹介させていただきます。

●「予測線」が描きたい曲線の内側にくる位置に「通過点」を配置する

クリスタのツールプロパティもしくはサブツール詳細ウィンドウ内の「予測線を表示」にチェックを入れると描画後の3次ベジェ曲線を予測した「予測線」が表示されるようになります。

クリスタ:3次ベジェ曲線(予測線)


しかしこの「予測線」はあくまで「通過点」を配置した瞬間の線を表示しているだけです。

ですのでこの「予測線」が描きたい曲線より内側になる位置にペンを当てて「通過点」を配置し、そこからドラッグで「方向点」を動かしながら線をふくらませるように曲線を作ると描きやすいかと思います。

クリスタ:3次ベジェ曲線(予測線)
●「通過点」「方向点」の数を少なめにすると描きやすい

クリスタの3次ベジェ曲線は「通過点」「方向点」が多い程複雑な線を描くことができますがその分調整・修正も難しくなります。

クリスタ:3次ベジェ曲線(制御点の数)


慣れるまでは「通過点」「方向点」の配置を少なめにして描いてみましょう。

●ゆるやかな曲線は「通過点」同士の間隔を空ける・「方向点」までの距離を長くする・曲線に近付ける
●急な曲線は「通過点」同士の間隔を狭くする・「方向点」までの距離を短くする・曲線から遠ざける
クリスタ:3次ベジェ曲線(通過点の配置)
クリスタ:3次ベジェ曲線(方向点までの距離)
クリスタ:3次ベジェ曲線(方向点と線との距離)


この法則を知っていれば3次ベジェ曲線の描画もしやすくなるかと思います。

●「通過点」は曲線の頂点でなく曲線の両サイドに配置するというイメージで描画する

これは人によって描きやすい描きにくいが分かれるかもしれません…!

私はこのやり方の方が描きやすいですね。

クリスタ:3次ベジェ曲線


1個目の「方向点」を描きたい曲線の大きさに合う長さで配置し、2個目の「方向点」で曲線のふくらみを調整するといった感じです。

クリスタ:3次ベジェ曲線の描き方

クリスタの3次ベジェ曲線は最初の描画で完璧に描く必要はない!

上記にてクリスタの「3次ベジェ曲線」の描画方法を述べてきましたが、最初は「だいたいこんなもんだろう」くらいの感覚で描画してもらって大丈夫です◎

それこそがこのクリスタの「3次ベジェ曲線」の便利な所なのです。

詳しくは次項から!

うまく描けなくても大丈夫!クリスタの3次ベジェ曲線は描画中に調整・修正できる!

クリスタの「3次ベジェ曲線」は線自体をペンで直接描画するものではありませんのでどうしても完成の線が想像しにくいところがあります。

しかし、このクリスタの「3次ベジェ曲線」は描画中でも自由に曲線を調整・修正することができます

3次ベジェ曲線「通過点」「方向点」の配置調整

クリスタにて3次ベジェ曲線の描画中に[Ctrl(Command)]キーを押しながら「通過点」や「方向点」をドラッグすることで「通過点」や「方向点」を移動させることができます。


●「通過点」の移動

クリスタ:3次ベジェ曲線(通過点の移動)


●「方向点」の移動

クリスタ:3次ベジェ曲線(方向点の移動)


この移動により、3次ベジェ曲線を調整・修正させることができるのです。

MEMO

下の画像でも分かる通り、3次ベジェ曲線を描画中の「方向点」は配置中のものと1つ前に配置したものしか表示されません。

クリスタ:3次ベジェ曲線(制御点の表示)


そのため、基本的には配置したての「通過点」「方向点」と1つ前に配置した「方向点」を調整・修正しながら描画を進める形になります。

[Ctrl(Command)]を押しながら「通過点」をタッチすることで表示してなかった「方向点」も表示させることはできますが、タッチする時にその「通過点」を動かしてしまう可能性もありますので注意しましょう。

「通過点」「方向点」の追加・削除

クリスタにて3次ベジェ曲線を描画中、曲線上をペンでタッチするとその場所に「通過点」を追加させることができます。

クリスタ:3次ベジェ曲線(通過点の追加)


また、「通過点」を追加すると同時にドラッグすることで追加した「通過点」から伸びる「方向点」の角度・長さも調整しながら配置することができますよ。


逆に、3次ベジェ曲線を描画中に「通過点」をタッチすることでその「通過点」を削除することができます。

クリスタ:3次ベジェ曲線(通過点の削除)
MEMO

これは「サブツール詳細」ウィンドウの「連続曲線」の項目内にある「作成途中の制御点の追加・削除」のチェックを入れているとできる機能です。

クリスタ:3次ベジェ曲線(通過点の追加・削除設定)


サブツール詳細ウィンドウはツールプロパティパレット右下のスパナのマークをタッチ、もしくはCLIP STUDIO PAINT画面上部から「ウィンドウ」→「サブツール詳細」と選択することで開くことができます。

3次ベジェ曲線に角をつける

クリスタにて3次ベジェ曲線を描画中に[Alt(Option)]キーを押しながら「方向点」をドラッグ移動させることで角つきの曲線として線を調整・修正することができます。

クリスタ:3次ベジェ曲線(角あり)

※この作業を行いますと、その「方向点」が付いている「通過点」が「角あり」の表示(□)に変わり、この表示中は上記の[Ctrl(Command)]キーを押しながらのドラッグ移動でも「角あり」を保ったまま調整・修正ができるようになります。


また、[Alt(Option)]キーを押しながら「通過点」をタッチすることでも「角あり」の曲線に変えることができますが、「方向点」の配置がリセットされてしまいますので注意しましょう。

クリスタ:3次ベジェ曲線(角ありに変更)

3次ベジェ曲線で「角あり」から「角なし」に変える

クリスタにて3次ベジェ曲線を描画中に「角あり」状態から「角なし」の状態に変えたい場合は「Alt(Option)を押しながら「通過点」上でドラッグさせましょう。

クリスタ:3次ベジェ曲線(角なしに変更)


このドラッグにより再び「方向点」の配置作業になるのですが、「角なし」に変えることができます。


この時、ドラッグによって移動するのは「方向点」であり、「通過点」の位置は移動しません。

※描画中に「角あり」から「角なし」に変える方法は現状この方法しかありません。


3次ベジェ曲線の描画が完了した後でしたら「線修正ツール」でタッチするだけで「角なし」に変えることができます。

クリスタ:線修正ツール(角の切り替え)

クリスタ3次ベジェ曲線の描画を完了(確定)させよう!

クリスタにて3次ベジェ曲線の描画が終わりましたら完了(確定)の操作を行います。

クリスタでは3次ベジェ曲線も含め、曲線ツールは完了の操作を行わないと延々と描画を続けてしまいます。

クリスタの3次ベジェ曲線の描画を完了させる方法は以下の5つです。


①キャンバス上を2回タッチ(ダブルクリック)する

クリスタ:3次ベジェ曲線の決定


②[Ctrl(Command)]キーを押しながら描画中の線以外の所をタッチする

クリスタ:3次ベジェ曲線の決定


③[Enter]キーを押す

Enterキー


④編集画面以外の所をタッチする

クリスタ:3次ベジェ曲線の決定


⑤始点の「通過点」の上から終点の「通過点」を配置して線を繋げる

クリスタ:3次ベジェ曲線の決定
MEMO

2回タッチして3次ベジェ曲線の描画を完了する方法は、

CLIP STUDIO PAINT画面上部から「ファイル(CLIP STUDIO PAINT)」→「環境設定」と選択して表示される環境設定ウィンドウの「ツール」の項目内にある「図形の作成をダブルクリックやダブルタップで確定する」にチェックが入っている時にできる操作です。

クリスタ:環境設定(ダブルクリックでの確定)

CLIP STUDIO PAINT(クリスタ)3次ベジェ曲線:描画後の修正方法

先述の通り、クリスタでは「ベクターレイヤー」上に3次ベジェ曲線を描画した場合は描画後にも線の修正が可能です。

クリスタの「オブジェクトツール」で3次ベジェ曲線を修正する!

クリスタにて「オブジェクトツール」を選択し、ツールプロパティの「変形方法」の項目で「制御点の移動」もしくは「制御点と拡縮回転」を選択しましょう。

クリスタ:オブジェクトツール(制御点)


この設定で描画した3次ベジェ曲線の線にタッチすると全ての「通過点」と「方向点」が表示され、修正ができるようになります。

クリスタ:3次ベジェ曲線の修正


この状態で、「通過点」「方向点」をドラッグ移動させ、線を修正することができます。

また、[Shift]キーを押しながら「方向点」を移動させると水平・垂直、45度刻み(初期設定時)に配置させることができます。

クリスタの「線修正ツール」で3次ベジェ曲線を修正する!

クリスタにて「線修正ツール」を選択し、サブツールパレット上部で「線修正」を選択、さらに下部から「制御点」を選択しましょう。

クリスタ:線修正ツール(制御点)


あとはツールプロパティで修正したい内容のものにチェックを入れて修正を行いましょう。

クリスタ:線修正ツール(制御点)


ポインターを3次ベジェ曲線の上や制御点のある場所に持っていく間だけ制御点が表示され、修正ができるようになります。

クリスタ:3次ベジェ曲線の修正


また、[Shift]キーを押しながら「方向点」を移動させると水平・垂直、45度刻み(初期設定時)に配置させることができます。

参考記事

クリスタは便利!ベクター制御点ツールでこんなことができる!!

CLIP STUDIO PAINT(クリスタ)3次ベジェ曲線の紹介まとめ

クリスタの「3次ベジェ曲線」の紹介は以上となります。

バージョン1.9.9にアップデートする前は、3次ベジェ曲線の描画中に制御点を動かすことはおろか、見ることすらできませんでした。

描画中に調整・修正できるようになったのは大きな変化です!

これでまたクリスタでできることの幅が広がりました◎

皆さんも是非試してみて下さい◎

それではここまで閲覧ありがとうございました!
お疲れ様でした!!


▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】

CLIP STUDIO PAINT PRO


▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】

CLIP STUDIO PAINT EX


参考記事:クリスタを購入する3つの方法と手順紹介!!


▼動画視聴型お絵描き講座【Palmie(パルミー)

▶パルミーについて詳しく見る