■簡易版ですがCSSもつくります!本格版も開発予定

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

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

 単位はピクセルにして、ピクセルパーフェクトで、オブジェクトサイズは端数が出ないように、線がにじまないように(オープンパスなら2px、クローズドパスなら1pxで内側)など、そりゃもうとても気を使います。でもそこは疑問じゃない。デザインカンプ校了してコーディングに移るとき、

 なんで素材をスライスせにゃならんのか!

 という疑問がどうしてもアタマから離れない。私はそんなに声を荒げるタイプじゃないですが、声を「少しだけ大きく(笑)」して言いたいんです。せっかく苦労してピクセルパーフェクトで作ったものを、なんでまたスライスしてコーディングなる工程を踏まなくちゃならんのか(しかもコーダーさんに寸法を添えて)

 そんなの当たり前じゃんか?ということなんでしょうけど、本当に当たり前なんでしょうか。だってピクセル寸法もサイズも間隔も、画像もテキストもベクター素材も全部揃ってるんですよ?

 そのままポーンとhtml生成されたっていいじゃない、と思い立ち作成したスクリプトでございます。


■クラウドファンディングで本格版も計画中

 ただし、こんな大仕掛けはすぐにはできませんので、まずは簡易版を公開いたします。アートボードサイズのpngファイルを作成、それをソースファイルとするhtml一式を自動生成します。紙芝居ってやつですね^ ^

 でもデザインカンプの校正には必要十分です。デザインカンプの校正ってpng単体でもpdfでもイマイチで、やっぱり本物そっくりの「動かないhtml」をブラウザで見ていただくのが一番です。今回のスクリプトで生成されるhtmlセットは毎回手作りしてたのです。とても面倒くさかった…。

 将来的には自動スライス、自動配置、自動リンクで、Illustratorからそのまま本格Webページを生成したいのですが、その場合はクラウドファンディングで開発費を集める予定です^ ^


■今回のスクリプト情報

【スクリプト概要】
Illustrator上のアクティブアートボードサイズをpng出力し、それをソースとするhtmlセットを自動生成します

【スクリプトファイル名】
G363_AutoHTML.jsx

【使い方】
(1)htmlセットを作成したいアートボードをアクティブにします
(2)このスクリプトを起動します

【仕様】
(1)アクティブアートボードをアートボードクリップにてpng出力します
(2)Webページ幅はアートボード幅となります
(3)ページは中央固定(margin: 0 auto)です
→ウィンドウ幅が余る場合は中央、ウィンドウ幅を縮めていくと両方の余白が均等に減っていくアレです(説明ムズっ!)
(4)htmlセットのフォルダ名はタイムスタンプです(いつも新規作成します)
26

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


■ダウンロードはこちらから

https://note.mu/gorolib/n/n95c63c33acfc