iPad + Apple Pencil を使ったドローイング練習ツール。お手本（Sketchfabの3Dモデルやローカル画像）を見ながら線画を描く練習ができます。
Live: https://koizuka.github.io/drawing-practice/
- 2分割レイアウト: お手本画面とドロー画面を横/縦自動切替で表示。お手本パネルを畳んで描画領域を全画面化するトグルあり（フリードローイング向け、状態はオートセーブで保持）
- Sketchfab連携: 3Dモデルを検索・表示し、好きな角度でスクリーンショットを固定。検索ボックスは過去のキーワード検索とカテゴリ閲覧の履歴ドロップダウン付き（個別削除可、カテゴリ単独もイタリック表記で区別）。「全カテゴリ」ボタンでカテゴリ絞り込みを解除して全作品ビューに戻れる。Sketchfab作品ページのURL（
/3d-models/...または/models/...）を貼り付けるだけでも読み込み可能。固定画像はギャラリーのサムネイルとして表示され、「このお手本で練習」で同じアングルから即座に再開可能。URL入力欄の履歴ドロップダウンからSketchfab作品を選んだ場合も保存スクリーンショットを使って固定モードに直接復帰し、検索コンテキスト（キーワード／カテゴリ／時期フィルタ）も自動復元 - 画像お手本: ローカルファイルまたはURL指定で画像をお手本として読み込み。ローカル画像はコンテンツハッシュで重複排除しつつ履歴ドロップダウンに最大10件を自動保存（最長辺2048pxへリサイズ）、ワンタップで再利用やギャラリーからの再読込が可能。履歴ドロップダウンは各エントリのサムネイル付きで一目で識別可能（ローカル画像／YouTube／Pexels／URL いずれも対応）
- YouTube動画お手本: URL入力欄にYouTubeのURLを貼ると自動判別して動画を埋め込み、再生しながら描画可能（グリッド・ガイド線・答え合わせ対応）。トラックパッド/ピンチでキャンバスをズーム、シングルタップで動画操作モードへ一時切替（シーク・字幕等）、ツールバーから再生/停止
- Pexels写真検索: キーワード（pose/ballet/yoga/martial arts/gymnastics等のプリセット付き）で Pexels の無料写真を検索して手本に利用。API キーはユーザー各自で Pexels に登録し設定ダイアログで保存（localStorage）。未設定時に Pexels ボタンを押すと設定ダイアログが直接開き、保存後そのまま検索画面へ。Sketchfab／Pexels の検索画面は遷移と同時に検索欄にフォーカスが入り（履歴ドロップダウンは押し付けがましくならないよう自動展開しない）、Esc キーで一段戻る（モデル閲覧／写真表示 → 検索画面 → トップ）。写真作者クレジットと Pexels へのリンクを表示
- ポーズお手本（AI）: 棒人間を小さなスケッチパッドに描くか、一言ヒントを書いて（どちらか一方でも、併用でも可）「ポーズ生成」すると、Claude API がポーズを解釈して 3D マネキン（VRM）に適用。AI は関節角度に加えて「手・足・膝・肘をどこに置くか」（配置ターゲット）や腰の高さを指定でき、その関節角度はクライアント側の解析的 IK が正確に解く（接地した掌・足裏は自動で床にフラット）。適用結果は幾何的に自動検証され（床へのめり込み・浮遊・バランス・四肢の交差）、問題があれば AI が同じ会話の中で自動修正（最大2回、ボタン表示は「調整中…」）。「結跏趺坐」のような分かりやすいポーズならヒントの言葉だけでも生成可能。マネキンは自由に回転・ズームでき、「この角度で固定」でスクリーンショットを手本化（グリッド・答え合わせ・ギャラリー対応）。生成に成功したポーズはサムネイル付きで自動的に履歴へ保存され（最大50件、使った順）、「履歴」ボタンからいつでも選び直して現在のマネキンに適用→角度を変えて再利用できる。モデルは同梱マネキンに加えて手持ちの .vrm ファイルも読み込み可能（ブラウザ内に保存）。API キーはユーザー各自の Anthropic キーをダイアログで設定（localStorage、ブラウザから直接 API を呼ぶ BYOK 方式）
- ジェスチャードローイングセッション: Pexels 検索結果から「セッション開始」で短時間ポーズ練習を起動。1ポーズあたり 30/60/90/120 秒から選択（選択は localStorage で永続化）し、結果をシャッフルしたキューで順送り。残り時間バー＋カウントダウン表示の HUD で Skip／Pause／Resume／Exit を制御。0 秒到達で自動的に Gallery へ保存→ストローク／タイマーをクリア→次の写真へ遷移（Skip は保存せず破棄）。キュー枯渇時は次のページを自動取得して継続。セッション中の参照差し替えは Undo 履歴を汚さない
- 描画ツール: ペン、消去/選択（消しゴムと投げ縄を1モードに統合。タップすると近くのストロークを選択＝削除確認、押したまま囲むと投げ縄で範囲一括削除＝marching ants 表示でドラッグ中に削除候補を赤くハイライト。タップは候補確認の2段階、投げ縄は囲みながら選択を確認できるので離した時点で即確定。指の移動量で自動的にタップ/投げ縄を切り替えるのでツール選択ミスが起きない）、Undo/Redo（お手本の変更も Undo/Redo 対象で、描画済みの絵と合わない角度に変えても元に戻せる。投げ縄での一括削除も1回のUndoで全復元）、ゴミ箱クリア／手本切替時の仮クリア（描画は画面から消えるがすぐに Undo で復元可能。新しい線を描き始めると確定して保存分は破棄）、キーボードショートカット対応（Cmd/Ctrl+Z, P/B で描画、E/L で消去/選択、Cmd/Ctrl+0 でズームリセット、検索画面では Esc で一段戻る 等）
- 補助線: 両画面同期のグリッド3段階切替（なし／通常／大）、中央太線付き、お手本画面でドラッグして任意の線分を配置
- ズーム/パン: 2本指ピンチ（iPad）/ トラックパッド（Mac）対応
- 全画面モード: Fullscreen API対応ブラウザで画面を最大限活用
- 左右反転: 両画面を同時に左右反転表示し、デッサンの歪みに気づきやすくする
- 答え合わせ: ドロー画面の線画をお手本画面にグリッド座標で重ねてリアルタイム比較（白縁取り付きで暗いお手本でも視認可能）
- タイマー: 描画時間を自動計測。集中して描いている時間だけが進むよう、バックグラウンド移行・保存・ギャラリー表示・お手本変更（角度変更含む）で自動停止し、次の線を引いた瞬間に再開。Undo で履歴を全て取り消して描画前の状態に戻ったらタイマーもリセット（Redo で線が戻ればそこから再計測）
- 保存・ギャラリー: IndexedDBに蓄積、サムネイル・お手本情報付き一覧表示、同じお手本で再練習。ギャラリーは「日付順（年月でグループ化）／手本順（初回使用）／手本順（最近使用）」の3モードを切り替え可能（選択はlocalStorageで保持）。グループは折りたたまれず仕切り線付きの見出しで区切られる。「このお手本で練習」ボタンには手本サムネイルが添えられ、手本順モードではグループ見出し側にまとめて表示される。削除はカード右上のチェックボックスで選択し、ヘッダーに現れる「削除 (N)」ボタンでまとめて実行（誤タップ即削除を防止）。各作品は SVG（ベクター）／PNG／JPEG にエクスポート可能で、ファイル名は保存タイムスタンプと手本タイトルから自動生成。ヘッダにはストレージ使用量の内訳（作品／画像履歴／ブラウザ全体推定）を折りたたみ表示
- オートセーブ: セッション状態（ストローク・補助線・お手本・タイマー・パネル折り畳み・ズーム/パン位置・左右反転）を自動保存。リファレンス変更や離散 UI ボタン操作（補助線・反転・折り畳みなど）は 2 秒のデバウンスを待たずに即時保存され、ページリロード後も中断したところから再開可能
npm install
npm run dev # Development server
npm run build # Build for production
npm run test # Run tests
npm run lint # Lint- React + TypeScript + Vite
- Material-UI + Lucide Icons
- Vitest + React Testing Library
- Dexie.js (IndexedDB)
- Sketchfab Viewer API / Data API
- Pexels API
- three.js + @pixiv/three-vrm (pose mannequin)
- Anthropic Claude API (stick figure → pose interpretation, user-supplied key)
- GitHub Pages
public/mannequin.vrm—VRM1_Constraint_Twist_Samplefrom the three-vrm examples, © pixiv, MIT License.