AIで手書きの図形と文字を認識：Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表

Microsoftは、手書きでスケッチしたUI画面をHTMLコードに自動変換するWebベースソリューション「Sketch2Code」を発表した。

　Microsoftは2018年8月30日（米国時間）、ホワイトボードなどに手書きでスケッチしたユーザーインタフェース（UI）画面を、AI（人工知能）を利用して、HTMLコードに変換するWebベースソリューション「Sketch2Code」を発表した。

　Microsoftによれば、UIのデザインプロセスには無駄が多いという。通常は、まずアイデアレベルのスケッチをホワイトボードに描き、数人で検討してから写真に撮影し、HTMLコードを書き下す。これでは手間ばかりかかり、すぐにアイデアを形にできない。

　画像認識技術とAIを組み合わせることで、手書きのスケッチを一気にHTMLに落とし込む。これがSketch2Codeの解決策だ。

手書きのスケッチを認識し、コードに置き換えるSketch2Code

　Sketch2Codeは、MicrosoftがKabel、Spike Techniquesと共同で開発した。Sketch2Codeを使って手書きのスケッチをHTMLに変換するプロセスは、5段階に分かれる。

1. ユーザーがSketch2CodeのWebサイトで画像をアップロードする
2. カスタムビジョンモデルが、画像内でどのようなHTML要素が使われているかを見積もり、位置を特定する
3. 手書きテキスト認識サービスが、見積もった要素内のテキストを読み取る
4. レイアウトアルゴリズムが、見積もった要素の境界ボックスの空間情報を使って、全ての要素を含むグリッド構造を生成する
5. HTML生成エンジンがこれらの情報を使って、HTMLマークアップコードを生成する

　以上のプロセスを実現するためのアプリケーションワークフローは次のようになる。

Sketch2Codeのアプリケーションワークフロー

　Sketch2Codeは、次のような技術要素を使用している。

　これらの技術要素を組み合わせたSketch2Codeのアーキテクチャは、次の通り。

Sketch2Codeのアーキテクチャ

　MicrosoftはSketch2Codeのコード、ソリューション開発プロセス、その他の詳細をGitHubで公開している。