Microsoftは、手描きしたWebアプリ用ユーザーインターフェイス(UI)デザインのスケッチ画像を読み込み、実際に動くHTMLコードを自動生成する技術「Sketch2Code」を開発した。
この技術を使えば、ブレインストーミングで出されたアイデアを整理してホワイトボードに描いたUIデザイン案を撮影し、その場で実動プロトタイプ化して試す、といった作業が可能になる。まとめたデザイン案を改めて手作業でHTMLコード化する場合に比べ、設計プロセスが高速化されるだろう。
ユーザーは、まずデザイン案の画像をSketch2Code用ウェブサイトへアップロードする。Sketch2Codeシステムは、画像解析して描かれた枠や文字をそれぞれボックスやテキストに変換し、表示位置を整え、適切なエレメントに分類する。そのうえで、UI実現に必要なHTMLマークアップコードを生成する。
Microsoftは、「Microsoft Custom Vision Model」「Microsoft Computer Vision Service」「Azure Blob Storage」「Azure Function」「Azure Website」の組み合わせでSketch2Codeシステムを構築した。
Sketch2Codeの紹介ビデオ(出典:Microsoft/YouTube)
CNET Japanの記事を毎朝メールでまとめ読み(無料)
ものづくりの革新と社会課題の解決
ニコンが描く「人と機械が共創する社会」
ZDNET×マイクロソフトが贈る特別企画
今、必要な戦略的セキュリティとガバナンス