イラストを描く時、「手」を描くのって難しいですよね。複雑な関節の動き、指の曲がり具合、手のひらの向き...。資料として自分の手を撮影しようとしても、スマホを持ちながら理想的な角度で撮るのは至難の業です。
そんなわけで、描きかけの手のラフ画像を半透明でカメラ映像に重ねて、描きたい手のポーズと角度で撮影できる「ハンドトレスカメラ」を作りました。
すべての処理はブラウザ内で完結するので、画像や写真が外部に送信されることはありません。
資料撮影の難しさ
手は人体の中でも特に複雑な構造を持つパーツです。5本の指それぞれが3つの関節を持ち、手首の角度も含めると無限に近いポーズのバリエーシ ョンが存在します。
資料撮影でよくある悩み：
- 描きたい角度で自分の手を撮影するのは物理的に困難
- シャッターを押す動作でポーズが崩れてしまう
- ラフと実際の手の位置関係を確認しながら撮影するのが難しい
- 利き手と逆の手を撮影する際の不自然さ
「ハンドトレスカメラ」は、これらの問題を「ラフ画像のオーバーレイ表示」で解決します。
どんなツール？
描きかけの手のラフ画像を半透明でカメラ映像に重ね合わせることで、理想的な手の資料写真を撮影できるツールです。
「描きたい手のポーズが決まっているけど、正確な形が掴めない」「微妙な指の角度を確認したい」「手と物の持ち方を正確に描きたい」そんな時に使えます。
ラフ画像の透明度を自在に調整できるため、実際の手とラフを重ねて比較しながら、最適な角度とポーズを見つけられます。
できること
- アップロードした画像を半透明でカメラ映像に重ね合わせ、リアルタイムで確認しながら撮影可能
- 透明度を0〜100%の範囲で自由に調整。ラフと実写のバランスを細かくコントロール
- サイズ（10〜500%）、位置（X/Y軸）、回転（-180〜180度）を細かく調整して、ラフと実際の手をピッタリ合わせられる
- モバイルデバイスでは、1本指で移動、2本指でピンチ拡大・回転が可能
- フロント/バックカメラの切り替えに対応（複数カメラ搭載デバイス）
- 3:4の縦長アスペクト比で、900×1200ピクセルの高解像度PNG画像として保存
- すべての処理がブラウザ内で完結。画像や写真が外部サーバーに送信されない
- 画像の調整がすぐにプレビューに反映され、ストレスフリーな操作感
使い方
基本的な流れは3ステップです。
- ラフ画像をアップロード
描きかけの手のラフ画像をドラッグ＆ドロップ、またはクリックしてアップロードします。PNG、JPG、WEBP形式に対応。
- 画像を調整してカメラを開始
透明度、サイズ、位置、 回転を調整して、ラフと実際の手が重なるようにします。準備ができたら「カメラを開始」ボタンをクリック。
- ポーズを合わせて撮影
実際の手をラフに合わせてポーズを取り、「撮影」ボタンをクリック。撮影した画像はプレビューで確認後、ダウンロードできます。
モバイルデバイスでは、画面をタッチして直感的に画像を調整できます。
ブラウザで完結
このツールは、ブラウザだけで全ての処理が完結するように作られています。特別なソフトウェアのインストールは必要ありません。
画像のアップロード、カメラ映像の処理、画像の合成まで、すべての処理がブラウザ内で行われます。アップロードしたラフ画像や撮影した写真が、外部のサーバーに送信・保存されることはありません。