個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。

これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。

ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。

なぜIllustratorか？

そもそもイラレの方がレイアウトが組みやすい。

これが一番の理由なんですが。。。

いや、これ以外にも、いろいろとあって、
以前は、とにかく画像画像だったパーツ（ナビゲーションとかボタンとか見出しとか）が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。

さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる。

つまり、Webサイトも、主にビットマップのパーツ中心で作られていたものから、ベクターデータ中心へと変わってきている。

となると、ベクターデータと言えばIllustratorということなんです。

ひと昔前に主流だったFlashもベクター中心だったので、PhotoshopよりIllustrator or Fireworksでデザインしてました。

WebデザインにIllustratorがあまり使われていない理由

• ぼける・にじむ　→　設定で解決
• スライスがめんどう？　→「Layer Exporter」で解決
• コーディングが大変　→　技術 or 慣れで解決

「Layer Exporter」は、Photoshopでいう「Slicy」やCCで追加された「画像アセット」の機能。レイヤー名に拡張子を付けると、そのファイルが書き出されるアレ のイラレ用エクステンション。（あとで詳しく説明します。）

個人的に、コーディングは、フォトショでもイラレでも大して変わりません。慣れの問題かと。

WebデザインにIllustratorを使う場合の設定

今のIllustratorはWebデザインも結構考慮されていて、新規ドキュメントで
「プロファイル」→　「Web」
を選択すると
「カラーモード」→　「RGB」／ スクリーン 72ppi
になります。

さらに、
「プレビューモード」→「ピクセル」
にすることでピクセルプレビューになり、さらに、「ピクセルにスナップ」もONになってくれます。

「新規オブジェクトをピクセルグリッドに整合」をON or OFF？

プロファイルを「Web」にするとこれにチェックが入りONになります。
ですが、このチェックを外してOFFにしてしまいます。

何故かというと、ONになっていると、自動的にピクセルに合わせてくれるのですが、パスがピクセルの中心になってしまうので、線を付けた矩形等の場合、X、Y座標が0.5pxずれた位置になってしまいます。
イラレでWebデザインするときは、座標、サイズを整数にしておく事が重要なので、.5とかなっていると目障りです。
ですので、ピクセルグリッドに整合はOFFに。

「線の位置」は内側 or 外側？

線を書く場合は線の位置を「内側に揃える」にしておきます。
なぜ内側かというと、「内側に揃える」にしておくことで、cssの「box-sizing：border-box;」と同じサイズで考えることができます。

いちいち矩形のサイズ ＋ 線の幅 とか考えなくてすみます。

線の位置は、デフォルトでは「中央に揃える」になっていて、毎回変えるのは面倒なので、アピアランスパネルの設定の
「新規アートに基本アピアランスを適用」のチェックを外しておきます。
そうすると、一度、線の位置を「内側に揃える」にしておけば、内側になったままになります。

ちなみに、ピクセルグリッドに整合の挙動はこちらに詳しく書かれていました。
ピクセルベースでのIllustrator CS6のアートボードの挙動

あとは、環境設定で

• 「一般 > キー入力」→　1px
• 「単位」→　すべて「ピクセル」
• 「ガイド・グリッド > グリッド」→　10px
• 「ガイド・グリッド > 分割数」→　10

に設定。

書き出しには「Layer Exporter」もある

イラレでも、レイヤーにファイル名を書いて書き出しすことが出来ます。

「Layer Exporter」はエクステンションですので、下記のページからダウンロードしてください。

Illustrator Layer Exporter

ダウンロードした「LayerExporter.zxp」ファイルを、Extension Manager CCで開けばインストール完了。

「ウインドウ」>「エクステンション」>「Layer Exporter」でLayer Exporterパネルを表示させます。

「Destination Folder」で書き出し先を選択

PNG、SVG、JPGで書き出せるので、Default Export Parametersでデフォルトのファイル形式を選択します。「Slicy」と違って、表示されているレイヤーが全て書き出されるようで、レイヤー名に拡張子がついていない場合は、ここで選択した形式で書き出されます。

ですので、書き出したくないレイヤーは非表示にしておきます

「Export Layers」をクリックすると書き出されます。

ここで注意が必要です。
残念な事に第1階層のレイヤーが書き出されてしまいます。。。
ここがちょっと使いづらいのですが、
例えば、第１階層に「header」というレイヤーがあり、そのレイヤーの中に「logo.png」というレイヤーを作っても「logo.png」は書き出されずに、「header.png」というファイルが書き出されてしまいます。（Default Export Parametersで設定した拡張子をjpgにした場合は「header.jpg」）しかも、headerレイヤー内の表示レイヤー全てが一つの画像になって書き出されます。
「logo.png」だけを書き出すには、「logo.png」レイヤーを第1階層レイヤーにしなくてはなりません。

これに注意すれば、スライスするより楽に書き出しが出来ます。

普通に、「オブジェクト」>「スライス」> 「選択範囲からスライス」でスライスしてもいいんですけどね。
場合によりけりです。

今後のWebデザインについて

イラレでのWebデザインについていろいろと書きましたが、今後のWebデザインについての考えは、現状は、まだまだイラレやフォトショでデザインカンプを作って、それをコーディングするという流れですが、これからは、Designing in the browserというワークフローも積極的に取り入れていきたいと考えています。
デバイスやブラウザなど、閲覧する環境によって見え方が変わる現在のWebでは、デザインカンプはあくまでも見え方の一例でしかありませんし、ユーザーの操作によって変化するインタラクティブの確認も出来ません。

出来るだけ早く、ブラウザで確認出来るアプローチが必要だと考えます。

制作フローとしては

レイアウトがしやすいイラレで、ワイヤー、ラフを作成
↓
イラレのアートボードを使って、必要なグラフィックパーツを作成
↓
CSS Style Guideを作成
↓
Designing in the browser
↓
テスト
↓
公開

といったフローを考えていきたいと思います