「スケッチからHTMLを自動生成」Sketch 2 Code を早速使ってみた

Sketch 2 Code を早速使ってみた

どうも!最近炭水化物ダイエットをしているYutaです。

皆さん「Sketch 2 Code」知ってますか!?
Sketch to Code ですね!わかりやすく書くと!
個人的に”to”を”2″と書くの好きです。

Sketch 2 CodeはMicrosoft AILabが開発したスケッチ(ワイヤー)からHTMLを自動生成するシステムです。もうこの文章だけで十分すごい。

デザイナーさんとかだと、打ち合わせしつつワイヤー書いて、持ち帰ってHTMLコーディングする。という流れはよくやるのではないでしょうか?
Sketch 2 Codeを使えばこの流れがめちゃめちゃすばやくなりそうです!!素敵!

というわけで早速使ってみました

「ごちゃごちゃうるさい。はよ使って見せれ。」という人がいると思いますので、早速使ってみます。
ここから実際のWebサービスにアクセスできます。Microsoft Azureを使っているようです。

「スケッチ書いて試すのが面倒!」という人のためにサンプルのスケッチがすでに用意されているので、試してみてください。
僕はちゃんと書きました。

罫線のあるノートに書いてみたこれ(プロフィールページ風)

と、白紙のノートに書いたブログのトップをイメージしたこれ

を試してみます。

プロフィールページ風

早速「UPLOAD DESIGN」からアップしてみると・・・

ほう!!ほぼ思い通りのHTMLが作成されました!
罫線のある無しはあまり関係ないのか・・・?
学習したモデルで処理しているみたいなので、罫線の存在も学習済みなのかもしれないですね!わざわざ白紙のノートを準備しなくて良いのは良いポイントです!

ブログトップ風

こっちも試してみましょう。いざアップロード

お、これはすこし複雑過ぎたかな・・・?少し想定のものと違うHTMLが帰ってきました。(元スケッチが少し詰め込みすぎた感じがありますね・・・)
あんまり複雑すぎるものは良くないのかもしれないですね!
ここで「もしかして元スケッチが暗すぎ??」と思ったので、こんなかんじに明るくして再挑戦!

アップした結果は・・・?

う〜ん・・・あんまり大差なし。
明るさとかはシステム側で対応しているのかもしれません。でも暗い画像よりは明るくくっきりしている画像のほうが間違いなくいいでしょう!
打ち合わせしながらホワイトボードに書いたものとかベストかも知れませんね!

作成されたHTMLをすこし見てみる

1つ目のプロフィール風ページの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-start" style="padding-top:10px;">
                
<div class="col" style="padding-top:10px;">
                    <img alt="Image html" width="90%" height="90%" style="max-height:500px;max-width:500px;" src="https://sketch2code.azurewebsites.net/Content/img/fake_img.svg" />
                </div>

                
<div class="col" style="padding-top:10px;">
                    

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                        
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    

                </div>

            </div>

            
<div class="row justify-content-start" style="padding-top:10px;">
                
<div class="col" style="padding-top:10px;">
                    
<h1>Who Iam Like</h1>

                </div>

                
<div class="col" style="padding-top:10px;">
                    
<h1></h1>

                </div>

            </div>

            
<div class="row justify-content-start" style="padding-top:10px;">
                
<div class="col" style="padding-top:10px;">
                    

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                        
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    

                </div>

                
<div class="col" style="padding-top:10px;">
                    

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                        
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    

                </div>

            </div>

            
<div class="row justify-content-start" style="padding-top:10px;">
                
<h1>Works</h1>

            </div>

            
<div class="row justify-content-start" style="padding-top:10px;">
                
<div class="col" style="padding-top:10px;">
                    <img alt="Image html" width="90%" height="90%" style="max-height:500px;max-width:500px;" src="https://sketch2code.azurewebsites.net/Content/img/fake_img.svg" />
                </div>

                
<div class="col" style="padding-top:10px;">
                    <img alt="Image html" width="90%" height="90%" style="max-height:500px;max-width:500px;" src="https://sketch2code.azurewebsites.net/Content/img/fake_img.svg" />
                </div>

                
<div class="col" style="padding-top:10px;">
                    <img alt="Image html" width="90%" height="90%" style="max-height:500px;max-width:500px;" src="https://sketch2code.azurewebsites.net/Content/img/fake_img.svg" />
                </div>

            </div>

            
<div class="row justify-content-start" style="padding-top:10px;">
                
<div class="col" style="padding-top:10px;">
                    <label>Title</label>
                </div>

                
<div class="col" style="padding-top:10px;">
                    <label>Title 2 Title 3</label>
                </div>

                
<div class="col" style="padding-top:10px;">
                    <label></label>
                </div>

            </div>

            
<div class="row justify-content-start" style="padding-top:10px;">
                
<div class="col" style="padding-top:10px;">
                    

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                        
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    

                </div>

                
<div class="col" style="padding-top:10px;">
                    

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                        
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    

                </div>

                
<div class="col" style="padding-top:10px;">
                    

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                        
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    

                </div>

            </div>

        </div>

    </div>

</body>
</html>

ボタンとか見出しとかの雰囲気で察していましたが、BootstrapをつかったHTMLが作成されるようです。
よくみると不要なタグ・・・というよりは空のlabelタグとかがチラチラ見えますね。文字が何なのか認識できなかったのかな・・・?

とりあえず今のままだとかなりシンプルなので、フリーのデザインテンプレートのCSSとに置き換えてみました!

置き換えたものがこちら

手書き風なフォントとボタンがハマってまさか自動生成したものとはおもわれないでしょう。
これは・・・間違いなく便利。非デザイナーでもイメージでモック作れるから個人開発するときとかに超役に立ちますね。

まとめ

以上、早速触ってみた結果でした。
Sketch 2 Codeは、

  • Microsoft AI Labが開発した手書きワイヤーからHTMLを自動生成するWebアプリ
  • そこまで複雑ではないものであれば、8,9割くらいの完成度でHTMLを作成してくれる
  • ノートの罫線はあまり影響しない(と思われる)
  • 出力されるHTMLはBootatrapを使ったHTMLなので、テーマなどを当てればすぐにデザインの整ったモックを作れる

という特徴がありました!
ワイヤーからHTMLへ・・・という作業は開発の初期では必ず通る部分だと思うので、仕事を加速させてくれることは間違いなさそうです。
ぜひ一度自分の手書きで試してみてくださいね! では!