写真から関節位置の線画を作成
手のポーズ線画生成
AIが21個の関節を自動検知してトレース素材化。
処理はすべてブラウザ完結。オフィス資料からイラスト制作まで。
写真（手）をえらぶ
ドラッグ＆ドロップ、またはクリック
JPG / PNG / HEIC / WebP
AIエンジンを起動中...
📝 このツールの詳しい使い方
手の写真を選択する
指先から手首までが写った写真を選びます。AIが関節位置を推定しますが、指が重なったポーズでは位置や本数を取り違える場合があります。
線画のスタイルを調整する
背景色（透過・白・黒）、線の色、太さを自由に調整します。「元の写真を表示」スライダーを上げると、写真と重ねてプレビューできます。
素材として保存する
「この線画で保存へ進む」ボタンをクリックすると、画像ファイル（PNG形式で透過情報を保持）として端末に保存されます。
💡 こんなシーンで大活躍！
🎨 イラストのトレス資料作成
描くのが難しい「手」のポーズを自分の手で撮影し、関節位置のアタリ線としてイラストソフトに読み込めます。元写真と照らして、指の位置や曲がり方を確認してください。
📊 オフィスワークやプレゼン図解
企画書やマニュアルに添える「スマホを持つ手」などのカット絵作りに。一般の事務・オフィス作業でも手軽に素材を生み出せます。
🧑🏫 デッサン・骨格の学習
「元の写真を表示」スライダーを調整し、実際の写真と骨格線を見比べることで、手の構造を直感的に学習できます。
🎥 アニメーションの作画補助
動画制作時のキーフレームや、3Dモデルのポージングの参考資料として、AIが推定した関節位置を線で表示します。重なった指や隠れた部分は、元写真を見ながら補ってください。
🧠 豆知識：このツールを支えるAIについて
MediaPipe Hand Landmarkerが推定した片手21点のランドマークを、平面の線画として結んで表示します。手の輪郭をなぞる処理や、関節位置を実測する処理ではありません。指の重なりや手の向きで推定がずれる場合があるため、作画の補助として元写真と一緒に利用してください。
🔒 プライバシーと安全性について
選んだ画像を加工用サーバーへ送らず、ブラウザ内で解析・加工します。ページ・ライブラリ・AIモデル・広告の読み込みでは通信が発生します。
入力・出力のポイント
指が見える手の写真を選び、線色・太さ・関節表示を指定します。
- 出力
- 透明背景はPNG、それ以外はJPEG品質0.95です。
仕上がりの確認：手の輪郭の全画素をトレースする処理ではありません。指の重なりや画面外の指で、点がどのように結ばれたかを確認します。
入力形式と保存の手順
入力：JPG・PNG・WebP、HEIC/HEIF（変換して読み込み）。形式や端末によって読み込めない場合は、JPGまたはPNGで試してください。
「この線画で保存へ進む」で完成画像を表示し、「画像を保存する」で端末へ保存します。保存先でファイルを開き、寸法と仕上がりを確認してください。画像の保存ボタンが使えない場合は、完成画像の長押しも試せます。
仕上がりの例
手の写真から、指と手のひらの位置を線で表した例です。
サンプルにはAIで生成した架空の人物画像を使用しています。市松模様は透明部分を示す表示用の背景です。ツールで保存する透過PNGには含まれません。
❓ よくある質問
Q. 手がうまく認識されない・線がズレる場合は？
A. 手が極端に隠れている（物が重なっている）、または背景と同化していると認識精度が落ちます。明るい場所で撮影し、指の形がわかりやすい写真をお試しください。
Q. 複数人の手には対応していますか？
A. はい、対応しています。1枚の画像につき最大4つの手まで同時に検知して線画を描画する設計となっています。
Q. 抽出した線画素材の推奨される保存形式は？
A. 背景を「透過」に設定して保存することで、PNG形式でダウンロードされます。そのままIllustratorやPhotoshop、CLIP STUDIO PAINTなどにレイヤーとして配置しやすくなります。
このツールの裏側・仕組み
技術的な仕組みや、安全に処理を行うための工夫などを解説しています。
いつも ツール をご利用いただきありがとうございます🐾