「sketch 2 code」はMicrosoft AI labが開発し公開しているサービスで、AIによって手書きのワイヤーフレームをアップロードすると、画像とテキストの位置を認識し、それらを自動的にHTMLでレイアウトしてくれるというもの。
下記の関連リンクを紹介しているが、現在アクセスが殺到しているせいなのか、アクセスできないので実際には試していないので悪しからず。
目次 [非表示]
「sketch2code」に対してのコーダーからの意見
当方、フリーランスでサイト制作もメインの仕事としてこなしている。と言っても威張れるほどのキャリアもないし「超」がつくほどのマスターでもない、まぁ、ただ先方に満足してもらえるほどの最低限のレベルのものは制作できるくらいのスキルを持ち合わせていて、その程度のレベルでの意見と思っていただければと。
「sketch2code」に対しての技術的なこと
個人的にはAI関連の記事に興味があるので、初めて「sketch2code」についてのニュースを読んだときは、非常に心踊ったのを覚えている。しかし、AIについては開発側の立場ではなく利用側の意見として「思った通りにHTMLでレイアウトしてくれる」のなら凄いもんなんだなと思う。
ただスケッチからHTMLに変換するプロセスについて、利用者側からすれば、どんなに凄い技術を使ってようが「知ったこっちゃない」ってことになるでしょうね。
「sketch2code」が出力したレイアウトについて
「sketch2code」が出力したレイアウトについて一言で言えば「全く残念な結果」でした。「全く使えねー」ってことです。
サービスが止まって試せていないので下記のページから画像を拝借させてもらってちょっと説明してみる。
「sketch2code」が出力したレイアウト その１
まずは、こちら。赤線が理想のレイアウトで青線が実際に出力されたとするレイアウト。コーダーさんならわかるが、この出力されたレイアウトは全く使えないものなのだ。
スポンサーリンク
専門外の方ら見たら、「二段目の段落を２コラムから、３コラムに変えたらええやん」ってことになるが、レスポンシブを考慮すると、赤線のように大きく三つに分けて、その中に「画像」、「タイトル」、「文章」、「ボタン」のブロックを作っていかなければならない。
出力されたHTMLから理想のレイアウトに作り直すくらいなら、ゼロから作った方が速いだろう。
「sketch2code」が出力したレイアウト その２
こちらも右画像の赤線が理想のレイアウトで青線が実際に出力されたとするレイアウト。
左の手書きレイアウトにある「空白を利用したデザイン」が全く反映されていない。先ほどのレイアウトに比べれば致命的ではないが、おそらく現在のものでは「空白を利用したデザイン」は他の手書きレイアウトでも反映されないのではないかと推測できる。
「sketch2code」の使い道が見当たらない
これから進歩していくので現在の品質での話になるが、「sketch2code」の使い道がさっぱり思いつかない。コーディングする際の下地としても使えないし、ワイヤーフレームとしても意味がない。だって手書きしたものレイアウトが異なって出力されてるんだから。
「sketch2code」はコーダーとしてどう感じたか
実際に「sketch2code」から出力されたサンプルを見た感じ、はっきりえば実用的なものでもないし、例えば先方が「弊社のミーティングで手書きしたのをマイクロソフトの最新の技術でHTML出力したものがあるんで、それ使って制作してくださーい」なんてこと言われたら、「そんなもんいらんわ」ってなるレベル。
さらに「下地のHTML用意してるんでそこらへん制作費も・・・」なんて言われたら、「いや、このデータからお客さんが望むもの作らなきゃならないんなら逆に制作費は・・・」ってことになるでしょうね。
またBootstrapをベースに出力されているようなので、ある程度はレスポンシブにも対応したレイアウトになって出力されているかもしれないが、実用的なレベルに達していないように思える。
まとめ
ってことで最初は心ときめいた「sketch2code」ではあるが、「手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に」って言うほど新時代も感じられないし、コーダーとして脅威を感じるものでもなかった。実用的なレベルからはまだまだ程遠いように思える。ただ、いつか本当に手書きのレイアウトからもっと意味を汲み取って出力してくれて実用的なものとして出力してくれるようになってくれれば大歓迎だ。