Design Pledge, Vol.3

マルチデバイス対応時代に見直したい
WebでのIllustrator活用

PCだけでなく、スマートフォン／タブレットでの閲覧を視野に入れると、「PhotoshopやFireworksでカンプを作成。スライスして切り出してコーディング」という定番フローでは立ちゆきません。

Androidの断片化問題や高密度化への対応には「脱ビットマップ」がキーワード。CSS3、Web Fontsはもちろん、SVG、アイコンフォントを活用するために、Web制作の現場でIllustratorの活用の重要度が増しています。

IllustratorをWeb制作で活用する上での使いこなしポイントやハマリポイントをあますところなくお伝えします。

・ピクセルベースの作業を行う上ときのチェックリスト
　（エッジがぼやけるのは、なぜ？）
　（「ピクセルグリッドに整合」は使うべき？）
・Web向けの画像書き出しの使い分け
　（「Web用に保存」、「書き出し」、「別名で保存」、スクリプトはどう使い分ける？）
・Layer Exporterを使った画像書き出し（PNG/SVG/JPEG）
　（Photoshopの画像アセットみたいなのないの？）
　（スライスが面倒すぎる）
・Web制作で活用したい機能
　（テキストに応じて変形するボタン、ライブカラー、9スライス）
・Specctrを活用しよう
　（カンプの指示、もっとラクできない？）
・アイコンフォント活用のテクニック
　（Alfred+Powerpack、［字形］パネル）
・CSS書き出し機能、実際使える？
・グリッドレイアウトとワイヤーフレームを超速に行うテクニック
　（＋wireMagic）