手書きスケッチ→ワイヤーフレーム変換デモ
手書きの画面ラフを撮影・アップロードすると、AIが読み取ってHTMLワイヤーフレームを生成します。
APIキー未設定のためデモ機能が利用できません。
読み取り中...
生成結果
このアプリについて
このアプリでできること
- 手書きで描いた画面のラフスケッチ(写真やスキャン画像)をアップロードすると、AIが画面の要素(見出し・入力欄・ボタンなど)を読み取ります。
- 読み取った内容から、実際にブラウザで開けるワイヤーフレーム(簡易HTML画面)を自動で組み立てます。
- 生成された画面はその場でプレビューでき、コードのコピーやHTMLファイルとしてのダウンロードができます。
使い方
- 画面上部の「ファイルを選択」から、手書きスケッチの画像(JPEGまたはPNG)を選びます。
- 「読み取ってワイヤーフレームを生成」ボタンを押します。
- 読み取りが終わると、画面下部にプレビューが表示されます。内容に問題がなければ、コピーまたはダウンロードして利用できます。
注意点・既知の制限
- この画面上部に「APIキー未設定のためデモ機能が利用できません」という表示が出ている場合、読み取り機能そのものが動作しない設定になっています。この状態でも画面の表示自体は正常です。
- AIによる読み取りの精度は、スケッチの描き方や画質によって変わります。読み取り結果が実際のスケッチと異なる場合があります。
- 対応している画像形式はJPEGとPNG、サイズの上限は5MBです。
- 面接や商談などその場で描いたスケッチをすぐに試す使い方は、今回の確認範囲には含まれていません。あらかじめ用意した画像での利用を想定しています。
- サーバーを停止したときの記録の残り方について、まれに想定通りに記録されないことがありますが、動作そのものには影響しません(軽微な既知事項として引き続き確認中です)。