PSDからHTML, CSSを自動生成! AUTOCODINGを使ってみた。

このエントリーをはてなブックマークに追加

「AUTOCODING」はPhotoshopで制作したデザインデータをレイヤー毎に解析し、HTML・CSS・画像ファイルを自動的に出力してくれるツールです。

使い方も、「レイヤー名をルールに基づいて変えるだけ」でできるので、覚えてしまえばとても簡単♪

 

デザイナーさんにとっては、自分が作ったデザイン通りに!忠実に再現することができるので、より質の高いウェブサイトを作成することが出来ます。

デザインとコーディングが同時に!しかも簡単に!コーディングの知識が無くても!?できるので、ウェブ制作にかかる時間を大幅に削減できます。

 

エンジニアの方たちにとっては、基本的なHTMLのコーディングをこの「AUTOCODING」で自動的にすることが出来れば、その空いた時間をJAVAscriptなどのコーダーの創造性やスキルが必要な動的部分に、多く力を注ぐことが出来ます。

 AUTOCODING | デザインからコーディングを自動生成 http://autocoding.jp/

実際に、使ってみたところ・・・

・レイヤー整える→名前変える→(アップロード→チェック→修正)の作業で1ページあたり1時間くらい。

まだ慣れていないので、このかっこの部分を3回ぐらい繰り返してますが・・・。

なので、1時間ぐらいかかってしまいますが・・・慣れてくると、30分ぐらいあれば出来る作業だと思います。

公式サイトでは、AUTOCODING を導入することで、作業時間: 150時間削減、コスト: 50万円削減!!

Web制作プロジェクト全体で約34%のコストダウン!!

になるらしい。。。

 

崩れないように、再現するコツは。。。

【レイヤーを綺麗にまとめておくこと!細かくグループ分けして整理しておく!】

「画像で書き出したい所」と「テキスト部分」でグループ分けしとくといい!

そして、画像の所は一気にまとめて、ラスタライズする!

(私は、画像にしたい所だけを一気にまとめてグループ化し、「スマートオブジェクト」にしています。ラスタライズだと後々編集ができないけど、これだと編集ができるし、とりあえずですが、まとめて画像化?されるので・・・。)

 注意点は、レスポンシブに対応してないので、bootstrapとかで作りたい人はそっちの方が早いです・・・。ちなみに開発企業のプレートさんは、ベトナムでのコーダー育成にも使ってるそうです。今後バージョンアップして精度を上げていくそうなので楽しみですね!

高木 昭博
著者: 高木 昭博バングラデシュでオフショア開発を行っています株式会社セームページ: http://samepagenet.com/
代表取締役
昨年度、経産省/HIDA 海外グローバル人材育成インターンプログラム (現 国際即戦力育成インターンシップ)で、バングラデシュへ6カ月滞在。 現地の企業を訪問する中で、雇用システムを変革すればバングラデシュの 経済成長を促進できるという思いで、現地日本名誉総領事と合資にてIT企業設立。 現在日本からIT業務の受託を行っている。今後、携帯電話求人情報ポータルサイトをバングラデシュで設立予定。

ぜひ下記のはてブ、いいね、シェアなどを押してもらえると、毎週1回MVB(再優秀ブロガー)を決定してて、選ばれるとご褒美がもらえるのでご協力お願いします!!
このエントリーをはてなブックマークに追加