2012年7月7日 CSS Nite in OKAYAMA vol.3にて講演

2. Illustrator のカンプと
うまく付き合う方法
西 谷 卓 也

3. 自己紹介
西谷卓也
Takuya Nishitani
略歴 ・印刷営業 （1年）
・DTPオペレーター 年）
（5
・DTPデザイナー 年）
（4
・WEBデザイナー（NOW!）
主な資格 ・JAGAT 認証 DTPエキスパート
・JWDA 認証 初級ウェブ解析士

4. 自己紹介
！
大 好き
岡山 ！
地元 好き
ーノ大
ア
ファジ

5. artboard 1
Illustrator は
ウェブ制作に使っちゃダメなの？

6. デザインカンプを作るツールは？
デザインカンプは
どのツールで
作成していますか？

7. Illustratorカンプの評判
輪郭がぼやけてしまう…
作業効率が悪いからキライ！
Web用のツールじゃない？

8. どうしてIllustratorで作るの？
印刷会社ではIllustrator の
ユーザーがもっとも多い
ワイヤーフレームやカンプ
制作に適した機能がある

9. デザインカンプに適している点
ライブカラーで
お手軽カラーバリエーション

10. Web用の機能がちゃんとあるのに
どうしてダメなのだろう？

11. Illustrator の問題点？
初期設定がDTP
作り手の理解不足

12. artboard 2
Illustrator の環境設定を
Web 制作に最適化しよう ！

13. (1)単位を「ピクセル」に
「環境設定」「単位・表示パフォーマンス」
の
は「ピクセル」に変更

14. (2)グリッドを活用
「環境設定」「ガイド・グリッ の数値を、
の ド」
「グリッド→10px、分割数 10」

15. (3)キー入力は「0.5px」
「環境設定」「キー入力」「0.5px」
の は
※1でないところがポイント

16. 「表示」「ピクセルプレビュー」
→ で…

17. Illustrator がピクセル仕様に！

18. 補足：カラーについて
CMYK
RGB
RGB と CMYK で透明効果の結果が違う！

19. artboard 3
よくあるIllustratorデータの
トラブルと対処法

20. (1)ファイルサイズ
重すぎ…

21. (1)ファイルサイズの確認・調整
解像度は
150dpi 以下に
Photoshop のバッチが便利

22. (2)原寸サイズ
小さっ
原寸サイズで作られていない！

23. (2)原寸サイズ
横幅を基準に
全体をサイズ変更
ロック解除の確認を忘れずに

24. (3)オブジェクトのピクセル合わせ
端数だらけで気持ち悪い…

25. (3)オブジェクトのピクセル合わせ
ピクセルグリッドに整合

26. (4) 線の調整
線がぼやけます…

27. (4) 線の調整
キー入力で 0.5px 移動

28. (5)テキストのレイヤー分け
スライスしないテキストが混在してる…

29. (5)テキストのレイヤー分け
画像にしないテキストは
レイヤーで分ける

30. (6)フォントのラスタライズ
文字の輪郭が滲んでしまう。

31. (6)フォントのラスタライズ
「効果」
→
「ラスタライズ」→
「文字に最適」

32. (7)スライスオプション
スライス名を付けるのが面倒

33. (7)スライスオプション
ショートカットを
カスタマイズ
例えば… Ctrl Shift Alt A

34. artboard 4
最後に

35. バージョンアップの度に
Web 向けの機能が充実！

36. Web 向けの情報もたくさんあります！

37. Illustratorカンプとは
ポイントさえ押さえれば、
Web 制作に対応している！

38. Illustratorは異業種を繋ぐ
データの架け橋！

39. ご静聴ありがとうございました。
西谷卓也
taq.nishitani Capybara_TAQ
お気軽にリクエストしてくださいね！