Bézier Curve Tutorial
Updated: 2026-05*
本記事は2020年以前に執筆したものです。バックアップとして掲載していますが内容は古く、リンクも切れている可能性があります。
1. ベジェ曲線とは
ベジェ曲線（Wiki）は、当時フランスの自動車会社ルノーの技術者であったピエール・ベジェ氏が車体デザインのためにコンピューター上で滑らかな曲線を描く手法として考案したもの。複雑な凹凸を持つ曲線でも、制御点の座標と関数によって表現できる。
（https://en.wikipedia.org/wiki/Bézier_curve より）
下図のように、制御点P0を接点、P0、P1を結ぶ線分をその接線、P3を接点、P2、P3を結ぶ線分をその接線となる曲線が描かれることから、直感的に理解しやすく、Adobe IllustratorやAdobe Flashなどのベクターグラフィックスの描画に利用されている。
2. ペンツールと曲線ツール
2.1 ペンツール
※ペンツールはAdobe IllustratorやPhotoshopにも搭載されているが、本演習ではIllustrator環境での操作を解説する。
ペンツールは直線やベジェ曲線を描くことができるツール。ペンツールをマスターしていることが、Illustratorを使えることの基準とも言われるほど、Illustratorの代表的なツール。その操作方法は独特であるため、その特徴を理解して思い通りの図形を描くことができるようになるためには練習が必要。
下図のように、ペンツールでドラッグしながら曲線を描くと、アンカーポイントからハンドル（別名：方向線）と呼ばれる補助線が現れる。このハンドルを調整することで曲線の曲がり方を制御する。ペンツールで描かれるカーブはベジェ曲線であり、アンカーポイントを接点としてハンドルに接するように曲線が描かれる。
アンカーポイントとアンカーポイントの間に生成される線分をセグメントと呼び、セグメントが連続して全体のパスを形成する。
2.2 曲線ツール（Illustrator CC 2014以降）※紹介のみ
曲線ツールは、Illustrator CC 2014から導入された新しいツール。2014年10月にリリースされたiPadアプリAdobe Illustrator Drawの中にも搭載されているもので、ペンツールとは異なり、クリックを基本とした単純な操作で直線や曲線を描くことができる。厳密な曲がり具合などはペンツールを使わなければ描くことができない場合もあるが、簡単に連続したカーブを描けるものとしてはとても便利なツール。曲線ツールで描いたものもベジェ曲線であるため、ペンツールで調整することが可能。
3. ハンドルのバリエーション
ペンツールでベジェ曲線を描く場合、ハンドルを調整して曲がり方を変化させることができるが、ハンドルには操作方法によって、以下の5つのバリエーションが存在する。
3.1 一体化した２つのハンドル（同じ長さ）
ペンツールをドラッグして描いた最初の状態。もしくは、すでに存在するアンカーポイントをアンカーポイントツールでドラッグした状態。（描画手法② 参照）
3.2 一体化した２つのハンドル（異なる長さ）
3.1の状態で、片方のハンドルをダイレクト選択ツールで伸縮した状態。（描画手法② 参照）
3.3 折り返したハンドル
ペンツールでドラッグしている最中にOPTIONキーを押して折り返した状態。もしくは、3.1または3.2の状態の片方のハンドルをアンカーポイントツールで折り返した状態。（描画手法③ 参照）
3.4 １つのハンドル
直線から曲線、曲線から直線を描く際のハンドルの状態。（描画手法④、描画手法⑤ 参照）
3.5 ハンドルなし
パスを直線で構成した状態。（描画手法① 参照）
4. ダイレクト選択ツール
ダイレクト選択ツールはベジェ曲線のアンカーポイントやハンドルの操作を行うことができる。
セグメント上をドラッグすると、アンカーポイントは維持したままカーブを調整できる。
通常、ツールバーからダイレクト選択ツール（P）を選ぶと、常時ダイレクト選択ツールとして動作するが、ここではツールとしてはペンツールを維持しながら、Commandキーを押しているときのみダイレクト選択ツールになる方法で作業を行う。
※ツールバーからダイレクト選択ツール、ペンツール順でクリックした場合のみ。選択ツール、ペンツールの順でクリックした場合は、Commandキーを押した時に選択ツールになる。
ペンツールでラインを描いた後にCommandキーを押しながらアートボード上の何もない所をクリックすると描画状態を抜けて次のラインを描くことができる。同じことはRETURNキーを押すことでも可能。図形として閉じる場合は必要ない。
5. アンカーポイントの切り替えツール
※パス上にアンカーポイントを出現させるためには、セグメントもしくはアンカーポイントをダイレクト選択ツールで選択する必要がある。
アンカーポイント切り替えツールでは、すでに存在しているハンドルの端をドラッグして折り返したり、長さや角度を修正することができる。
アンカーポイント切り替えツールで、すでに存在しているハンドルを持つアンカーポイント上をクリックすると、ハンドルのないアンカーポイントに変わる。
すでに存在しているアンカーポイント上でドラッグすると、ハンドルの状態がリセットされて、一体化して同じ長さのハンドルが現れる。
通常、ツールバーからアンカーポイントの切り替えツール（SHIFT+C）を選ぶと、常時アンカーポイントの切り替えツールとして動作するが、ここではツールとしてはペンツールを維持しながら、OPTIONキーを押しているときのみアンカーポイントの切り替えツールになる方法で作業を行う。
6. アンカーポイントの追加/削除ツール
6.1 アンカーポイントの追加ツール
アンカーポイントの追加ツールは、パス上をクリックしてアンカーポイントを追加することができる。ペンツールの状態でパス上をマウスオーバーすると自動的にアンカーポイント追加ツールに切り替わるので、クリックして追加することができる。
6.2 アンカーポイントの削除ツール
アンカーポイントの削除ツールは、すでに存在しているアンカーポイントをクリックして削除することができる。ペンツールの状態ですでに存在しているアンカーポイント上をマウスオーバーすると自動的にアンカーポイント削除ツールに切り替わるのでクリックして削除できる。
7. キーボードの使い方
ペンツール、ダイレクト選択ツール、アンカーポイントツールなどを切り替えながら効率的に作業を行うには、キーボードショートカットを利用する必要がある。
私の使い方の一例だが、以下にあげる機能を左手を使って行うようにしている。
- ペンツール+Command：ダイレクト選択ツール
- ペンツール+OPTION：アンカーポイントツール
- Command+Z：アンドゥ
- SHIFT：軸方向拘束など
下図は左手のキーボード配置。
8. 描画手法① 直線から直線
※下準備として、塗りの色はなしで線の色のみ指定して、太さを4ptにしておく。
ペンツールで下図のようにクリックして線分を作成していく。最後はCommandを押しながら何もない場所でクリックしてパス描画を終了。
9. 描画手法② 曲線から曲線（連続）
下図のように、ペンツールをドラッグしながら曲線を描く。ハンドルの長さと傾きで描かれるカーブの曲がり方が変化する。
10. 描画手法③ 曲線から曲線（折り返し）
曲線を折り返すためには、描画手法②のドラッグした後にOPTIONキーを押してアンカーポイントの切り替えツールに持ち替え、ハンドルの端をドラッグする。
11. 描画手法④ 曲線から直線
曲線から直線に切り替えるには、ペンツールで同じ点をクリックする。進行方向のハンドルが消えるので、そこから直線を描くことができる。
12. 描画手法⑤ 直線から曲線
直線から曲線へ切り替えるには、ペンツールのままで描画手法②の同じ点からドラッグする。
13. パスを閉じる、パスの再開
13.1 パスを閉じる
パスを閉じるためには、ペンツールで始点をクリックもしくはドラッグして接続する。ペンツールが始点に重なったときは、下図のようにペンツールの右下に○が表示される。
パスにはオープンパスとクローズパスがあり、下図左のように始点と終点が閉じていないものをオープンパス。下図右のように始点と終点が閉じているものをクローズパスと呼ぶ。
13.2 パスの再開
一度描画を終了したオープンパスをつなげて描くには、ペンツールでパスの端をクリックもしくはドラッグする。前回描画終了した時点で、クリックして終了したか、ドラッグして終了したかが接続したパスの状態に関わる。必要な場合はアンカーポイントの切り替えツールを使って修正する。
下図のようにペンツールの右下にスラッシュが表示された場合、パスの再開を表す。
14. 練習図形① 家形
下図のように線のみで構成された図形を作成する。45度、90度はSHIFTキーを押しながらクリックする。また、スマートガイドを使えば、水平・垂直位置を正確にポイントすることができる。
15. 練習図形② 円形
下図のように円形を作成する。ハンドルを水平、垂直にする場合はSHIFTキーを押しながらドラッグする。
ここでは練習のためにペンツールで円形を作成したが、実際ペンツールだけで正円を描くのは難しいし面倒。Illustratorでは楕円ツールを使えば簡単に正円や楕円を描くことができるので、正確な円が必要な場合は楕円ツールを使う。
16. 練習図形③ ハート形
下図の２つのように、同じハート形状でも異なる数のアンカーポイントで描くことができる。アンカーポイントは多すぎるとカーブが凸凹になりやすくなるが、少なすぎると求めるカーブを描けない。最小限のアンカーポイントで描くことが、滑らかなカーブを描くことにつながる。
17. 既存オブジェクト、文字の修正
17.1 既存オブジェクトの修正
矩形ツール、楕円ツール、多角形ツールなどで作成したオブジェクトもパスでできているので、ダイレクト選択ツールやペンツールで修正することができる。
17.2 既存文字の修正
文字のデザインを修正するためには文字のアウトライン化を行う。下図左のように文字ツールで入力した文字を右クリックしてコンテクストメニューを表示して「アウトラインを作成」をクリック。文字はパスに変換され、ダイレクト選択ツールやペンツールで修正することが可能になる（下図右）。一度アウトライン化したものは文字ツールで入力し直すことはできない。
18. Bézier Game
ペンツールに慣れてきたら、下のBézier Gameに挑戦してみよう。最後までクリアできたらマスターしたと言ってもいいかも!?
Bézier Gameは、インタラクションデザイナーの Mark MacKay がウェブ上で公開しているベジェ曲線をゲーム感覚で特訓できるサイト。
基本的な進め方の練習モードから、複雑な図形を限られた操作回数でクリアするモードがある。最終ステージまで進むにはベジェ曲線の特徴を理解し、先読みしながら描画しないとクリアできない。マウスクリックとドラッグ以外に使えるキーはSHIFTキーとOPTIONキーのみ。それらのキーも溝のあるライン上でしか使うことができないため、Adobe Illustratorのペンツールよりも制限された操作の中で行う必要がある。Cmd+ZのUndoは可能。
19. その他の関連ツール
19.1 はさみ
クリックしてパスを分割。
19.2 ナイフ
選択したクロージングパス（閉じたパス）上でドラッグするとオブジェクトを分割することができる。パスが閉じていなくてもナイフツールを使うと強制的に閉じた上で処理する。
19.3 消しゴムツール
選択したクロージングパス（閉じたパス）上でドラッグするとカーソルサイズで削除しながらオブジェクトを分割することができる。ツールパネル上をダブルクリックして太さ、真円率、角度を調整できる。