記事の詳細
Microsoftから手描きスケッチからHTMLを生成する「Sketch2Code」が発表されたのでAdobeXDのワイヤーを入れてみる
時代がAIですね。
WEBのワイヤーフレームやデザインを起こす際に、Sketch、というソフトを使っている方も多いかと思います。ちょっと名称がややこしいですね……。
もっぱらAdobeXDを利用している当社ですが、SketchはXDよりも歴史深く、様々なプラグインが付属している便利UI作成ソフト。個人的にはいずれAdobeさんのことだから、Sketchの「良いとこどり」しちゃってアップデートかけていってくれるのでは……? などと思っています。
というかUI制作ソフトってワイヤーからデザインから写真加工アイコン作成、コーディングから共有まで全部一環してやってくれるものってないものですかね……。
今回のブログの見出しはコチラです!
カンタン3ステップでHTMLが生成されます。
さてこちらの「Sketch2Code」は、3ステップでWEBからHTMLを生成できるツールです。そのうち色も反映するようになるのでしょうか?
- スケッチしたワイヤーフレームやデザインの写真をアップロード
- 変換
- HTMLダウンロード
写真をアップロードするほか、スマートフォン、タブレットから撮影しそのまま転送することも可能なようです。
非日本語対応。ポイントは余白としっかりボックスを作る事。
何はともあれやってみましょう。
サンプルにあった絵を参考に、もそもそとワイヤーを切ってみました。それがこちら
枠アリと枠ナシ。
UPLOAD DESIGNをクリックして画像をアップロードすると自動的に動き出します。
結果。
ボタンはオンマウスになるとちゃんと反応するようになっています。
ちなみにパラグラフにあるサンプルテキストは「グリーキング」(ギリシャ語:英語圏における「意味の分からない文章」らしいです)と呼ばれいて、中に入っているのはキケロの「De finibus bonorum et malorum」(善と悪の究極について)らしいです。日本語版のAdobe Illustratorだとグリーキングは「夏目漱石の草枕」になります。
感想としては「お、わりとよろしい」でした。ちょっと見てみましょう。
どうやら「小さすぎると分析しにくい」ようです。特にインフォメーションのあたりをButtonと認識しているあたりがちょっとこまる。
もう一つの方をやってみましょう。
下の丸い窓のアニメーションかわいいですね。
結果は以下の通り。
どうやら認識範囲は「1section」あるいは「1article」の範囲が最も効率がよさそうです。
ホワイトボードを利用したり、タブレット、あるいはプロジェクターなどに反映してワイヤーを作成することが多いでしょうので、もともとそういう範囲設定なのかもしれません。
それではそのようにやってみます。
だいぶコンパクトにした(つもり)トップビューです。
ですがこちら、五分経っても反応がありませんでした。何が悪かったのかなーと思いつつ、文字を全撤去。それでもだめだったので、メニューバーをただのボックス形式に。
ボックスはきっちり囲まないとだめなようですね。
かなり余白を開けないとそもそもテキストボックスとパラグラフの認識もあいまいなのか……。
生成されるコードはBootstrapに準じています。
コードは以下の通り
想像よりだいぶきれいでした。ブートストラップを利用されているデザイナーさんは結構重宝するのでは……? ついているスタイルがpaddingだけとは思わなかった……。
たまにわけのわからないところでhタグとか入ってますが、少なくとも自分でHTMLを生成するよりは断然早い気がします。
AdobeXDで作ったUIを反映させてみる
こんな感じのざっくりレイアウトですがどうなるでしょうか。
この時点で割と衝撃的。(伸びるのか……)
プリンどこいった。
あ、読み取れていませんね! カラー写真はダメな模様。
じゃあこっちはどうでしょう。
灰色のとこしか読み取れない!
AIがどこまで発展できるか、こうご期待。
はっきり言うと、イマイチです。ワイヤーを読みこんでくれるならまだ使い方もありましたが、軒並みダメではちょっと……。何のためのソフトなのかしら……。ワイヤー→直接実装 ってそうみられるものではないのでは?
でもAIの最初ってこんなものなのかもしれませんね。これが三年後どうなっているのか、楽しみですねー。
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。