芸大 – 人工知能と創作 2025
最終課題制作のヒント3 – 機械学習ライブラリーを使ってみる MediaPipeとml5.js

Media Pipe – Face Landmark Detection
本日の内容
今回はこの講義の最終課題制作のためのヒントの3回目として、最新の機械学習のライブラリーとその活用方法について紹介します。
今回は2つのライブラリーを紹介します。
- MediaPipe: Googleが提供するオープンソースの機械学習ライブラリー
- ml5.js: 一般的な機械学習モデルを簡単に利用できるJavaScriptライブラリー
今回はソースコードの詳細な解説までは行いませんが、それぞれのライブラリーを活用してどのような作品が制作できるかを紹介していきます。
コンピュータビジョンとは
コンピュータビジョン(Computer Vision)とは、デジタル画像や動画からコンピュータが有益な情報を抽出し、周囲の状況を「理解」させるためのAI(人工知能)の一分野です。人間が目で見ている世界を脳で処理するように、コンピュータに視覚的な認識能力を持たせることを目的としています。
主な仕組みと技術
コンピュータは、画像や動画をピクセル(画素)の集合体として捉えます。現在は、ディープラーニング(深層学習)、特にCNN(畳み込みニューラルネットワーク)などの技術を用いることで、物体、顔、文字、色のパターンを極めて高い精度で識別できるようになりました。
代表的な活用例
- 顔認証: スマートフォンのロック解除や、空港の入国管理。
- 自動運転: カメラ映像から歩行者や標識、車線をリアルタイムで検出。
- 医療画像診断: X線やMRIの画像から、病変部位を自動で特定。
- 製造現場: 工場の検品ラインで、製品の傷や不具合を瞬時に発見。
このように、コンピュータビジョンは単なる「画像の記録」を超え、視覚データに基づいた高度な判断や予測を可能にする、現代社会に不可欠な技術となっています。
OpenCVとは

OpenCV(Open Source Computer Vision Library)は、画像処理やコンピュータビジョンのための機能を豊富に備えたオープンソースのライブラリです。1999年にインテルによって開発が開始され、現在は世界中で標準的なツールとして広く普及しています。
主な特徴と機能
OpenCVは、画像の編集や変換といった基礎的な処理から、高度な解析までをカバーしています。
- 画像処理: リサイズ、色空間の変換、フィルタリング、エッジ検出。
- 物体検出: 顔、歩行者、特定のオブジェクトの認識。
- 動画解析: 物体の追跡(トラッキング)や背景差分による動体検知。
- マルチプラットフォーム: C++、Python、Javaといった言語に対応し、Windows、macOS、Linux、さらにはモバイルOS上でも動作します。
活用のメリット
最大の特徴は、最適化されたアルゴリズムが提供されている点です。開発者は複雑な数学的処理を一から記述することなく、関数を呼び出すだけで高度な機能を実装できます。また、BSDライセンスで公開されているため、学術研究だけでなく商用利用も容易です。
現在では、ディープラーニング(深層学習)フレームワークとの連携も強化されており、AIを用いた画像認識システムの構築において欠かせない存在となっています。
MediaPipe
MediaPipeとは
MediaPipeは、Googleが提供するオープンソースの機械学習ライブラリで、リアルタイムな画像や動画処理を効率的に行うためのツールです。
MediaPipe ソリューション ガイド (Google)
- 多機能なビジョンタスク対応: 顔検出、手のランドマーク推定、ポーズ推定、物体検出など、さまざまなビジョンタスクをサポートしています。
- リアルタイム処理: 軽量設計により、リアルタイムでのデータ処理が可能で、インタラクティブなアプリケーションの開発に適しています。
- マルチプラットフォーム対応: Windows、Linux、macOSなどのデスクトップ環境だけでなく、AndroidやiOSなどのモバイルプラットフォーム、さらにはWebブラウザ上でも動作します。
- 複数言語サポート: Python、C++、JavaScriptなど、さまざまなプログラミング言語で利用可能で、開発者は自身のプロジェクトに適した言語を選択できます。
- モジュール化された設計: 各機能がモジュール化されており、必要な機能を組み合わせて柔軟にパイプラインを構築できます。
- オープンソース: ソースコードが公開されており、コミュニティによる改善やカスタマイズが可能です。
MediaPipeのデモ
MediaPipeでどのようなことができるのか、GoogleではWeb上ですぐに試すことができるデモを公開しています。その内容を見てみましょう。

Object Detection (物体検出)

- 映像や画像の中から物体を検出する技術
- デモ
Image Classification (画像分類)

- 画像の中に写っている物体を分類する技術
- デモ
Image Segmentation (画像セグメンテーション)

- 画像の領域を分割する技術
- デモ
Hand Landmark Detection (手のランドマーク検出)

- 画像や動画内の手とそのランドマーク(キーポイント)を検出
- デモ
Face Stylization (顔のスタイル変換)

- 画像内で検出された顔をカートゥーンやアニメ顔といったスタイルに変換
- デモ
Face Detection (顔検出)

- 複数の顔と各顔の6つのランドマークを検出
- デモ
Face Landmark Detection (顔のランドマーク検出)

- 顔のランドマーク(キーポイント)を検出
- バーチャル試着や表情を模倣するバーチャルアバター作成に利用可能
- デモ
Pose Landmark Detection (ポーズのランドマーク検出)

- 画像や動画内の人体の主要ポイントを検出
- デモ
MediaPipeの利用方法
- MediaPipeでは、Web、Python、Android、iOSと用途にあわせてさまざまなプラットフォームで利用可能
- 一部のソリューションではモデルをカスタマイズすることも
- 詳細: MediaPipe ソリューション ガイド
MediaPipeの利用例
Face Mesh: 顔のランドマーク検出
- Web:
- Python:
ml5.js
MediaPipeとml5.js
MediaPipe
- MediaPipeはとても高機能かつ様々なプラットフォームで利用可能
- ただし、高度な機能を使うためにはそれなりのプログラミングスキルが必要
別のアプローチ – ml5.js
- ml5.jsは、機械学習のモデルを簡単に利用できるJavaScriptライブラリー
- p5.jsとの親和性が高く、クリエイティブコーディングに適している
ml5.jsについて

- ml5.js | Friendly Machine Learning for the Web
- ブラウザ上で人工知能を活用し学びと創造を促進する親しみやすいライブラリー
- アーティストやクリエイティブコーダー、学生向けに機械学習を簡単に使えるよう設計されている
- TensorFlow.jsを基盤とし、外部依存なしで動作。
ml5.jsでできること
- BodyPose:全身のポーズ推定
- HandPose:手の骨格と指の追跡
- FaceMesh:顔のランドマーク検出
- ImageClassifier:画像内容認識
- SoundClassifier:音声の検出と分類
- NeuralNetwork:独自のニューラルネットワークを訓練可能
ml5.js + Hand Pose
- HandPose Skeletal Connections 手の骨格の接続を描画

ml5.js + Face Mesh
- FaceMesh Triangle Mesh: 顔のランドマークを使って三角形メッシュを描画

ml5.jsでどんなことができるか
例 1: Fire breathing By Pierre B.
Fece meshを使用

例 2: Regular polygons playground By Juan Carlos Ponce Campuzano
Pose Detcetionを使用

例 3: handPose choose menu item by peymanx
Hand Poseを使用

おすすめ学習リソース

A Beginner’s Guide to Machine Learning in JavaScript with ml5.js
- NYU ITPのDaniel Shiffmanによるml5.jsの入門ガイド
- ml5.jsの基本から応用までを学べる
応用: TouchDesignerでMediaPipeを利用する!
TouchDesignerからのMediaPipeの利用は、Bryan Wai-ching CHUNGさんによる素晴しいサンプル集があります! ダウンロードして試してみましょう。Python 3.9系でMediaPipeが正しくインストールされていれば、そのまま利用できるはずです。
応用することで、下記のようにFaceMeshを使用した3Dサーフェスの合成なども可能になります!

アンケート
本日の講義に参加した方は以下のアンケートに回答してください。

