ニュース
» 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. 指原莉乃、すっぴんからのメイク動画が1日で100万再生を突破　「プレゼンがすごく上手くてビックリ」と高評価も続々
  2. お水を飲みたいカラスさんがとった行動とは……？　人間に“ある方法”でお願いするカラスが賢くてかわいい
  3. 菊地亜美、体調不良の原因は「赤ちゃんと同じような大きさの…」　RIZAP10キロ減から2年で襲った悲劇
  4. アンガ田中、「みなおか」で買わされた“高級腕時計”を披露　　438万円→800万円に価値高騰で「欲しがるコレクターもたくさん」と反響
  5. 息子が「パパ」と言って指さしたのは……？　親子でバスに乗ったときのエピソードを描いた漫画がジワジワ面白い
  6. アントニオ猪木、“リハビリ中”の現在の姿を公開　激励相次ぐ「猪木さんは不死身の漢や！」「負ける訳ないやないか」
  7. 「綺麗で腰抜かした」「シワ少ない!!」　67歳の研ナオコ、華やかメイク動画で披露したすっぴん姿に反響
  8. 実家に「ねこ様元気？」と聞いた結果……　やりたい放題のお猫さまが笑ってしまうかわいさ
  9. 保護した子ネコに「寂しくないように」とあげたヌイグルミ　お留守番後に見せた子ネコの姿に涙が出る
  10. インコさんが逆さまのまま「すやぁ……」　衝撃の寝相で爆睡するインコが面白かわいい

先月の総合アクセスTOP10

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