Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！｜榊原昌彦

Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。 Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリです。GitHub（ https://github.com/Microsoft/ailab/tree/master/Sketch2Code ）で公開されているので、確認することができます。行っている処理は以下の通り。 1. ユーザはWebに画像（手書きワイヤーフレ

[amamako]

人間は何回ホームページ・ビルダーの過ちを繰り返すのだろうか

[yurikago12]

その名前だと某デザインツールと被っててややこしい

[megazalrock]

これじゃなくて「手書きのスケッチ」じゃなくてSketchファイルから自動でちゃんとしたHTMLにしてくれるのが欲しい。

[witch-doktor]

なるほど。本番に使うのが嫌な人でも、プロトタイピング用途なら十分使えそうな気がする

[kathew]

手描きじゃない（それこそSketchから出力したような）画像からどれだけ作れるか気になる

[FlowerLounge]

確かに最初はホームページビルダーかも知れないけど、学習によってデザインの4要素（「近接」「整列」「反復」「対比」）を出力結果に反映するのなら、世の生産性は劇的に向上するだろう

[kagioo2uma]

は？SketchはMac専用だろトチ狂ったかMSって思ったらガチの手書きの方だった

[rti7743]

素晴らしい。こういうのを待っていたんだ。あえて言うなら、拡縮する時にどこを伸ばすのか、消すのか、固定するのかを赤ペンで、矢印をかけたりするともっといいかも。

[skunk0915]

html　エディタ

[takatoshiono]

すごい

[otchy210]

幅の違うスケッチを 3 枚くらい読ませて、レスポンシブにして欲しい。そこまで行ったらすごい。

[securecat]

まあ確かにInVisionにワイヤー食わせてリンクつないでると、いやこんなのわかるでしょ？よしなに頼むよって思うんで、自動でリンク構造つきHTMLにしてくれると助かる

[lazycamera]

一瞬、「Sketchってマイクロソフトに買収されてた？」って思ってしまった。全然別の話だった。

[ku_marin]

てっきりSketchプラグインかと思ったら違った。コードより良い感じのデザイン吐いてくれるの期待

[karasunekoneko]

Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！｜榊原昌彦 @rdlabo｜note（ノート）

[yumu19]

おー。 #sigpx

[ANNotunzdY]

aiファイルやSketch(アプリの方)ファイルからの自動生成が出来たら欲しいんだけど。

[liszworks]

すごすぎる……

[syo-sa19820615]

おー、すげー！こういうのはどんどん進化してほしい。

[lolence]

『視覚に訴える作業を、そもそもなんでプログラム言語に落とし込むんだろう。そのまま手書きで書けば良いのに。』ってずっと思ってたらでてきた。

[diveintounlimit]

出力されたHTMLにそこはかとなくHPB匂がするので、トップコメの言いたい事は理解できるな(´・ω・｀)機械は書いてあるとおりの事はできるが、頭の中で考えている事は理解できない。依然として人の手は必要だろう→2階へ

[imslotter]

すごい！！！

[Hamukoro]

これのキモはhtmlを吐くことじゃなくて、いい感じのデザインを吐くところなんじゃないかなと。また触ってないからなんとも言えないけど

[at_yasu]

これは凄い良さそう

[fuyu77]

気になる。

[nikutaiha]

コード生成,microsoft,sketch2code

[monochrome_K2]

手書きのワイヤーフレームをHTMLだと対象はGIF画像にあるようなフォームくらいしか思いつかないけどそうなるとExcelでWebアプリを開発するForguncyに分があるような。ただ今後画期的な展開を期待したいと思う

[yasu-log]

Adobe ProtoやAdobe Compみたい

[n_231]

ついでにExcel方眼紙の画面設計書も出力してくれ

[swdrsker]

本番にそのまま使うのはアレだけど用途は色々ありそう。凄い

[shields-pikes]

お、気になる。

[progrhyme]

ホームページビルダー w/ AI. HP制作難しいので、こういう時代になってほしい

[jsstudy]

Microsoft AI labがすごい技術を公開していた　 https://sketch2code.azurewebsites.net/ で実際にこのAIサービスを試せるサービスが公開されています。

[kijtra]

あー、こういう欲求あるある

[RabbitBit]

既視感。

[yutaka_maruoka]

これは興味深い