Filmora
Filmora - AI動画編集アプリ
強力でシンプルなビデオ編集アプリ
入手

【2026年最新版】ベジェ曲線の使い方|Illustratorで曲線を描くコツと練習法、動画編集にも活かす

fukuda
fukuda リリース日: Jan 24, 26, 更新日: Jan 27, 26

「Illustratorで曲線を描こうとすると、どうしてもガタガタになってしまう…」

ベジェ曲線のハンドル操作が、直感的に理解できず挫折した」

「動画編集でも、イラレのように自由な形でマスクを切ったり、アニメーションを作ったりしたい」

このように悩んでいる方も多いのではないでしょうか?

本記事では、難解に思われがちなベジェ曲線の仕組みを「感覚」ではなく「論理」で紐解き、Illustratorにおける最短の習得メソッドからFilmoraのペンツールを使った動画編集への応用までを体系的に解説します。

今日から「なんとなく」の操作を卒業し、アンカーポイントとハンドルを正しく理解して、思い通りの曲線とクリエイティブな動画表現をマスターしましょう!

▼ この記事で分かること

  • ベジェ曲線の仕組みと「アンカーポイント」「ハンドル」の正しい役割
  • Illustratorで綺麗な曲線を最短で描くための3ステップと練習メニュー
  • 曲線が「ガタガタする」「尖る」原因と、即座に直すための解決策
  • 動画編集ソフトFilmoraのペンツールを使い、自由なシェイプやマスクアニメーションを作る方法
【新機能】アニメーションの秘訣!アンカーポイントの使い方!最新バージョンの新機能解説 |Wondershare Filmora

関係記事: イラレでアンカーポイントが表示されない?表示させる設定と直し方をやさしく解説

Part1. ベジェ曲線の使い方の結論|30秒で要点をつかむ!

デジタル描画における最大の障壁の一つとよく言われるベジェ曲線ですが、実はその習得に「センス」は不要です。必要なのは「感覚」ではなく、仕組みを理解する「論理」だけです。

本章では、以降の実践的な解説の土台となる、ベジェ曲線の「絶対的なルール」を結論から解説します。

1-1. ベジェ曲線とは何か|アンカー点とハンドルで曲線を決める

ベジェ曲線

結論から言うと、ベジェ曲線とは「アンカーポイント(点)」と「ハンドル(線)」の2つの要素だけで構成される数式です。

元々は自動車企業ルノー社の技術者「ピエール・ビジェ」氏と、シトロエン社の「ド・カステリョ」氏が考案した技術であり、その名から『ビジェ曲線』と言われています。

元は自動車デザインのために考えられた技術が、現代でも様々なシーンで活用されているというのは面白いですね。

さて、私たちが画面上で線を引くとき、裏側ではコンピュータがこの2つの要素を計算し、滑らかなカーブを描画しています。

ベジェ曲線
  • アンカーポイント(錨):

    線が通過する「位置」を決める点。

  • ハンドル(舵):

    線が出る「方向」と、カーブする「勢い(強さ)」を決める線。

初心者が混乱する最大の原因は、この2つを同時に操作しようとすることです。

「アンカーポイントで場所を決め、ハンドルで形を作る」という役割分担を明確に意識するだけで、迷いはなくなります。

1-2. ベジェ曲線が難しい理由|点を増やすほど崩れる

なぜ、あなたの描く曲線はガタガタになってしまうのか?

その答えはシンプルで、「アンカーポイントを打ちすぎているから」です。

ベジェ曲線には「点と点の間をコンピュータが最も滑らかにつなぐ」という性質があります。

しかし、操作側が不安がって細かく点を打つと、その「滑らかさ」が寸断され、強制的に指定された位置を通るために線が歪んでしまうのです。

▼ 失敗しがちな人の思考回路

「カーブが思い通りにならない」→「点を追加して修正しよう」→「線がボコボコになる」→「さらに点を追加して泥沼化」

つまり「アンカーポイントは少なければ少ないほど、曲線は美しくなる」。これがベジェ曲線の鉄則です。

1-3. 今日から上達する3原則|点を減らす・骨格を先に作る・触る順番を固定

ベジェ曲線-上達する3原則

ここまでの内容を踏まえて、これからIllustratorでベジェ曲線をマスターするために、以下の「3つの原則」を常に意識してください。

このルールを守るだけで、習得スピードは劇的に上がります。

  • 原則1:最小限のアンカーポイントで描く

    円はたった「4点」で描けます。S字カーブなら「3点」です。不必要な点はノイズでしかありません。

  • 原則2:「直線」で骨格を作ってから「曲線」にする

    最初から完璧な曲線を引こうとしないでください。まずはカクカクの直線で大まかな形(骨格)を作り、後からハンドルを引き出して曲線(肉付け)にするのがプロの手順です。

  • 原則3:操作する順番を固定する

    Step1. アンカーポイントの位置を決める

    Step2. ハンドルの「角度」を決める

    Step3. ハンドルの「長さ」を調整する

    この順番を崩さなければ、迷子になることはありません!

関係記事: Filmora ペンツール徹底ガイド:モーションパス&アニメーションの作り方

【新機能】「ペンツール」徹底解説|マップアニメーション・フレーム演出も自由自在!使い方と活用アイディア3選|Wondershare Filmora

Part2. ベジェ曲線の書き方|イラレペンツールで曲線を描く3ステップ

多くの人が挫折するのは、最初から「完璧な曲線」を一筆書きで描こうとするからです。プロでも、一発で理想の線を引くことは稀です。

最短で上達するコツは、描く工程を「骨格作り(直線)」と「肉付け(曲線化)」の2段階に分けることです。この手順なら、アンカーポイントの打ちすぎを物理的に防ぎ、修正しやすいデータを確実に作れます。

2-1. まずは準備|描く前に決めること

描画を始める前に、ツール設定と「どこに点を打つか」の戦略を決めます。

  • ツールの設定:
ベジェ曲線-ツールの設定

[ペンツール]を選択し、塗りを[なし]、線を[見やすい色(黒や赤)]に設定します。

  • 点の位置決め:

    「曲がり始め」や「曲がり終わり」に点を打とうとしてはいけません。

    「一番尖っている場所(角)」と「カーブの頂点(山の一番高い所)」の2種類だけで構成するのが正解です。

Step1. アンカー点を置いて骨格を作る

アンカー点を置いて骨格を作る

まずは[ペンツール]を使い、対象物の形をざっくりと「直線」だけで形成し、骨格を形成していきます。

この段階では絶対にドラッグしないでください。「クリック」だけで点(アンカーポイント)を置いていきます。

結果として、カクカクした多角形(骨格)が出来上がります。

なお、模写したい画像や参考にしたい画像がある場合は、レイヤーに追加して、不透明度を低くすることで簡単に“トレース”環境が実現できますよ!

Step2. クリック+ドラッグでハンドルを出し曲線にする

クリック+ドラッグでハンドルを出し曲線

次に、骨格を曲線に変えます。

[アンカーポイントツール](Shift+C)を選択し、Step1で打った点を進行方向へ「クリック+ドラッグ」します。

ハンドルが引き出され、直線が滑らかなベジェ曲線に変形します。

アンカーポイントが不足している場合は、必要最小限を意識しながらペンツールで足していくと良いでしょう。

最後に調整するので、曲線が必要な箇所に必要な数だけベジェ曲線を配置する。という気軽な気持ちでOKですよ!

Step3. ダイレクト選択で最小操作の微調整

最小操作の微調整

最後に、[ダイレクト選択ツール](白矢印)を使って微調整します。

ここでの鉄則は、「アンカーポイントの位置は動かさない」ことです。

調整するのはハンドルの「長さ」と「角度」だけです。こうすることで、最小限の操作で理想のラインに吸着させることができます。

2-2. 曲線と直線の切り替え|角を作る・角を丸める

曲線と直線の切り替え

複雑な図形では、「滑らかな曲線」と「鋭い角(コーナー)」が混在します。この切り替え操作も、[アンカーポイントツール]ひとつで完結します。

▼ 操作一覧

目的 操作方法(アンカーポイントツール選択時) 状態の変化
直線を曲線にする 点をドラッグしてハンドルを引き出す 角 → スムーズ
曲線を角(直線)にする 点を一度クリック(ハンドルを消す) スムーズ → 角
ハンドルの片側だけ折る ハンドルの先端をドラッグ 滑らかに続く線 → 鋭く折れ曲がる線

特に「ハンドルを折る」操作は、ハートの上のくぼみや、葉っぱの先端のような「尖ったカーブ」を描く際に必須のテクニックです。

ちなみにAltキー(Macの場合はOptionキー)を活用すれば、一筆書きでもハンドルを折る操作が可能になります。

2-3. きれいな曲線の基準|ハンドルは左右対称を起点にする

「なんとなく形にはなったが、美しくない」

そう感じる時は、ハンドルのバランスを確認してください。美しいベジェ曲線には幾何学的なルールがあります。

  • ルール1:ハンドルは左右対称が基本

    カーブの入りと出の勢いが均等であるほど、自然で美しい曲線になります。まずは長さを揃える癖をつけましょう。

  • ルール2:ハンドルは進行方向と水平・垂直に

    可能な範囲で、ハンドルを[Shift]キーを押しながら水平・垂直に引くと、歪みが矯正され、整然としたパスになります。

  • ルール3:ハンドルの長さは「次の点までの距離の約30%」

    ハンドルが短すぎるとカクカクし、長すぎるとS字にうねります。隣り合うアンカーポイント同士の距離の3分の1程度が、最も自然な円弧を描く黄金比です。

上記のルールはいずれも状況によるものですが、覚えておけば、大きく間違わない「基本」と言えるものです。

ぜひ頭の片隅に置いておいてください。

💡 プロの時短テク:左右対称なら「半分」しか描かない

左右対称の形を描く

ハートや瓶のように左右対称の形を描く場合、プロは全部を描きません。

  1. 左半分だけを完璧に描く。
  2. [リフレクトツール]で反転コピーする。
  3. 2つを結合する。

この方法なら、作業時間は半分で、左右のバランスが崩れる心配もゼロになります。

Part3. ベジェ曲線の練習|直線→円弧→S字の最短メニュー

「理屈はわかったけれど、手が動かない」

そんな方は、以下の3つの練習メニューを順番にこなしてください。

闇雲にトレースするよりも、この「型」を反復する方が、脳と指がベジェ曲線の挙動を最短で記憶します。

3-1. 練習1|2点で円弧を描く

2点で円弧を描く

まずは基本中の基本、きれいな「半円」をアンカーポイント2つだけで描きます。

始点を上へ、終点を下へ、[Shift]キーを押しながらドラッグするだけです。

これだけで、コンパスで描いたような美しい円弧が生まれます。

3-2. 練習2|S字カーブを2つの円弧で分ける

S字カーブを2つの円弧で分ける

次に、S字カーブです。多くの人が「始点」と「終点」だけでS字を作ろうとして失敗します。

正解は、「2つの円弧をつなげる」という発想です。

中央のアンカーポイント(変曲点)で、ハンドルが上下一直線(シーソーの状態)になっていることが、滑らかなS字の条件です。

3-3. 練習3|ロゴ風の曲線をトレースする

ロゴ風の曲線をトレース

最後に、実際のロゴやアイコンをトレース(なぞり書き)します。

ここでは「10分間」という時間制限を設けてください。時間を区切ることで、「迷う時間」を無くし、直感的に骨格を見極める力が養われます。

「Part2」の手順通り、まずは直線で骨格を作り、後から曲線を引っ張り出しましょう。

3-4. 【番外編】ゲームで「一筆書き」を習得する

「一筆書き」を習得

ここまで紹介したのは「失敗しないための安全な描き方」ですが、プロの現場では[Alt]キーなどのショートカットを駆使して、ドラッグしながら一発で曲線を引く「一筆書き」もよく使われます。

本記事の方法で「点の仕組み」を理解したら、次は以下の無料サイトで、ゲーム感覚で一筆書きに挑戦してみましょう。

▼ The Bézier Game(ベジェ・ゲーム)

https://bezier.method.ac/

  • 特徴: アンカーポイントの数に制限があり、自然と「最小限の点」で描く力が身につく。
  • 活用法: チュートリアルで「Shift」や「Alt」を使ったハンドル操作も学べるため、脱・初心者への登竜門として最適です。

関連記事:After Effectsのアンカーポイント設定ガイド|移動方法&代替動画編集ソフト5選

アンカーポイント操作もかんたん!Filmoraで試してみよう。

Part4. イラレでベジェ曲線がうまく描けない原因4選

どんなに練習しても線が歪む場合、原因は主に以下4パターンのいずれかです。

原因さえ特定できれば、修正は一瞬です。

4-1. ガタガタする原因|点を増やしすぎている

イラレでベジェ曲線がうまく描けない原因
  • 症状: 線が波打っている、滑らかさがない。
  • 原因: 「ズレたら直そう」という不安から、短い間隔でアンカーポイントを打ちすぎている。
  • 解決策:

    Illustratorには、AIが自動で直してくれる「2つの神機能」があります。どちらを使ってもOKです。

    • A. [パスの単純化]を使う(点を減らしたい時)

      メニューの[オブジェクト]>[パス]>[単純化]を選択。

      不要なアンカーポイントを自動で間引き、データそのものを軽く綺麗にします。

    • B. [スムーズ]を使う(形を整えたい時)

      [スムーズツール]でガタつく場所をなぞるか、メニューの[オブジェクト]>[パス]>[スムーズ]でスライダーを動かします。

      シワを伸ばすアイロンのように、波打ったラインを瞬時に滑らかにしてくれます。

4-2. 尖る原因|ハンドルが短すぎる・角の扱いが混在

イラレでベジェ曲線がうまく描けない原因
  • 症状: カーブがカクカクしている、丸みが足りない。
  • 原因: ハンドルを引き出す長さが足りていないか、アンカーポイントが「コーナー(角)」の設定になっている。
  • 解決策:

    ハンドルを長く伸ばすか、[アンカーポイントツール]で点をドラッグし直し、ハンドルを再生成してください。ハンドルの長さは、次の点までの距離の約30%〜40%が目安です。

4-3. うねる原因|ハンドルの向きがズレている

イラレでベジェ曲線がうまく描けない原因
  • 症状: 意図しない方向に線が膨らむ(S字になりかける)。
  • 原因: 進行方向とハンドルの向きが逆転している、またはねじれている。
  • 解決策:

    一度ハンドルを収納(点をクリック)してリセットし、改めて進行方向へ素直にドラッグし直します。ハンドルは必ず「これから線が進む方向」へ伸ばすのが鉄則です。

4-4. ペンツールが難しい時の代案|曲線ツールで滑らかに描く

イラレでベジェ曲線がうまく描けない原因
  • どうしてもうまくいかない時:

    無理に[ペンツール]に固執する必要はありません。Illustratorには[曲線ツール]という強力な味方がいます。

  • 使い方:

    曲げたい場所をクリックしていくだけで、AIが自動的に最適なカーブを計算してつないでくれます。

    「[ペンツール]は清書用、[曲線ツール]はラフ用」と使い分けるのも賢い手段です。

Part5. 習得したベジェ曲線をFilmoraで実践|そのスキル、動画でも武器になる

ここまで記事を読み進め、Illustratorでのベジェ曲線操作に慣れてきたあなた。

「せっかく覚えたこの技術、静止画だけで終わらせるのはもったいない」と思いませんか?

実は、最新の動画編集ソフトFilmoraには、Illustratorと全く同じ操作感の「ペンツール」が搭載されています。

つまり、Part2で覚えた「点とハンドルの操作」が、そのまま動画の世界でも通用するのです。

イラレで作った素材を読み込む手間すら不要。動画ソフトの中で直接、自由な図形を描いたり、「描いた線が動くアニメーション」を一瞬で作ったりする、新しいクリエイティブの扉を開きましょう。

5-1. Filmoraの「ペンツール」とは?|イラレと同じ感覚で描ける

テキストをパスに沿わせる!クリップを3Dに!表現力アップの新機能・2選|Wondershare Filmora

これまで、動画の中に自由な図形や複雑なマスクを作りたい時は、わざわざIllustratorを開いて素材を作り、書き出して、動画編集ソフトに読み込む…という面倒な工程が必要でした。

しかし、その常識を覆したのが、Filmoraに搭載された「ペンツール」です。

動画編集ソフトFilmoraの画面上に、直接ベジェ曲線を描画できる機能です。

マスク(切り抜き)だけでなく、図形や線そのものを「シェイプ」として作成できます。

  • 最大のメリット: 「行ったり来たり」がゼロになる。

    ちょっとしたテロップの装飾や、特殊な形の切り抜きなど、全ての「描く作業」がFilmoraだけで完結します。

  • 操作感はそのまま:

    クリックで点、ドラッグでハンドル。イラレで培った「あの感覚」がそのまま使えるため、新たな学習コストは一切不要です。

  • 動画ならではの機能:

    描いた線に対して、後から色や太さを変えるのはもちろん「線が徐々に描かれるアニメーション」なども数値操作だけで一瞬で作れます。

つまり、Filmoraにおけるペンツールは、「Illustratorの表現力」と「動画の機動力」を掛け合わせた最強の機能なのです。

5-2. 実践1:自由な形で切り抜く(描画マスク)

早速実践に入りましょう!Filmoraをまだお持ちでない方は、ぜひ無料インストールした上で、一緒に操作しながら読み進めてください♪

被写体の切り抜き(マスク)も、これまでは「四角」や「丸」が主流でしたが、ペンツールを使えば「指先単位の精密な切り抜き」が可能です。

Filmoraの「ペンツール」

Step1. クリップを選択し、マスク設定から[ペンツール](描画マスク)を選びます。

Filmoraの「ペンツール」を選び

Step2. 切り抜きたい対象の輪郭にアンカーポイントを打っていきます。

アンカーポイントを打ち

Step3. ハンドル操作で、曲面(肩や頭のラインなど)にピタッと合わせます。

画像だけでなく、動画に対してもベジェ曲線を使った様々な表現が可能になるため、表現の幅が大きく広がりますよ!

5-3. 実践2:線が伸びる「マップアニメ」を作る(トリムパス)

更に、ここからが動画編集ならではの醍醐味です。

描いたベジェ曲線に「トリムパス」という設定を加えるだけで、地図上のルートが徐々に伸びていくアニメーションが作れます。

▼ 作成手順

ペンツールを起動

Step 1. 地図画像をタイムラインに追加してペンツールを起動

ルート(曲線)を描く

Step 2. プレビュー画面上にベジェ曲線を使ってルート(曲線)を描く

キーフレームで動かす

Step 3. プロパティの「トリムパス」にある「終了」の数値を0%から100%へキーフレームで動かす

線が自動で描かれていく様子をチェック

Step 4. [エフェクト]や[色]などから線を装飾した上で、線が自動で描かれていく様子をチェック

さらに[パスフォロー]機能を使えば、描いた線の上にイラスト(車や飛行機)を乗せ、ルートに沿って走らせることもワンクリックで可能です。

更に高度な、Google Earth Proと連携したマップアニメーションの作り方についてはこちらの動画もチェックしてみてください!

5-4. Filmoraをおすすめする理由|学習コストが「ゼロ」になる

Illustratorでベジェ曲線を練習したあなたが、動画編集ソフトとしてFilmoraを選ぶ最大のメリット。

それは、「新しい操作を覚える必要がない」ことです。

項目 Filmoraのメリット
操作の共通化 アンカーポイント、ハンドルの挙動がイラレとほとんど共通。直感的に扱える。
トリムパス イラレでは難しい「書き順アニメ(線が伸びる表現)」が数値操作だけで作れる。
AIとの融合 マスクが面倒な時は「AIマスク」、細かく拘りたい時は「ペンツール」と使い分けが可能。

「イラレで描ける」ことは、すなわち「Filmoraでも描ける」ことを意味します。

この2つのソフトを組み合わせることで、静止画も動画も、あなたの意のままにコントロールできるようになります。

Filmoraに搭載されているペンツールを使って、ベジェ曲線など、細かい表現をする方法については、わかりやすいGIF映像付きで、以下の記事で完全解説しています。

ぜひ、こちらも併せてご覧ください!

関連記事:Filmora ペンツール徹底ガイド:モーションパス&アニメーションの作り方

Part6. Q&A|ベジェ曲線の使い方でよくある質問

Q1. ベジェ曲線とは何かを一言で言うと?

結論、「アンカーポイント(通過点)とハンドル(制御線)で描く、拡大しても劣化しない計算された曲線」です。

詳しくは[Part1-1]をご覧ください。

Q2. ベジェ曲線の練習は何から始めるべき?

結論、「2点での円弧作成」から始めてください。いきなり複雑な絵を描こうとせず、単純な図形の反復が近道です。

一方で一筆書きのような操作は、覚えると時短になり、非常に便利である反面、慣れと練習が必要になります。

具体的な練習メニューは[Part3]で解説しています。

Q3. きれいな曲線が描けない最大の原因は?

結論、「アンカーポイントの数が多すぎること」です。

点は最小限(頂点のみ)にし、ハンドルで形を作るのが鉄則です。

修正方法は[Part4]を確認してください。

Q4. 動画編集でもベジェ曲線は役立つ?

もちろん、非常に役立ちます。

例えば本記事で紹介した最新のFilmoraでは、イラレと同じペンツールを使って自由な形のマスク(切り抜き)を作成したり、描いた線が動くアニメーション(トリムパス)を作ったりできます。

これらを使いこなすには、ベジェ曲線の操作スキルが必須となります。詳しくは[Part5]で紹介しています。

まとめ:ベジェ曲線を制する者はクリエイティブを制する

本記事では、Illustratorでのベジェ曲線の描き方から、動画編集への応用までを解説しました。

▼ 本記事のポイント

  • 点は最小限に: アンカーポイントは「角」と「頂点」だけに打つ。
  • 骨格から肉付け: 最初は直線で形を作り、後からハンドルで曲線にする。
  • 動画でも活躍: Filmoraなどの編集ソフトで、自由なシェイプ作成やマスク描画の基礎になる。

ベジェ曲線は、一度「手の感覚」として覚えてしまえば、一生使えるクリエイターの共通言語です。

まずはIllustratorで基本の形を練習し、その感覚を武器に、Filmoraで魅力的な動画制作にも挑戦してみてください。自由自在な曲線と表現力が、あなたの作品のクオリティを劇的に高めてくれるはずです。

関連記事:【新機能】「ペンツール」徹底解説|マップアニメーション・フレーム演出も自由自在!使い方と活用アイディア3選|Wondershare Filmora

役に立ちましたか?コメントしましょう!

登録 / ログイン してからコメントを書いてください
user
{{item.name || userName}}
{{item.time}}
{{item.message}}
{{item.likes}} 返信をキャンセルする 返信
登録 / ログイン してからコメントを書いてください
user
{{item1.type == 2 ? authName : item1.name ? item1.name : userName}}
{{item1.time}}
@{{item1.reply_to_type == 2 ? authName : item1.reply_to_name ? item1.reply_to_name : userName}} {{item1.message}}
{{item.likes}} 返信をキャンセルする 返信
登録 / ログイン してからコメントを書いてください
fukuda
fukuda Jan 27, 26
記事をシェアする: