ベジェ曲線 — 制御点が形を操るしくみ

画面に映るフォントも、イラストのペンツールの曲線も、正体はほぼすべてベジェ曲線。その作り方は驚くほど単純で、「直線の上を同じ割合で進む」を繰り返すだけ。制御点を動かしながら、そのからくりを見抜きます。

1. 直線をまぜるだけ — de Casteljau のアルゴリズム

3つの点 P0, P1, P2 を用意します。P0→P1 の上と P1→P2 の上を、それぞれ同じ割合 t だけ進んだ2点を結ぶ。できた線分の上を、さらに t だけ進む。t を 0 から 1 まで動かしたときのこの点の軌跡が2次ベジェ曲線です。

2次ベジェ — 補間の補間が曲線を生む（de Casteljau）
灰色＝制御点を結んだ折れ線、オレンジ＝1段目の補間点とそれを結ぶ線分、白＝その線分をさらに t で分けた点。白い点の通り道（水色）がベジェ曲線。スライダーを動かすと補間の様子が止めて見られます。
B(t) = (1−t)2 P0 + 2(1−t)t P1 + t2 P2 de Casteljau の2段階の補間を式に展開しただけ。3つの重みは足すと必ず 1 になる
POINT — 「補間の繰り返し」だから強い 必要な計算は線形補間（lerp）だけなので数値的に安定。しかも図の中間点をそのまま使うと、曲線を任意の t で2本のベジェ曲線に分割できる。フォントの描画エンジンはこの分割を繰り返して曲線を短い直線に砕いてから塗っている。

2. 3次ベジェ — デザイン道具の主役

制御点を4つに増やしたのが3次ベジェ曲線。始点 P0・終点 P3 と、2つのハンドル P1・P2 で形を操ります。Illustrator や Figma のペンツールで引っ張る「あのハンドル」の正体です。曲線は P0 からハンドル P0P1 の方向に発進し、P3 へハンドル P3P2 の方向から到着します。

3次ベジェ — 2つのハンドルで形を作る
オレンジの線分がハンドル。スライダーで P1・P2 を動かすと、曲線が磁石に引かれるように形を変えます。ピンクの点は曲線上を巡回中。ハンドルを交差させるとループ状の曲線も作れます。
B(t) = (1−t)3 P0 + 3(1−t)2t P1 + 3(1−t)t2 P2 + t3 P3 補間が3段階になっただけ。SVG の path の C コマンドはこの4点を並べたもの
注意 — 制御点は「通る点」ではない 曲線が実際に通るのは両端の P0 と P3 だけ。P1 と P2 は曲線を引っ張る磁石のような存在で、その上を曲線は（普通は）通らない。「与えた点を全部通る曲線」が欲しいときは、スプライン補間という別の道具を使う。

3. 曲線をつないで文字をつくる

1本のベジェで描けるのは単純なカーブだけ。フォントの1文字やイラストの輪郭は、何本ものベジェ曲線をつないでできています。つなぎ目をなめらかに見せる条件はただひとつ — 前の曲線の終わりのハンドルと、次の曲線の始まりのハンドルが一直線に並ぶことです。

つなぎ目のなめらかさ — 接線がそろうか、折れるか
水色と緑は別々の3次ベジェ曲線。折れ角 0° ではつなぎ目のハンドル（オレンジ）が一直線に並び、走る点もなめらかに通過します。角度をつけるとつなぎ目にカドが生まれる。ペンツールで「ハンドルを折る」操作は、これを意図的にやっています。

4. 速さはでこぼこ — 等間隔の t は等間隔に進まない

t を一定の速さで増やしても、曲線上の点は一定の速さでは進みません。制御点が偏っていると、点はあるところで駆け足に、あるところでのろのろになります。点を等速で走らせたいときは、t ではなく道のり（弧長）を基準に補正します。

同じ曲線・違う進み方 — 弧長による補正
上下は同じ曲線。上は t を等間隔に刻んだ目盛り（間隔がバラバラ＝速さにムラ）、下は道のりが等しくなるよう t を補正した目盛り（等間隔＝等速）。2つの点の走り方の違いに注目してください。
一歩先へ — フォントとアニメーションの現場で TrueType フォントは2次ベジェ、PostScript / OpenType(CFF) フォントは3次ベジェで輪郭を表す。CSS の cubic-bezier(…) は3次ベジェをイージング曲線として使ったもの。ゲームでキャラクターを曲線に沿って等速で走らせるときは、ここで見た弧長による補正（弧長パラメータ化）が必須になる。

5. まとめ — 曲線は補間でできている