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

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

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

• ベジェ曲線は、制御点どうしを同じ比率 t で内分する操作を、点が1つになるまで繰り返して得られる曲線。t を0から1まで動かした軌跡が曲線になる。
• 制御点が3つなら2次、4つなら3次。Illustratorのアンカーポイント2つとハンドル2本の組み合わせは3次ベジェ曲線1本にあたる。
• 曲線は始点と終点を通り、端点での向きは隣の制御点の方向になる。つなぎ目の両側の方向線が、長さゼロでなく、アンカーを挟んで反対側に一直線に並べばなめらか（G1連続）。各セグメントの t を0〜1としたうえで長さもそろえば速度まで連続（C1連続）になる。
• 拡大・回転・平行移動は制御点だけ変換すれば曲線も正確に追従する。ベクター画像を拡大しても輪郭が崩れないのはこの性質による。
• 多項式のベジェ曲線では真円を厳密に描けない。90度の円弧は制御点を半径の約0.5523倍の位置に置くと、誤差が半径の約0.027%に収まる。寸法どおりの円が必要なCADではNURBSを選ぶ。

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

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

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

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

2次ベジェは中間の制御点が1つだけなので、途中で曲がる向きを変えられません（3点が一直線上に並ぶと直線に退化します）。S字を1本で描けるのは3次からです。次数を上げて1本で複雑な形を作るより、3次の短い曲線をつなげる方が部分ごとに直しやすいため、描画ソフトは3次を基本にしています。

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

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

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

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

名前はフランスの自動車メーカー、ルノーの技術者ピエール・ベジェに由来します。ベジェは1967年ごろ車体設計システムUNISURFで曲線を扱い、その方法を1968年1月のSAE（米国自動車技術者協会）の会議で技術論文680010として発表しました。同じ形式の曲線は、競合するシトロエン社のポール・ド・カステリョも1960年代前半に独立して研究していました。Farouki（カリフォルニア大学デービス校）の解説資料は、その成果を1963年付けのシトロエン社内文書『Courbes et surfaces à pôles』として挙げ、社外秘だったため1980年代半ばまで外部に知られなかったと説明しています。社外に公表されたベジェの名前が定着しましたが、次の章で扱う計算手順にはド・カステリョの名前が残っています。フランス語の発音はベズィエに近く、表記は「ベジェ」「ベジエ」の両方が使われます。どちらも同じ曲線を指します。

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

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

2次ベジェで1点を求める：中点を2回取るだけの最小例

制御点を P0=(0, 0)、P1=(100, 200)、P2=(200, 0) の3つとし、t=0.5 の点を求めます。

1. P0-P1 の中点 (50, 100) と、P1-P2 の中点 (150, 100) を取る。
2. その2点の中点 (100, 100) を取る。これが曲線上の点です。

制御点 P1 の高さは200ですが、曲線の頂上は100にしか届きません。中間の制御点は曲線を「引き寄せる」だけで、曲線はその点を通らないことが数字で確かめられます。t=0.25 なら各段で4分の1の位置を取り、結果は (50, 75) です。

3次ベジェでt=0.5の点を求める3段階の計算

制御点を4つにすると、内分の段が1つ増えます。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から1まで細かく動かして点を並べると曲線が描けます。

途中の点で曲線を2本に分割する：アンカーポイントを追加しても形が変わらない理由

上の計算の途中で出てきた点は捨てずに使えます。各段の左端の点を集めると t=0.5 より前の半分、右端の点を集めると後ろの半分が、それぞれ独立した3次ベジェ曲線になります。

分割した2本を描いて元の曲線と101点ずつ比べると、ずれは最大でも 5.7×10^-14 で、浮動小数点の丸め誤差しか残りません。Illustratorの「アンカーポイントの追加ツール」でセグメントの途中に点を足しても形が変わらないのは、曲線の途中の点で切っても、この分割で2本の3次ベジェとして正確に表し直せるためです。逆に点を削除すると、2本を1本の3次ベジェで表し直すことになります。2本がもともと1本を分割したものでない限り、形は変わります。

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

内分の手順を式にまとめると、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になります。つまり曲線上の点は、制御点の重み付き平均です。2次なら (1-t)^2 * P0 + 2(1-t)t * P1 + t^2 * P2 です。一般の 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 ]
console.log(deCasteljau([[0, 0], [100, 200], [200, 0]], 0.5)); // [ 100, 100 ]

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で方向線を回すと曲線の出ていく角度が変わるのはこのためです。

複合ベジェ曲線のつなぎ目：G0・G1・C1連続の違い

長い輪郭は、3次ベジェを端から端へつないだ「複合ベジェ曲線」で作ります。MITのCAGD教科書（Patrikalakis・Maekawa・Cho）は、つなぎ目のなめらかさを段階で定義しています。端点が一致するだけならG0連続、接線の向きまでそろえばG1連続（接線の長さは違ってよい）、1階微分のベクトルが向きも大きさも一致すればC1連続です。

3次ベジェの終点での1階微分は 3×(P3−P2)、次の曲線の始点での1階微分は 3×(Q1−Q0) です。そのため、前の曲線の P2 と次の曲線の Q1 がどちらもアンカーと重ならず、アンカーを挟んで反対側に一直線に並べばG1、さらにアンカーからの距離が等しければC1になります（各セグメントの t をそれぞれ0〜1とした場合）。P2 と Q1 がアンカーの同じ側にあると、進む向きが逆転して尖ります。Illustratorのペンツールの操作は、この3段階にそのまま対応します（Adobe公式ヘルプ「ペンツールによる曲線の描画」、2026年2月11日更新）。

ロゴやアイコンの輪郭の多くはG1で足ります。ただし同じ教科書は、曲率の中心まで連続するG2を、美観のためにも重要な条件として挙げています。曲がり具合の急な変化まで目立たせたくない輪郭では、G1より厳しい条件が要ります。C1は、t を一定の速さで進めて物を動かす用途で効きます。アニメーションの移動経路では、G1でも方向線の長さが違うと、つなぎ目で速度が急に変わります。

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

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

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

アフィン不変性：拡大・回転を制御点の変換だけで済ませられる性質

係数の合計が常に1であるため、拡大・縮小・回転・平行移動・せん断（まとめてアフィン変換）をかけた曲線は、制御点だけを変換して作り直した曲線と一致します。ベクター形式の画像を拡大しても輪郭がぼやけないのは、保存しているのが制御点の座標で、表示倍率に合わせて曲線を描き直せるからです。画像を画素の集まりで保存するラスター形式では、拡大すると画素そのものが大きくなります。

ただし、遠近感をつける透視変換はアフィン変換ではないので、この性質が成り立ちません。上の deCasteljau() に続けて、次のコードで両者のずれを測れます。

// 30度回転・2倍拡大・(10, 5)平行移動
const th = Math.PI / 6;
const affine = ([x, y]) => [2 * (Math.cos(th) * x - Math.sin(th) * y) + 10, 2 * (Math.sin(th) * x + Math.cos(th) * y) + 5];
// 透視変換：x が大きいほど縮む
const persp = ([x, y]) => [x / (1 + x / 400), y / (1 + x / 400)];

function sample(pts) {
  const s = [];
  for (let i = 0; i <= 2000; i++) s.push(deCasteljau(pts, i / 2000));
  return s;
}
// 曲線そのものを変換した結果と、制御点だけ変換して作った曲線の最大のずれ
function maxGap(f) {
  const a = sample(P).map(f);
  const b = sample(P.map(f));
  let m = 0;
  for (const p of a) {
    let d = Infinity;
    for (const q of b) d = Math.min(d, Math.hypot(p[0] - q[0], p[1] - q[1]));
    m = Math.max(m, d);
  }
  return m;
}
console.log(maxGap(affine).toFixed(3)); // 0.000
console.log(maxGap(persp).toFixed(3));  // 1.478

このコードは、変換後の曲線から2,001点を取り、もう一方の曲線から取った2,001点のうち最も近い点までの距離の最大値を出しています。アフィン変換では小数点以下3桁まで0、透視変換では幅133ほどに縮んだ図形で最大1.478ずれました。遠近感をつける変形を制御点の移動だけで済ませると、元の曲線を厳密に写したものにはならず、このずれが残ります。

真円の近似：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. 始点に戻ってクリックすると、閉じたパス（クローズパス）になる。

Adobe公式ヘルプによると、2点目を前の方向線と逆の方向へドラッグするとC字、同じ方向へドラッグするとS字の曲線になります。置いた位置がずれたときは、描画中にスペースバーを押しながらドラッグすると、作成中のアンカーポイントそのものを移動できます。

曲線ツールの描き方：クリックのスムーズポイントとダブルクリックのコーナーポイント

方向線のドラッグが難しいと感じるなら、曲線ツール（Shift + ~）から始める方法があります。Adobe公式ヘルプ「曲線ツールを使用したシェイプの描画」（2026年2月11日更新）の手順は次のとおりです。

• クリックで点を置くとスムーズポイントになり、点を通る曲線が自動で作られる。
• ダブルクリックで置くとコーナーポイントになる。置いた点をダブルクリックすると、スムーズとコーナーが切り替わる。
• 既存のパスに点を足すときは、Alt（Windows）／Option（macOS）を押しながらクリックする。
• 点を選んで Delete キーを押すと、曲線を失わずに点を削除できる。描画をやめるときは Esc キー。

曲線ツールは通る点を指定し、方向線はソフトが決めます。発想はCLIP STUDIO PAINTの「スプライン」に近く、ロゴのように方向線の長さまで詰めたい箇所は、あとからペンツールやダイレクト選択ツールで方向点を直します。

アンカーポイントの数と置き場所：点が多すぎると曲線が波打つ理由

アンカーポイントを増やすと、つなぎ目ごとに方向線の向きと長さをそろえる必要があり、わずかなずれが波打ちとして見えます。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の場合に、直前の制御点を接続点について反射して使います。それ以外では、省略した制御点は現在点と一致します。反射は向きと長さをそのまま写すので、つなぎ目は前の章でいうC1連続になります。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の範囲でなければ値そのものが無効になります。y1・y2 には同じ制限が無いので、1を超える値を入れると、終点を行き過ぎてから戻る動きを作れます。次の指定では y1 を1.56にしており、進み具合が最大で約1.10（行き過ぎ約10%）に達してから1に戻ります。

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

JavaScriptのアニメーションライブラリも同じ4つの数値でイージングを受け取るものが多く、Framer Motion（現Motion）のeasing指定では配列 [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の図形、アニメーションのイージングはベジェ曲線で十分です。判断の基準は、表示倍率での見え方と、アンカーポイントや方向線による編集のしやすさです。

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

よくある質問

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

Illustratorなどのドロー系ソフトで描くパス、SVGのパス、HTMLのCanvas描画、CSSアニメーションの速度変化、フォントの輪郭データで使われています。パスやフォントのように制御点の座標で形を保存する用途では、拡大縮小しても輪郭がぼやけません。Canvasは描いた結果を画素として持つので、拡大するときは描き直しが必要です。CSSでは形ではなく、時間に対する進み具合をベジェ曲線で表します。

2次ベジェ曲線と3次ベジェ曲線の違いは何ですか？

制御点の数が違います。2次は始点・終点と中間の制御点1つの計3点で、曲がる向きを途中で変えられません。3次は中間の制御点が2つの計4点で、1本でS字を描けます。Illustratorのパスと CSS の cubic-bezier() は3次、TrueTypeフォントと SVG の Q は2次です。

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

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

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

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

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

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

関連記事

• AutoCADの便利機能とコマンド一覧｜時短ショートカット・自動化と2027の新機能
• p5.jsとは？使い方・始め方とsetup/draw・図形の描き方を2.x対応で解説
• Framer Motion（現Motion）とは｜motion/reactの使い方とeasing・springの既定値【v13対応】
• Anime.js v4の変更点と使い方｜v3からの移行手順とGSAPとの違い
• Figma Motionとは？使い方・書き出し・無料でできる範囲を解説【2026年10月】