logo

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

  • このエントリーをはてなブックマークに追加

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

手描きUIデザインから実動HTMLコードを自動生成(出典:Microsoft)
手描きUIデザインから実動HTMLコードを自動生成(出典:Microsoft)

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

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

文字や枠が適切なエレメントに変換される(出典:Microsoft)
文字や枠が適切なエレメントに変換される(出典:Microsoft)

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

Sketch2Codeに使用した技術(出典:Microsoft)
Sketch2Codeに使用した技術(出典:Microsoft)

Sketch2Codeの紹介ビデオ(出典:Microsoft/YouTube)


-PR-企画特集

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]