ベジェ曲線とデザイン幾何学（フォント・UIの数理）

Q: ベジェ曲線とデザイン幾何学（フォント・UIの数理）とは何ですか？

ベジェ曲線（Bézier Curve）とは、少数の制御点 P_0, P_1, \dots, P_n を用いて滑らかな曲線を表現するパラメトリック曲線である。 3次ベジェ曲線（Cubic Bézier）上の点 B(t)（0 \le t \le 1）は、バーンスタイン基底関数を用いて次のように定義される： B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3 これは、線分 P_0 P_1, P_1 P_2, P_2 P_3 を比 t : 1-t で内分する操作を再帰的に繰り返すことと完全に等価である（ド・カステリョのアルゴリズム）。

Q: ベジェ曲線とデザイン幾何学（フォント・UIの数理）は社会やプログラミングでどのように使われていますか？

SVG・CSSレンダリングエンジンおよびフォント描画ラスタライザ: 2DグラフィックスライブラリやCanvas描画エンジンで使われる3次ベジェ曲線のサンプリング・点計算アルゴリズム。

「制御点を引っ張ると曲線が曲がる理由」線分内分が創り出す美しきグラフィックス

この単元の発見をシェア

3行要約（Key Takeaways / AIOサマリー）

1: ベジェ曲線とデザイン幾何学（フォント・UIの数理）の本質的な定義と直感的ビジュアルをシミュレーターで体験できる。
2: 公式や証明の背景にある数学的意味と、厳密な導出ステップを解説。
3: 実社会における工学応用（SVG・CSSレンダリングエンジンおよびフォント描画ラスタライザ）のTypeScript実装コードを収録。

なぜこれを学ぶのか？ — 現実社会とテクノロジーでの価値

Purpose & Motivation

なぜ生まれたのか？

フランスの自動車会社ルノーの技師ピエール・ベジェが、自動車のボディをコンピュータ上で滑らかに設計するために考案した幾何学アルゴリズム。

身につく武器・思考力

高校数学の「線分の内分」だけで、IllustratorのペンツールやCSSアニメーションの滑らかな曲線を自在にデザイン・実装できるようになる。

実社会・ITでの活躍現場

•CSSアニメーションの cubic-bezier() イージング（滑らかな加減速）
•Adobe Illustrator / Figma / SVG のベクターパス・曲線描画ツール
•TrueType / OpenType など、すべてのコンピュータフォントの文字輪郭レンダリング
•3DCGモデリング（Blender/Maya）やCADソフトウェアの曲面生成

Layer 1 — 直感・シミュレーター

4つの制御点（ $P_0, P_1, P_2, P_3$ ）を画面上でドラッグして動かしてみよう。スライダー $t \in [0, 1]$ を動かすと、制御点同士の内分点が結ばれ、その交点上に滑らかな3次ベジェ曲線が描かれる「ド・カステリョのアルゴリズム」が視覚的に理解できます。さらに、CSSの `cubic-bezier` アニメーションのイージングプレビューも試せます。

P1, P2 をドラッグして変形

媒介変数 $t$（曲線の進行度）: 内分比 50 : 500.50

CSS: transition-timing-function: cubic-bezier(0.18, 1.00, 0.82, 1.00);

●

Layer 2 — 定義・受験・証明

定義

ベジェ曲線（Bézier Curve）とは、少数の制御点 $P_0, P_1, \dots, P_n$ を用いて滑らかな曲線を表現するパラメトリック曲線である。 3次ベジェ曲線（Cubic Bézier）上の点 $B(t)$ （ $0 \le t \le 1$ ）は、バーンスタイン基底関数を用いて次のように定義される：

B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3

これは、線分 $P_0 P_1, P_1 P_2, P_2 P_3$ を比 $t : 1-t$ で内分する操作を再帰的に繰り返すことと完全に等価である（ド・カステリョのアルゴリズム）。

公式・数理モデル

B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3 \quad (0 \le t \le 1)

証明・導出

内分点の幾何学的導出（ド・カステリョのアルゴリズム）： 1段階目の内分点：

Q_0(t) = (1-t)P_0 + tP_1

Q_1(t) = (1-t)P_1 + tP_2

Q_2(t) = (1-t)P_2 + tP_3

2段階目の内分点：

R_0(t) = (1-t)Q_0(t) + tQ_1(t)

R_1(t) = (1-t)Q_1(t) + tQ_2(t)

3段階目の内分点（最終的な曲線上の点）：

B(t) = (1-t)R_0(t) + tR_1(t)

代入して展開整理すると：

B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3

二項定理 $( (1-t) + t )^3 = 1$ の展開項がそれぞれの制御点の重み係数（バーンスタイン多項式）として現れる。これにより、曲線は常に制御点の凸包（Convex Hull）の内部に収まるという極めて安定した数値特性を持つ。

押さえておきたいポイント

Adobe Illustratorのペンツール、フォント（TrueType/OpenType）、SVGのパスはすべてベジェ曲線
CSSアニメーションの `transition-timing-function: cubic-bezier(x1, y1, x2, y2)` も3次ベジェ曲線そのもの
「内分」という高校数学の基本操作を繰り返すだけで、コンピュータ上に究極に滑らかな曲線が生成される
微積分を用いれば曲線の接線ベクトル（微分）や曲率も瞬時に計算可能

参照基準・学習指導要領との対応

本トピックの内容・数理モデルは、文部科学省学習指導要領（算数・数学・情報）および国際標準カリキュラムに準拠し、エンジニアリング現場の実装事例と照らし合わせてMath World Lab編集部により検証・作成されています。

Layer 3 — 工学応用・現場実装

SVG・CSSレンダリングエンジンおよびフォント描画ラスタライザ

2DグラフィックスライブラリやCanvas描画エンジンで使われる3次ベジェ曲線のサンプリング・点計算アルゴリズム。

1export interface Point2D {
2  x: number;
3  y: number;
4}
5
6// 3次ベジェ曲線の座標計算（媒介変数 t: 0〜1）
7export function getCubicBezierPoint(
8  p0: Point2D,
9  p1: Point2D,
10  p2: Point2D,
11  p3: Point2D,
12  t: number
13): Point2D {
14  const u = 1 - t;
15  const tt = t * t;
16  const uu = u * u;
17  const uuu = uu * u;
18  const ttt = tt * t;
19
20  const x = uuu * p0.x + 3 * uu * t * p1.x + 3 * u * tt * p2.x + ttt * p3.x;
21  const y = uuu * p0.y + 3 * uu * t * p1.y + 3 * u * tt * p2.y + ttt * p3.y;
22
23  return { x, y };
24}
25
26// CSS cubic-bezier(...) 文字列の生成
27export function toCssCubicBezier(p1: Point2D, p2: Point2D): string {
28  // P0=(0,0), P3=(1,1) の正規化座標系
29  return `cubic-bezier(${p1.x.toFixed(2)}, ${p1.y.toFixed(2)}, ${p2.x.toFixed(2)}, ${p2.y.toFixed(2)})`;
30}