ニュース
» 2018年09月07日 08時00分 公開

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

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

[沓澤真二ねとらぼ]
ツイートボタン

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


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

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

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

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

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

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


Sketch2Code システムのワークフロー

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


(沓澤真二)


Copyright © ITmedia, Inc. All Rights Reserved.