■ 実はpngもsvgもテキストも座標もぜーんぶ揃ってるんですよねぇ(笑)

 おつかれさまです。@gorolibです。

 唐突ですが長い間疑問に思っていることがあります。それはIllustratorでのデザインカンプ制作についてです。

 単位はピクセル、ピクセルパーフェクトで、オブジェクトサイズは端数が出ないように、線がにじまないように(オープンパスなら2px、クローズドパスなら1pxで内側)等々、DTPとは全く異なる気を使います。

 しかしなぜそこまで緻密に仕上げておいて、コーディングに移る際に素材をスライスせにゃならんのか!

 うちの奥さんはデザインにもシステムにも何も関係ない人ですが、そういう人がIllustratorのデザインカンプ画面を見ると

 「え?これでもう出来上がりじゃないの?」

 という疑問を持つそうです。うん…確かにそう思うでしょうね^^;


■そのままポーンとhtmlが生成されたっていいじゃない

 専門外の人の意見が的を得ていることはよくあります。冷静に考えたら全くそのとおりで、Illustratorのデザインカンプからpngもsvgもテキストも座標も全部取得できるのですから。

 それでちょっとフライング気味に作ったのがこちらです。


 このスクリプトはアートボードを1枚のpngとして出力して、ブラウザで校正できるだけの簡易版ですが、この原理で素材出力して配置すれば本格的なHTML&CSSの自動生成ができるのではないか?という推測です。


■リンクやレスポンシブデザインはどうするの?

 こういうツールで悩ましいのは元々のデザインカンプには不要な要素、例えばリンクやレスポンシブデザインに必要なブレークポイントはどうするのかという問題です。線引きは微妙ですが、このスクリプトありきでWebデザインを始めてしまうと、Illustrator操作時に意識がそこに持って行かれるおそれがあります。

 例えばサブレイヤー名をURLにしておくと<a ref…>タグになるなどの機能を持たせておくと、デザイン中に余計な意識が必要になってしまいます。

 ですので余計な機能は付けないつもりです。その代わり、コーダーさんがちょい足しすればいいだけの本格的な構成にするつもりです。「そのためだけに」Illustratorのデータを付け足さない、揃っている情報だけでベースをつくるというコンセプトを予定しています。

 自動コード化にあたってHTML&CSSをゼロから勉強中です。実は目からウロコなことがたくさんあってお恥ずかしいかぎりです///


 というわけでこの本格版は制作中です。気長にお待ちくださいませm(_ _)m

 お役に立てれば幸いです!ではでは出羽の海。