手書きのUIスケッチが瞬時にWebコンテンツに MSの技術が魔法のよう

アイデアをすぐにブラウザ上で試せます。

[沓澤真二，ねとらぼ]

　マイクロソフトが、Webアプリ用ユーザーインターフェース（UI）のスケッチから、HTMLコードを自動生成する技術「Sketch2Code」を開発しました。手描きのUIを、ブラウザ上で動くコンテンツへ瞬時に変換してくれます。

スケッチの内容をAIが解析し、実際に動くUIを実現してくれる

サインアップ画面を例にしたデモ

スケッチに含まれる要素を抽出

各要素が、文字や入力枠、チェックボックスなどのどれに該当するかを判断

分析結果をもとにHTMLコードを生成。表示の整ったUIができあがる

　スケッチを撮影してサーバーに送ると、AIが内容を分析。文字をラベル、四角形をボタンやテキストの入力枠と認識し、これをもとにHTMLコードを出力してくれます。

システムのワークフロー

　思いついた仕様をすぐに試せる便利な技術。実用化されたら、サイトの設計が飛躍的に効率化されそうです。

（沓澤真二）