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

先月の総合アクセスTOP10

  1. 「訃報」「愛猫」「手風琴」って読める? 常用漢字表に掲載されている“難読漢字”
  2. 痩せたらこんなに変わるのか 丸山桂里奈、現役時代の姿が別人過ぎて「誰かわからん」の声殺到
  3. 保護した子ネコに「寂しくないように」とあげたヌイグルミ お留守番後に見せた子ネコの姿に涙が出る
  4. セーラーサターンの変身シーン、四半世紀を経てアニメ初公開にネット湧く 「ついに公式が」「感謝しかない」
  5. 「髪型体型全て違う」 丸山桂里奈、引退直後のセルフ写真にツッコミ 4年前のスレンダーな姿に「今も輝いててかわいい」の声も
  6. 鳥取砂丘から古い「ファンタグレープ」の空き缶が出土 → 情報を募った結果とても貴重なものと判明 ファンタ公式も反応
  7. 「マジで助けてくれ」 試験中止で教授に“リスのさんすうノート”を提出することになった大学生に爆笑
  8. 「140秒とは思えない満足感」「なぜこれだけの傑作が埋もれているのか」 崩壊した日本を旅する“最後の動画配信者”のショートフィルムが話題
  9. 「化粧! 今すぐ落としてこい!」 男性教師に怒鳴られる生徒をかばう女性教師を描いた漫画に納得と感謝の声
  10. 畠山愛理、いま着たらピチピチなレオタードを公開 「とんでもなく可愛い」「見惚れてしまいました」と反響