ベジェ曲線とは？仕組みをわかりやすく解説｜数式・Illustratorでの描き方・スプラインとの違い

ベジェ曲線は、始点と終点のあいだに置いた「制御点」で形を決める曲線です。曲線は制御点を必ずしも通りませんが、制御点を動かすと形が素直に追従します。そのためIllustratorのペンツール、SVGのパス、CSSのアニメーション速度、フォントの輪郭データまで、同じ仕組みが使われています。この記事では、線形補間を繰り返すだけで曲線ができる理由を具体的な座標で追い、数式、Illustratorでの描き方、Webでの書き方、スプライン曲線・Bスプライン・NURBSとの違いを順に説明します。

まとめ：ベジェ曲線の要点

• ベジェ曲線は、制御点どうしを同じ比率 t で内分する操作を、点が1つになるまで繰り返して得られる曲線。t を0から1まで動かした軌跡が曲線になる。
• 制御点が3つなら2次、4つなら3次。Illustratorのアンカーポイント2つとハンドル2本の組み合わせは3次ベジェ曲線1本にあたる。
• 曲線は始点と終点を通り、端点での向きは隣の制御点の方向になる。曲線全体は制御点を囲む凸包からはみ出さない。
• 多項式のベジェ曲線では真円を厳密に描けない。90度の円弧は制御点を半径の約0.5523倍の位置に置くと、誤差が半径の約0.027%に収まる。
• Bスプラインは制御点を動かしたときの影響が一部の区間だけに留まり、NURBSは重みを持たせることで円を厳密に表せる。寸法どおりの円が必要なCADではNURBSを選ぶ。

ベジェ曲線の定義と制御点の役割

ベジェ曲線は、並べた制御点 P0, P1, …, Pn から1本の曲線を作る方法です。P0 が始点、Pn が終点で、そのあいだの点は曲線を引き寄せる役割を持ちます。制御点の並びを線で結んだ折れ線を「制御多角形」と呼び、曲線はこの折れ線をなめらかにならしたような形になります。

制御点の数で決まる次数：1次・2次・3次の違い

次数は「制御点の数から1を引いた値」です。実務で出てくるのはほぼ次の3種類です。

2次ベジェは中間の制御点が1つだけなので、途中で曲がる向きを変えられません。S字を1本で描けるのは3次からです。これより高い次数は、制御点1つの影響が曲線全体に及んで扱いにくくなるため、描画ソフトでは3次の短い曲線をつなげて複雑な形を作ります。

Illustratorの用語と数学の制御点の対応

Illustratorで見える部品は、3次ベジェ曲線の4つの制御点にそのまま対応します。

ハンドルを伸ばすと方向点の位置が変わり、曲線のふくらみ方が変化します。ただし、曲がり具合はほかの制御点との配置にも依存し、ハンドルの長さだけでは決まりません。ハンドルが無い側では、対応する制御点がアンカーと重なります。ただし、片側のハンドルが無いだけでは直線になりません。セグメントの両端で対応するハンドルが無ければ直線になります。

ベジェ曲線の考案者：ルノーのベジェとシトロエンのド・カステリョ

名前はフランスの自動車メーカー、ルノーの技術者ピエール・ベジェに由来します。ベジェは1967年ごろ車体設計システムUNISURFで曲線を扱い、その方法を1968年1月のSAE（米国自動車技術者協会）の会議で技術論文680010として発表しました。同じ形式の曲線は、競合するシトロエン社のポール・ド・カステリョも独立に研究しており、遅くとも1963年には社内文書『Courbes et surfaces à pôles』にまとめています。社外に公表されたベジェの名前が定着しましたが、次の章で扱う計算手順にはド・カステリョの名前が残っています。表記は「ベジェ」「ベジエ」の両方が使われ、どちらも同じ曲線を指します。

ド・カステリョのアルゴリズムで見るベジェ曲線の作られ方

ベジェ曲線をわかりやすく理解する近道は、曲線上の1点を手で求めてみることです。やることは「隣り合う点を同じ比率で内分する」操作の繰り返しだけです。

t=0.5で曲線上の点を求める3段階の計算

制御点を P0=(0, 0)、P1=(30, 100)、P2=(170, 100)、P3=(200, 0) とし、t=0.5（ちょうど中間）の点を求めます。

1. 隣り合う点の中点を取る：P0-P1 から (15, 50)、P1-P2 から (100, 100)、P2-P3 から (185, 50)。
2. 得られた3点で同じ操作をする：(57.5, 75) と (142.5, 75)。
3. 残った2点の中点を取る：(100, 75)。これが t=0.5 における曲線上の点です。

t=0.25 なら各段で「4分の1の位置」を取ります。t を0から1まで細かく動かして点を並べると曲線が描けます。この途中で出てくる点は、t の位置で曲線を2本に分割したときの制御点にもなります。曲線の途中に点を追加しても形を変えずに済むのは、この分割が数学的に正確に行えるためです。

バーンスタイン多項式によるベジェ曲線の式

上の手順を式にまとめると、3次ベジェ曲線は次の形になります。

B(t) = (1-t)^3 * P0 + 3(1-t)^2 * t * P1 + 3(1-t) * t^2 * P2 + t^3 * P3    (0 <= t <= 1)

各制御点にかかる係数 (1-t)^3、3(1-t)^2 t、3(1-t)t^2、t^3 はバーンスタイン多項式と呼ばれ、どの t でも合計が1になります。つまり曲線上の点は、制御点の重み付き平均です。一般の n 次では、i 番目の制御点の係数が「n個からi個を選ぶ組み合わせ数 × (1-t)^(n-i) × t^i」になります。

次のJavaScriptは、ド・カステリョの手順をそのまま書いたものです。Node.js で実行すると、上の手計算と同じ値が出ます。

// 隣り合う点を比率 t で内分する
function lerp(a, b, t) {
  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
}

// 点が1つになるまで内分を繰り返す（次数を問わない）
function deCasteljau(points, t) {
  let p = points;
  while (p.length > 1) {
    const next = [];
    for (let i = 0; i < p.length - 1; i++) next.push(lerp(p[i], p[i + 1], t));
    p = next;
  }
  return p[0];
}

const P = [[0, 0], [30, 100], [170, 100], [200, 0]];
console.log(deCasteljau(P, 0.5));  // [ 100, 75 ]
console.log(deCasteljau(P, 0.25)); // [ 39.6875, 56.25 ]

t=0.25 の結果 (39.6875, 56.25) は、上の式に t=0.25 を代入した値と一致します。制御点の配列を3つにすれば2次、5つにすれば4次のベジェ曲線として同じ関数で計算できます。

ベジェ曲線の性質：端点の接線・凸包・円の近似

描画ソフトでの操作感や、ほかの曲線との使い分けは、ここで挙げる性質から説明できます。

ベジェ曲線の端点通過性と接線方向

t=0 で P0、t=1 で P3 になるので、曲線は必ず始点と終点を通ります。P0 と P1、P2 と P3 がそれぞれ異なる場合、始点での接線は P0 から P1、終点での接線は P2 から P3 の向きです。重なる場合は1階微分がゼロになるため、この説明だけでは接線の向きを決められません。Illustratorで方向線を回すと曲線の出ていく角度が変わるのはこのためです。

2本のセグメントを角を立てずにつなぐ条件もここから決まります。両側のハンドルがゼロでない場合、前のセグメントの P2 と次のセグメントの P1 が、接続するアンカーポイントを挟んで一直線に並べば、つなぎ目で進行方向がそろいます。Illustratorのスムーズポイントは、この3点を一直線に保つ仕組みです。

凸包性と、制御点1つを動かすと曲線全体が動く性質

0から1の範囲の曲線は、制御点をすべて囲む最小の凸多角形（凸包）の内側に収まります。描画エンジンは制御点の範囲だけを見て、画面外の曲線を描画対象から外せます。

一方、どの制御点の係数も t=0 と t=1 以外では0になりません。そのため制御点を1つ動かすと、端点を除く曲線全体の形が変わります。長い曲線を1本の高次ベジェで作ると部分修正ができないので、短い3次ベジェをつないで使います。この弱点を解決したのが後述のBスプラインです。

真円の近似：90度の円弧に使う定数0.5523と半径誤差0.027%

x(t) と y(t) がどちらも多項式で表されるベジェ曲線では、円を厳密に表すことはできません。実務では円を4つの90度円弧に分け、それぞれを3次ベジェで近似します。半径1の円弧で端点・端点での接線・中点を一致させると、方向点までの距離は次の値になります。

k = 4 / 3 * tan(θ / 4)
θ = 90度のとき k = 4(√2 - 1) / 3 ≒ 0.5522847

このときの半径方向の最大誤差は約0.00027、つまり半径の約0.027%です。半径100pxの円なら半径方向の誤差は0.03px以下です。見え方は拡大率や描画条件によるため、使用する表示倍率で確認します。デザイン用途ではこの近似で足ります。部品の寸法として円そのものが必要なCADでは、この誤差を避けるためにNURBSを使います。

Illustratorでのベジェ曲線の描き方

Illustratorのペンツールは、3次ベジェ曲線の制御点をマウス操作で置くツールです。前の章の性質を知っていると、操作の意味が理解しやすくなります。

クリックで直線、ドラッグで曲線：ペンツールの基本操作

1. ペンツール（P）を選び、始点をクリックする。
2. 次の位置をクリックすると、2点を結ぶ直線ができる。
3. クリックしたままドラッグすると、ドラッグの向きに方向線が伸び、そのアンカーポイントの前後が曲線になる。ドラッグの向きが接線の向き、長さが曲がる強さになる。
4. 始点に戻ってクリックすると、閉じたパス（クローズパス）になる。

置いた位置がずれたときは、描画中にスペースバーを押しながらドラッグすると、作成中のアンカーポイントそのものを移動できます。

アンカーポイントは少ないほど曲線がなめらかになる理由

アンカーポイントを増やすと、つなぎ目ごとに方向線の向きと長さをそろえる必要があり、わずかなずれが波打ちとして見えます。3次ベジェ1本はS字まで描けるので、アンカーポイントは角や上下左右の極値を候補に置き、曲線が元の輪郭から離れる箇所に必要な点を追加します。円なら上下左右の4点、Sの字なら両端と中央付近の3点程度が目安です。トレースで点を置きすぎた場合は、「オブジェクト」→「パス」→「単純化」で点を減らし、元の輪郭との差を確認します。点の削除や方向線の調整で形は変わるため、許容できる差に収めてください。

ベジェ曲線の編集に使うIllustratorの既定ショートカット

Adobe公式ヘルプ「Adobe Illustrator のデフォルトのショートカットキー」（2026年3月5日更新）に記載された既定値です。WindowsとmacOSで共通です。

ショートカットは利用者が変更できるため、キーが効かないときは「編集」メニューのキーボードショートカット設定を確認してください。

Webとフォントでのベジェ曲線：SVG・Canvas・CSS cubic-bezier()

ベジェ曲線はデザインソフトの中だけの話ではありません。Webの標準仕様にも、制御点の座標をそのまま書く命令が用意されています。

SVGのpathとCanvasで3次・2次ベジェを描く書き方

SVG 2の Paths 章によると、path 要素では、C が3次ベジェ、Q が2次ベジェです。Sは直前がC/c/S/s、Tは直前がQ/q/T/tの場合に、直前の制御点を接続点について反射して使います。それ以外では、省略した制御点は現在点と一致します。反射が成立する組み合わせなら、つなぎ目で進行方向がそろいます。CとSを別々の path 要素に分けると反射は起きないため、次の例では1つの d 属性に続けて書いています。大文字は絶対座標、小文字は相対座標です。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 220">
  <!-- Sの第1制御点は、直前のCの第2制御点(170,10)を現在点(200,110)について反射した(230,210)になる -->
  <path d="M 0 110 C 30 10, 170 10, 200 110 S 370 10, 400 110" fill="none" stroke="black" />
</svg>

Canvas 2Dでは、HTML Living Standard の quadraticCurveTo(cpx, cpy, x, y) が2次、bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) が3次です。始点は直前の moveTo や線の終点が使われます。

const canvas = document.createElement("canvas");
canvas.width = 220;
canvas.height = 120;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 110);
ctx.bezierCurveTo(30, 10, 170, 10, 200, 110);
ctx.stroke();

p5.jsでは bezier(x1, y1, x2, y2, x3, y3, x4, y4) が3次ベジェで、Canvasと違い始点のアンカーポイントも引数に含めます。p5.jsの使い方と始め方で扱う setup と draw の中に書けば、制御点を動かしながら形の変化を確かめられます。

CSS cubic-bezier()によるアニメーションの速度変化の指定

CSSのイージングは、横軸を経過時間、縦軸を進み具合とした3次ベジェ曲線です。始点 (0, 0) と終点 (1, 1) は固定で、cubic-bezier(x1, y1, x2, y2) で中間の2つの制御点だけを指定します。W3CのCSS Easing Functions Level 1では、キーワードが次の値として定義されています。

ease を計算すると、時間の半分の時点で動きの約80%が終わっています。仕様上、x1 と x2 は0から1の範囲でなければ値そのものが無効になります。y には同じ制限が無いので、y2 に1を超える値を入れると、終点を行き過ぎてから戻る動きを作れます。次の指定では、進み具合が最大で約1.10（行き過ぎ約10%）に達してから1に戻ります。

.card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

JavaScriptのアニメーションライブラリも同じ4つの数値でイージングを受け取るものが多く、Framer Motion（現Motion）のイージング指定では配列 [0.25, 0.1, 0.25, 1] の形で渡します。

フォントの輪郭：TrueTypeは2次ベジェ、CFFは3次ベジェ

OpenType仕様（1.9.1）の形式比較では、TrueType形式の glyf テーブルが2次ベジェ、CFF と CFF2 が3次ベジェでグリフの輪郭を表すと明記されています。Microsoftのフォント制作ドキュメントは、Type 1の3次ベジェをTrueTypeの2次ベジェへ変換しても同一の形にはならないと説明しています。形式を変換したフォントは、輪郭の点の数や位置が元のデータと変わる前提で確認が必要です。

折れ線グラフをベジェ曲線でなめらかにすると起きる誤表示

データ点を通るように曲線でならす処理は、グラフの見た目を柔らかくする目的で使われます。ただし、実データに無い山や谷が描かれることがあります。

例として、値が 0, 0, 10, 10 と推移するデータを、等間隔の点に対し、各点の前後の点の差の6分の1で制御点をずらす一様Catmull-Rom補間（両端の外側には端点を複製）で3次ベジェに変換して計算すると、1本目の区間で曲線が最小 -0.741 まで下がり、最後の区間では最大 10.741 まで上がります。売上や在庫のように0を下回らない値で、グラフがマイナスへ沈んで見えるわけです。

正確な値を読ませるグラフでは、曲線補間を使わないか、単調性を保つ補間を選ぶべきです。Chart.js では tension の既定値が0（直線）で、cubicInterpolationMode を monotone にすると、公式ドキュメントのとおり山と谷がデータ点の位置に留まります。

ベジェ曲線とスプライン曲線・Bスプライン・NURBSの違い

「スプライン曲線」は、区間ごとの多項式をなめらかにつないだ曲線の総称です。ベジェ曲線をつないだものもスプラインの一種ですが、描画ソフトの「スプライン」は意味が狭いことがあります。CLIP STUDIO PAINTの公式マニュアルでは、スプラインを「指定した点を通る曲線」、2次ベジェ・3次ベジェを「通過点と方向点で構成される曲線」と区別しています。

Bスプラインの局所台と制御点の影響範囲

Bスプラインは、各制御点の影響範囲を「ノット」と呼ぶパラメータの区切りで限定した曲線です。基底関数がノット区間の外では0になるので、制御点を1つ動かしても、離れた部分の形は変わりません。長い曲線を多数の制御点で作っても部分修正ができます。

ベジェ曲線は、内部ノットを持たず、両端のノットをそれぞれ次数＋1回重ねたBスプラインの特殊な場合にあたります。両者は別物ではなく、ベジェ曲線はBスプラインの一番単純な形です。

NURBSの重みによる円・楕円の厳密表現

NURBS（Non-Uniform Rational B-Spline）は、Bスプラインの制御点に「重み」を持たせ、分数の形（有理式）にした曲線です。重みを適切に選ぶと、円・楕円・双曲線を近似ではなく厳密に表現できます。重みがすべて1なら通常のBスプラインと同じです。

機械部品の穴や軸は、寸法どおりの円であることに意味があります。AutoCADのスプラインや3D CADの曲面がNURBSを基本にしているのはこのためです。

用途別の選び方：ベジェ曲線で足りる場面とNURBSを使うべき場面

ロゴ、アイコン、イラスト、Webの図形、アニメーションのイージングはベジェ曲線で十分です。円近似の最大半径誤差は約0.027%です。デザイン用途では、表示倍率での見え方と、アンカーポイントや方向線による編集のしやすさを基準に選べます。

反対に、図面の寸法が製造にそのまま使われる機械設計や金型では、ベジェ曲線で近似した円を部品データにしてはいけません。近似の円は中心と半径を持つ円の要素ではなく曲線の集まりなので、穴径や中心位置を寸法として正しく扱えません。この場合はCADの円・円弧コマンドかNURBSで作ります。曲線を多数の点に通して滑らかにつなぐ用途（測定データの補間など）は、局所的に修正できるBスプラインが向いています。

よくある質問

ベジェ曲線は何に使われていますか？

Illustratorなどのドロー系ソフトで描くパス、SVGのパス、HTMLのCanvas描画、CSSアニメーションの速度変化、フォントの輪郭データで使われています。フォントでは、TrueType形式が2次ベジェ、CFF形式が3次ベジェです。どれも「少ない制御点で拡大しても崩れない曲線を表す」目的は共通で、画像を点の集まりで保存するラスター形式と違い、拡大縮小しても輪郭がぼやけません。

Illustratorのベジェ曲線とは何ですか？

ペンツールや曲線ツールで描くパスのことで、中身は3次ベジェ曲線をつないだものです。アンカーポイントが曲線の始点と終点、方向線の先端にある方向点が中間の制御点にあたります。クリックで直線、ドラッグで方向線を伸ばして曲線を作ります。方向線の向きが曲線の出ていく角度、長さが曲がる強さを決めます。

ベジェ曲線とスプライン曲線の違いは何ですか？

ベジェ曲線は、制御点の重み付き平均で形が決まり、中間の制御点を必ずしも通りません。CLIP STUDIO PAINTの「スプライン」のように、描画ソフトではクリックした点をすべて通る曲線をスプラインと呼ぶことがあります。数学的なBスプラインも制御点を必ずしも通らない曲線ですが、制御点の影響が一部の区間に限られるため、長い曲線を部分的に直せます。ベジェ曲線はBスプラインの特殊な場合でもあります。

ベジェ曲線で真円は描けますか？

厳密には描けません。ここで扱う多項式ベジェ曲線では、x(t)とy(t)をともに多項式として、円弧を厳密に表せないためです。円自体は x²+y²=r² という多項式の陰方程式で表せます。一般的には円を90度ずつ4本に分け、方向点を半径の約0.5523倍の位置に置いて近似します。この方法の誤差は半径の約0.027%で、半径100pxなら0.03px以下です。円そのものが必要なCADでは、重みを持つNURBSで厳密に表します。

クリスタ（CLIP STUDIO PAINT）でベジェ曲線は使えますか？

使えます。公式マニュアルによると、図形ツールの「ベジェ曲線」サブツールは初期設定が3次ベジェ、「連続曲線」サブツールは初期設定がスプラインです。ツールプロパティの「曲線」で、直線・スプライン・2次ベジェ・3次ベジェを切り替えられます。Illustratorと同じ感覚で方向点を操作したい場合は、3次ベジェを選びます。

関連記事

• AutoCADとは？機能・便利コマンド一覧とAutoCAD 2027の新機能を解説
• CAEとは？読み方と定義・解析種別の分類とCAD/CAMの役割分担を解説
• p5.jsとは｜使い方・始め方とsetup/drawを初心者向けに解説
• Framer Motion（現Motion／motion/react）とは｜使い方・motionコンポーネント・イージング(easing)の基本
• Anime.js v4の変更点と使い方｜v3からの移行手順とGSAPとの違い