手書きスケッチ→ワイヤーフレーム変換デモ

生成結果

このアプリについて

このアプリでできること

• 手書きで描いた画面のラフスケッチ（写真やスキャン画像）をアップロードすると、AIが画面の要素（見出し・入力欄・ボタンなど）を読み取ります。
• 読み取った内容から、実際にブラウザで開けるワイヤーフレーム（簡易HTML画面）を自動で組み立てます。
• 生成された画面はその場でプレビューでき、コードのコピーやHTMLファイルとしてのダウンロードができます。

使い方

• 画面上部の「ファイルを選択」から、手書きスケッチの画像（JPEGまたはPNG）を選びます。
• 「読み取ってワイヤーフレームを生成」ボタンを押します。
• 読み取りが終わると、画面下部にプレビューが表示されます。内容に問題がなければ、コピーまたはダウンロードして利用できます。

注意点・既知の制限

• この画面上部に「APIキー未設定のためデモ機能が利用できません」という表示が出ている場合、読み取り機能そのものが動作しない設定になっています。この状態でも画面の表示自体は正常です。
• AIによる読み取りの精度は、スケッチの描き方や画質によって変わります。読み取り結果が実際のスケッチと異なる場合があります。
• 対応している画像形式はJPEGとPNG、サイズの上限は5MBです。
• 面接や商談などその場で描いたスケッチをすぐに試す使い方は、今回の確認範囲には含まれていません。あらかじめ用意した画像での利用を想定しています。
• サーバーを停止したときの記録の残り方について、まれに想定通りに記録されないことがありますが、動作そのものには影響しません（軽微な既知事項として引き続き確認中です）。

仕組み・使用技術

• Express（Node.jsのWebサーバーフレームワーク）

セキュリティ面で入っているもの

• ファイルアップロード処理（multer）