デザインからHTMLを完全生成!?PSD自動コーディングルーツ「AUTOCODING」

どうも、お久しぶりの中村です。今回はタイトルのとおり、PSDファイルから自動的にコーディングデータを生成してくれるナイスなツールを見つけて使って感動してしまったので、ちょっと紹介させていただこうかと思います。

こいつです。

機能に関してザックリ言うと…

といった感じですね。

ちょうどAdobeさんのやっているCreative Cloud Extractみたいな感じだと思うんですが、こっちはまだあんまり触れていないのでまた後日使用感についてレポートしてみるとして、個人の感想としては「お？これそこそこいけんじゃね？」なんて感じました。

ので、ちょっと使い勝手ふくめアレコレ書いてみたいと思います。

ちょっと面倒ながら「一手間かけられる」使えるツール

ad01
ざくっとした手順は上述の通り。

まずはそのまんまなコピーがシンプル過ぎて気持ちいい上記のページに移動し、事前に「AUTOCODINGルール」に基いて各レイヤー・フォルダに名前をつけていきます。

ad02
例えば、ヘッダ部分のデザインが入ったフォルダには「#header」、ナビゲーション部分には「#nav」といったセクション名称をPSD上に振っていきます。

他にも#footer,#sectionなどのセクション要素、#link[URL]でリンク設定、#in_text(テキスト入力エリア),#in_image(送信ボタン)などなど、ブロックの指定やフォーム要素の指定などもPSD上で設定可能みたいです。

ad03
最新の更新内容は、管理画面から今後確認できるようにしていくとのこと。

キャリア的にデザインメインでHTMLはそこまで得意じゃ…という人にとっては、この設定そのものが「えぇー！めんどくさ！」と感じてしまう部分かもしれません。

が、一つ一つ情報の構造を見ながらレイヤータグを設定していくと、「あれ？このレイヤーは分けないとだめなのか」とか「ここはセクションをまとめないといけないな」なんてことを自然に考えられるようになっていくんじゃないかなーと。

コーディング…というより、情報設計の練習みたいな感じで使ってみるとちょっとおもしろいかもしれません

ad04
サイトTOPにある「無料体験」から登録をすれば、1日くらいでアカウントが発行されログインして、デモ版を体験できます。

なんで即日発行してくれないのー？と言いたくもなりますが、まぁひとまず待ちます。

ad05
ログインURLが届いたら早速アクセス。

管理画面にはデモ用のPSDサンプルがダウンロードできるので、マニュアル見ながらちょっと使ってみるといいかもしれません。

※ベータ版のため現在は、月額無料になっております。
※ポイント料金に関しては、もっと導入しやすいように今後、検討していくそうです。

画面で見ていると、「これいいじゃん！簡単なやつならこれでいけちゃうじゃん！」なんて感じてしまうのですが、実際現場で使うとなるとある程度用途は限られてくるのかもしれません。

ただ、逆に言えば「用途を限れば現場ですぐ使える」とも言えるわけで。

既にLPやキャンペーンページ、システムの画面プロトタイプ作成やブラウザゲームなどの画面で活用している企業も多いらしく、開発元の株式会社プレートさん曰く現時点ですでにプロにとってもそこそこ使えるツールになっているとのこと。

なんだか勢いにまかせてものすごくべた褒めな文章になってしまっていますが、もちろん課題や問題点が無いわけじゃないです。

例えばCSSのオートマージ機能がないためページごと（PSDごと）に別々のCSSが作成されてしまうとか…

レスポンシブとかパララックスについては指定のしようが無いだとか…

とにかくリリースから導入企業が増えまくったおかげで「要望」と「課題」がむっちゃくちゃ溜まっているのが現状なんだとか。

これらの要望に対しても順次対応予定らしいので、今後に期待！ですね。

このツール自体がどうこうというよりは、「あぁこうやって人間の手でしかできなかった仕事が機械やシステムに代替されていくんだなぁ」なんて事を感じたりしました。

まぁ何の仕事だってそうだと思うんですが、やってる人がさして楽しいとは感じていない、かつ事業のKPIにとって与えるインパクトが少ない部分ってのは、自動化していきたいもの。

ある一定のルールがあって、後は手を動かすだけ！な部分を労働集約ではなく、こうやってシステムの力で解決してみようとするスタンスはなんか格好良いなーとすら感じました。

ぜひ騙されたと思って一度デモを体験してみてください。ちょっとビックリすると思いますよ？

ではまたー。中村でした。