AUTOCODINGは本当にオートなのか?

デザインデータからHTMLが出力される夢のようなツールがあります。
その名も「AUTOCODING」というWEBサービスです。
コーダーとして働いている人にとっては冷や汗まで出てしまいそうな代物です。

AUTOCODINGはデザインデータを基に、HTMLを自動で生成するエンジンです。
Photoshopデザインデータをアップロードするだけで、
HTMLとCSS、画像ファイルが出力されます。

…と書いてあります。

もう使わない理由がないですね。早速使ってみました。

百聞は一見にしかずということでまずは、
実際にAUTOCODINGを使ってコーディングしたページを見てください。
sample
※人為的な調整がかなり入ってます。

まず、結論から申し上げますと…。

【導入はもう少し待ったほうが良いかも?】

という私の感想です。
その理由を4つに絞りました。

1.PSDで1pxズレてるとそれもしっかり計算される
良くも悪くも、このエンジンは忠実にデザインを再現しようとします。
しかも見た目は同じでも一つのセクションに対してクラスが生成されるので、
CSSの行数が非常に多いです。
後から人がメンテナンスすることを考えると…効率があまり良くないです。

2.作られるクラスに規則性がない
一応、PSDでクラス名を指定することは出来ますが、
それをやるなら自分でコーディングしちゃったほうが早いと思っちゃうのが正直なところ。
かといってPSDでクラス名を指定しなければ「text-0.1.2…」「group-0.1.2…」
といったクラスがどんどん作られてしまい何が何だかわからなくなります。

3.テキストを画像にしたい場合はラスタライズが必要
コーダーの永遠の悩みとして、デザインのフォントを再現するために、
テキストを画像にするケースがあると思います。
その都度PSDからテキストをラスタライズする必要があります。
ラスタライズしたテキストは修正できなくなるので、
後から文字を変えるときに手間が増えるということです。

4.レスポンシブコーディングが非対応
何気にこれが一番大きいかも。
今時、レスポンシブに非対応のWEBページは少なくなってきました。
一応無理やりPCとスマホで別のPSDを用意して、
メディアクエリで表示を切り替えることは可能ですが、
修正があったときに泣きを見るのはコーダーでしょう。

結局のところ…

導入したらしたで、AUTOCODING後メンテナンスが発生することは必至でしょう。
ちなみに上で紹介したWEBページは一日半かかってしまいました。
シンプルな構成なので、普通にコーディングしたら半日で終わるでしょう。

ただし、AUTOCODINGもまだまだ開発段階みたいなので、今後に期待ですね。
https://autocoding.jp/sp/faq/product

いいなと思ったのは日本の企業が先陣をきって開発してることです。
もちろん海外にもあるみたいですが、まだまだ導入は先になりそうですね。