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に画像（手書きワイヤーフレーム）をアップロードします
2. ビジョンモデルが、画像に含まれているHTML要素とその位置を推測します
3. 文字認識サービスが、そのHTML要素に含まれている文字を書き起こします
4. レイアウトアルゴリズムが、ビジョンモデルの生成結果の空間情報からグリッドを自動生成します
5. HTML生成エンジンが、以上の処理によって作成されたモデルをHTML化します
このことにより、左（手書き）のものが、右（HTMLマークアップ済み）に変換されます。
こちら、 https://sketch2code.azurewebsites.net/ で実際にこのAIサービスを試せるサービスが公開されています。ぜひお試しください。（生成後のHTMLファイルをダウンロードすることもできます）。
ちなみに、ComponentsデザインはCSSフレームワークの「Bootstrap」を使ってる模様。こういったサービスは「ソースコードが汚い！！」と批判されることが多いですが（そして、AIだから学習するし、本当無価値な批判だと思いますが）、生成されるコードはこんな感じです（改行・空白のみ整形しています）。
Sketch 2 Codeは何をもたらすのか
人類の工業化などの歴史を振り返ると、単純作業が機械に置き換わることによって（しかも速い！）、より高次元なことにリソースを割り振ることができるようになるので、私たちは、何をして、何を生み出すべきかを考え直す時代が再びきてるんだろうなと思います。
技術イノベーションにより何が生まれ、既存のものはどうなっていくかは書籍「イノベーションのジレンマ」でよくまとめられているのでおすすめです。
短期的には、スキルはモバイルアプリ方面に振っていくのがいいのではないかなぁと思ってます。例えば、Ionic Frameworkを使うと、HTML5でiOS/Androidアプリもリリースできますし、実際にWebデザイナーがモバイルアプリだしたりしてるので。あと、フロントエンドまわりの知識は音声デバイス操作であったりいろいろ応用きくというメリットは大きい。
また、全体的な話をすると、Webのワークフローも変わっていくのではないでしょうか。特にプロトタイピングまわりは、現在は「デザイナがプロトタイプをつくって、コーディング前にレビュー」が主流ですが、それが「企画者がプロトタイプをつくって、レビュー後に、機能を実装して、最後にデザインが当てられる（スキンみたいな感じ）」であったり、もう一度大きく変わるような予感がしています。
この記事が何らかの参考になりましたら、以下からご寄付いただけますと大変喜びます。それでは、また。