ニュース
» 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/2312/05/news021.jpg 柴犬が見つけた瀕死の子猫、最後の力で立ち上がり……　優しさが救った小さな命が600万再生「感動と感謝です」
  2. /nl/articles/2312/06/news119.jpg 中尾明慶、「金八」で“めちゃくちゃケンカした同級生”と因縁の再会　10年前の悪態謝り倒し「芸能界でおかしくなっちゃった」
  3. /nl/articles/2312/06/news018.jpg 超大型ワンコ、予想を裏切る“ギャップ萌え”食事シーンが500万表示！　お坊っちゃま感あふれる甘えっぷりに「可愛い〜」「品が良いですねw」
  4. /nl/articles/2312/06/news022.jpg インコが“断捨離”したドールハウス、中をのぞいてみると……？　衝撃の光景に「廃墟w」「大変なことにww」
  5. /nl/articles/2312/06/news111.jpg ユージ、新たな愛車は「世界一贅沢なトランポ」　ペルシャ絨毯使用のカスタムカー披露も「僕はバイクを乗せるつもりですが笑」
  6. /nl/articles/2312/06/news036.jpg 掘り起こした土がなかったときのウサギ→ぼう然　では土があったときは？　うさうさブルトーザーに「想像を絶する可愛さだった」
  7. /nl/articles/2312/05/news190.jpg 「たった1カ月で行ってしまった」　桃井かおり、YOSHIKIの米国マネージャー追悼　“40年来の無二の親友”だった夫は「涙まだ止まらず」
  8. /nl/articles/1705/16/news143.jpg 「同性愛者を入店させないで」と投書した客に「もう来ないでください」　お店の回答に称賛の声集まる
  9. /nl/articles/2312/05/news138.jpg 田中みな実、“共演した姉”の存在に反響「居るとは聞いていたけど」「激似やなぁ」　すらっとしたたたずまいに「品のあるお方」
  10. /nl/articles/2312/06/news097.jpg 「何処に行っちゃったのかな」　白鳥久美子の息子、生後1か月にして“ちょっと心配”な症状　初受診で医師「この時期に通院する赤ちゃんはいる」
先週の総合アクセスTOP10
  1. オール巨人、30年モノな“伝説の1台”に自負「ここまでキレイな車はない」　国産愛車の雄姿に称賛の声「気品がある」「凄くエレガント」
  2. 「明らかに写真と違う」　東京クリスマスマーケットのフードメニューが物議……　購入者は落胆「悲しかった」
  3. 「ごめん母さん。塩20キロ届く」LINEで謝罪 → お母さんからの返信が「最高」「まじで好きw」と話題に
  4. 田中みな実、“共演した姉”の存在に反響「居るとは聞いていたけど」「激似やなぁ」　すらっとしたたたずまいに「品のあるお方」
  5. 藤本美貴、“全然かわいくない値段”のテスラにグレードアップ　スマホ一つでの注文に「震えちゃ〜う！」
  6. マックで「プレーンなバーガーください」と頼んだら……？　出てきた“予想外の一品”に驚き「知らなかった」
  7. 伊藤沙莉、“激痩せ報道”の真相暴露→広瀬アリスの株が上がってしまう　「辱めったらない」告白に「アリスちゃん、ええ人や〜」
  8. 「あなたは日本人？」突然送られてきた不審なLINE、“まさかの撃退方法”に反響　「センス良い」「返しが秀逸」
  9. “鬼ダイエット”で激やせの「Perfume」あ〜ちゃん、念願の姿に「着れる日が来るなんて」と大喜び
  10. 900万再生のワンコに「電車で笑ってしまった」「つられてめちゃくちゃ笑っちゃうｗ」　“突然魔王になった犬”に腹を抱える人続出
先月の総合アクセスTOP10
  1. 「酷すぎる」「不快」　SMAPを連想させるジャンバリ.TVのCMに賛否両論
  2. 会話できる子猫に飼い主が「飲み会行っていい？」と聞くと……　まさかの返しに大反響「ぜったい人間語分かってる」
  3. 実は2台持ち！　伊藤かずえ、シーマじゃない“もう一台の愛車”に驚きの声「知りませんでした」　1年点検時に本人「全然違う光景」
  4. 大好物のエビを見せたらイカが豹変！　姿を変えて興奮する姿に「怖い」「ポケモンかと思った」
  5. 渋谷駅「どん兵衛」専門店が閉店　店内で見つかった書き置きに「店側の本音が漏れている」とTwitter民なごむ
  6. 西城秀樹さんの20歳長男、「デビュー直前」ショットが注目の的　“めちゃくちゃカッコいい”声と姿が「お父さんの若い頃そっくり」「秀樹が喋ってるみたい」
  7. “危険なもの”が体に巻き付いた野良猫、保護を試みると……？　思わずため息が出る結末に「助けようとしてくれてありがとう」【米】
  8. 「やばい電車で見てしまった」「おなか痛い、爆笑です」　カメがまさかの乗り物で猫を追いかける姿が予想外の面白さ
  9. おつまみの貝ひもを食べてたら……　まさかのお宝発見に「良いことありそう」「すごーい！」の声
  10. 「3カ月で1億円」の加藤紗里、オーナー務める銀座クラブの開店をお祝い　“大蛇タトゥー”＆金髪での着物姿に「極妻感が否めない」