記事の詳細

時代がAIですね。

>Microsoft AI Sketch2Code

WEBのワイヤーフレームやデザインを起こす際に、Sketch、というソフトを使っている方も多いかと思います。ちょっと名称がややこしいですね……。
もっぱらAdobeXDを利用している当社ですが、SketchはXDよりも歴史深く、様々なプラグインが付属している便利UI作成ソフト。個人的にはいずれAdobeさんのことだから、Sketchの「良いとこどり」しちゃってアップデートかけていってくれるのでは……? などと思っています。

というかUI制作ソフトってワイヤーからデザインから写真加工アイコン作成、コーディングから共有まで全部一環してやってくれるものってないものですかね……。

 

カンタン3ステップでHTMLが生成されます。

さてこちらの「Sketch2Code」は、3ステップでWEBからHTMLを生成できるツールです。そのうち色も反映するようになるのでしょうか?

  1. スケッチしたワイヤーフレームやデザインの写真をアップロード
  2. 変換
  3. HTMLダウンロード

写真をアップロードするほか、スマートフォン、タブレットから撮影しそのまま転送することも可能なようです。

非日本語対応。ポイントは余白としっかりボックスを作る事。

何はともあれやってみましょう。
サンプルにあった絵を参考に、もそもそとワイヤーを切ってみました。それがこちら

Sketch2Code Sketch2Code

枠アリと枠ナシ。

Sketch2Code

UPLOAD DESIGNをクリックして画像をアップロードすると自動的に動き出します。

Sketch2Code

結果。

Sketch2Code Sketch2Code

ボタンはオンマウスになるとちゃんと反応するようになっています。
ちなみにパラグラフにあるサンプルテキストは「グリーキング」(ギリシャ語:英語圏における「意味の分からない文章」らしいです)と呼ばれいて、中に入っているのはキケロの「De finibus bonorum et malorum」(善と悪の究極について)らしいです。日本語版のAdobe Illustratorだとグリーキングは「夏目漱石の草枕」になります。

感想としては「お、わりとよろしい」でした。ちょっと見てみましょう。

Sketch2Code

どうやら「小さすぎると分析しにくい」ようです。特にインフォメーションのあたりをButtonと認識しているあたりがちょっとこまる。

もう一つの方をやってみましょう。

Sketch2Code

下の丸い窓のアニメーションかわいいですね。
結果は以下の通り。

Sketch2Code Sketch2Code

どうやら認識範囲は「1section」あるいは「1article」の範囲が最も効率がよさそうです。
ホワイトボードを利用したり、タブレット、あるいはプロジェクターなどに反映してワイヤーを作成することが多いでしょうので、もともとそういう範囲設定なのかもしれません。

それではそのようにやってみます。

だいぶコンパクトにした(つもり)トップビューです。

ですがこちら、五分経っても反応がありませんでした。何が悪かったのかなーと思いつつ、文字を全撤去。それでもだめだったので、メニューバーをただのボックス形式に。

Sketch2Code

Sketch2Code

Sketch2Code

ボックスはきっちり囲まないとだめなようですね。
かなり余白を開けないとそもそもテキストボックスとパラグラフの認識もあいまいなのか……。

 

生成されるコードはBootstrapに準じています。

コードは以下の通り

Sketch2Code

想像よりだいぶきれいでした。ブートストラップを利用されているデザイナーさんは結構重宝するのでは……? ついているスタイルがpaddingだけとは思わなかった……。

たまにわけのわからないところでhタグとか入ってますが、少なくとも自分でHTMLを生成するよりは断然早い気がします。

AdobeXDで作ったUIを反映させてみる

こんな感じのざっくりレイアウトですがどうなるでしょうか。

Sketch2Code

Sketch2Code

この時点で割と衝撃的。(伸びるのか……)

Sketch2Code

プリンどこいった。

Sketch2Code

あ、読み取れていませんね! カラー写真はダメな模様。
じゃあこっちはどうでしょう。

Sketch2Code Sketch2Code Sketch2Code

灰色のとこしか読み取れない!

AIがどこまで発展できるか、こうご期待。

はっきり言うと、イマイチです。ワイヤーを読みこんでくれるならまだ使い方もありましたが、軒並みダメではちょっと……。何のためのソフトなのかしら……。ワイヤー→直接実装 ってそうみられるものではないのでは?

でもAIの最初ってこんなものなのかもしれませんね。これが三年後どうなっているのか、楽しみですねー。

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る