今度はSketchからHTMLとCSSを生成するツール「Protoship UIPad」が登場!2017年はコード生成ツールが続々リリースか…?

更新日:2016年12月20日

昨日、Sketch to Codeのベータ公開についてお伝えしたばかりでしたが、今度はSketchをそのままHTMLとCSSで出力できるツールが発表されました。
Protoship UIPad」です。

Sketchで作ったデータをそのままHTMLとCSSに変換して、プロジェクトを生成してくれるようです。
Sketch内のグループ名はそのままHTMLのクラスになるみたいなので、きちんとレイヤーやグループ名を整理しておくと綺麗に書き出せそう。
実際に書き出してみたところ、React.jsも使われているみたいなので複雑な動きなども付けられるのかも?
サンプルで作ってみたファイルの中身はこんな感じ。

さらにSketch→HTMLだけではなく逆にHTML→Sketchということもできるようです。
Chromeの拡張機能「Protoship Teleport」をインストールし、変換したいWebサイトを開いてProtoship TeleportをポチッとするとSketchデータを作ってくれます。
試しにYahoo! Japanを変換してみたらこんな感じに。

2017年はコードジェネレーターが続々登場するのか…?

ここ最近、Sketchやプロトタイピングツールで作ったものをコードに変換するというプロダクトが続々と出てきています。もしかしたらあと2〜3年したら、プロトタイピングツールで描いたものが普通にHTMLやSwiftに変換されて、コーディングの手間はどんどん減っていくのかもしれません。Flashを作っていたような感覚でiOSアプリが作れる…そんな時代がもう目の前まで迫ってきているようです。

Protoship

書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします!

『デザインツール』の記事