ニュース
» 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.

昨日の総合アクセスTOP10

  1. /nl/articles/2009/23/news159.jpg 「私の勘違い」「虐待ではありません」 華原朋美、高嶋ちさ子に号泣謝罪 尋常でない様子の動画に心配の声やまず
  2. /nl/articles/1808/22/news101.jpg 「訃報」「愛猫」「手風琴」って読める? 常用漢字表に掲載されている“難読漢字”
  3. /nl/articles/2009/24/news053.jpg 1歳児の寝かしつけ後、布団を離脱した母が見たものとは…… 育児の「思わぬ伏兵」を描いた漫画が予想外にかわいい
  4. /nl/articles/2009/24/news155.jpg 井村屋が具のない素の中華まん「すまん」を開発中 Twitter担当者とフォロワーの熱意で試作までこぎつける
  5. /nl/articles/2009/25/news014.jpg 「こんなこともできないの?」と言う人は“出来ないこと”がわからない――傷つく言葉が出てくる理由を考えた漫画にハッとする
  6. /nl/articles/2009/21/news037.jpg 「辞めさせていただきます」 「半沢直樹」最終回予告で半沢の出向辞令&退職願提出……衝撃展開にネット考察相次ぐ
  7. /nl/articles/2009/24/news112.jpg アルコール依存症の夫に寄り添う妻の漫画『だらしない夫じゃなくて依存症でした』に注目集まる 厚労省・専門家監修で依存症を描く
  8. /nl/articles/2009/24/news177.jpg 「Microsoft Flight Simulator」無料アップデートで日本マップを大幅刷新 “完全に実写”だこれ!
  9. /nl/articles/2009/25/news063.jpg 税率が変更されるお酒が一目で分かる! Yahoo! JAPANが特設サイト「酒税法改正 なにがどうなる?」を公開
  10. /nl/articles/2009/24/news159.jpg 「年齢なんてただの数字よ!」夫たちのカミングアウトから始まったおばあちゃん2人の共同生活は…… 「グレイス&フランキー」がコミカルでパワフル

先週の総合アクセスTOP10