手書きスケッチをHTML化する「Sketch2Code」を試す
数週間前のことになりますが、
MicrosoftがSketch2Codeなるものを発表しました。
Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表：AIで手書きの図形と文字を認識 – ＠IT
上の記事にも書いてありますがSketch2Codeとはなにものか。
ホワイトボードなどに手書きでスケッチしたユーザーインタフェース（UI）画面を、AI（人工知能）を利用して、HTMLコードに変換するWebベースソリューション
まぁなんと便利そうな！
面倒な設計作業の時間短縮や効率化が図れそうですね。
というわけで、今回はSketch2Codeがどのようなものか使ってみました。
Webから利用可能
なんとこの便利ツール、Webから使えるというから驚き。
Sketch2Code – Transform sketches into HTML using AI
使用手順はなんとも簡単なものです。
手書きスケッチの画像をアップロードして、AIが変換したHTMLファイルをダウンロードするだけ！
手書きスケッチを変換
早速適当なスケッチでいくつか変換してもらいましょう。
私が書いた適当（汚い）ものなのでそこは見逃してくださいませ。。。
<!-- ダウンロードしたHTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>HTML Result</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container body-content">
<div class="container">
<div class="row justify-content-center" style="padding-top:10px;">
<input class="form-control"></input>
</div>
<div class="row justify-content-center" style="padding-top:10px;">
<label>Password</label>
</div>
<div class="row justify-content-center" style="padding-top:10px;">
<input class="form-control"></input>
</div>
<div class="row justify-content-center" style="padding-top:10px;">
<button class="btn btn-primary">box</button>
</div>
</div>
</div>
</body>
</html>
まずはログインフォームを変換してみました。
IDのラベルとボタンのテキストが認識されませんでしたが、基本構成は変換できていますね。
ちなみにダウンロードしたHTMLではbootstrapが使用されていました。
続いてブログのようなページ。
一部文章がフォームになってしまってはいますが、こちらも基本的に大きなズレはなさそうな出来上がりですね。
ユーザー画像のつもりで描いた丸にバツ印の部分は無視されてしまっていますね。
丸は認識しづらいのでしょうか。
最後にLPページ風なものを。
メニューバーが完全になくなってしまいました。
そしてタイトルの横になぜかチェックボックスが。。。笑
メニューの左端にある四角をチェックボックスと認識してしまったようですね。
手書きではない画像をアップロードしてみる
ちょっとした疑問。
手書きではないスケッチもちゃんと変換してくれるのか
というわけで、やってみましょう！
手書きのものと差が出ないように先ほどの「ログインフォーム」と「ブログページ」と全く同じデザインのものをAdobe XDで作成してやってみました。
いざ作成してアップロード。
…………ん？
変換結果が真っ白。。。
何一つ再現されない空っぽのHTMLが返ってきました。
なぜ？
色々と試行錯誤をしてみると、どうも文字サイズや図形が小さいと認識してくれないようです。
そこまで小さくしていたつもりはありませんでしたが、何度かやり直してようやく変換されました。
それがこちらです。
ログインフォームに関しては大まかには同じですね。
なぜかIDのラベルがボタンになりましたが。。。
ただブログページは全く別のものが出来上がってしまいました。
配置すらバラバラ…
手書きより再現させるのが難しいといった印象です。
使用して気づいた点
今回載せた画像以外にも何パターンか試してみて、わかったことが数点ありました。
- 日本語を認識してくれない（これは仕方ない）
- 文字が小さすぎると認識できない
- 手書きの方が再現度が高い？
- 色の認識はしない
- ボックス要素は外枠がないと認識しない
- 複雑な図形（丸や三角、斜め線）は再現できない
- 四角の中にバツ印を書くと画像として認識する
上記の点から、内部的にルールを持って要素を認識しているのではないかなと思います。
Sketch2Codeで変換させることを前提としてスケッチを描くのであれば、ある程度上記の点を気にしながら描けば再現度も高くなるかもしれません。
最後に
想像していたよりは再現度も高めでしたので、デザインのサンプルを作成するくらいであれば活用できそうだなと思いました。
自分でコーディングした方が早い方も多いとは思いますが、皆さんも一度は使用してみてはいかがでしょうか！
ちなみにSketch2CodeのソースはGitHubに公開されています。
ソースを見せてしまうとは、さすがMicrosoftさん。
Microsoft/ailab: Experience, Learn and Code the latest breakthrough innovations with Microsoft AI
