マイクロソフト、手描きスケッチからHTMLコードを自動生成する「Sketch2Code」

　Microsoftは、手描きしたWebアプリ用ユーザーインターフェイス（UI）デザインのスケッチ画像を読み込み、実際に動くHTMLコードを自動生成する技術「Sketch2Code」を開発した。

手描きUIデザインから実動HTMLコードを自動生成（出典：Microsoft）

　この技術を使えば、ブレインストーミングで出されたアイデアを整理してホワイトボードに描いたUIデザイン案を撮影し、その場で実動プロトタイプ化して試す、といった作業が可能になる。まとめたデザイン案を改めて手作業でHTMLコード化する場合に比べ、設計プロセスが高速化されるだろう。

　ユーザーは、まずデザイン案の画像をSketch2Code用ウェブサイトへアップロードする。Sketch2Codeシステムは、画像解析して描かれた枠や文字をそれぞれボックスやテキストに変換し、表示位置を整え、適切なエレメントに分類する。そのうえで、UI実現に必要なHTMLマークアップコードを生成する。

文字や枠が適切なエレメントに変換される（出典：Microsoft）

　Microsoftは、「Microsoft Custom Vision Model」「Microsoft Computer Vision Service」「Azure Blob Storage」「Azure Function」「Azure Website」の組み合わせでSketch2Codeシステムを構築した。

Sketch2Codeに使用した技術（出典：Microsoft）