イラストレーターでWebデザインしても制作現場で嫌われないデータ作成術

矢部靖人

2013年12月6日Knock! Knock! 勉強会

１） Webデザインでイラレはなぜ嫌われるのか２） 今イラレが注目される理由３） Webデザインでイラレを使うTips

今日の話は「Webデザインの良し悪し」ではなく、「Webデザイン用“データ”の良し悪し」です

１）Webデザインでイラレはなぜ嫌われるのか

・イラレって…DTPの人がデザインしたんでしょ？ → Webのお作法とかわかってないんだから…・あんまりイラレ得意じゃないんだよね

→ 普通Psでしょ？ 微妙に使いにくいんだよね…・エッジがにじむし、画像が足りなかったりするし

→ データが汚いんだよね…

DTPもWebもない、お互いに歩み寄りませんか

イラレがWeb制作現場で嫌われる原因その多くは先入観…

イラレだってデキる子なんです！

CS4まではWeb向きではなかった

今は？Webでもかなり使えるようになりました

ただ、これだけだと“積極的にイラレ”とはいかない…

２）今イラレが注目される理由

なくなったわけないけど、次を考えないと…

Fireworks CS6で事実上の開発停止

・多様なデバイス（PC・スマホ・ゲーム機…）・多様なスクリーンサイズ（スマホ～PC）

個別最適化は不可能 → 汎用的に構築したい

求められるマルチデバイス対応

・多様な画面解像度（device pixel ratio）

・CSS3によるグラデーション・角丸・変形 etc...・Webフォント・SVG（ベクター形式によるWeb用画像）

ベクター形式 = 拡大縮小に強い　→ 画面サイズ・画面解像度に依存しない

汎用的なパーツ制作

Adobeでベクター形式といえばIllustrator! Illustrator! Illustrator!

このあたりのお話は、またいずれかの機会に…

３）Webデザインでイラレを使うTips

問題 ： エッジがにじむ原因 ： ピクセルに整合していない

要は、ピクセルという“単位”との上手なお付き合い

大原則 ： 単位はピクセル、数値は整数

単位はピクセル

数値は整数

・「ピクセルグリッドに整合」にチェック・「新規オブジェクトをピクセルグリッドに整合」にチェック・情報パネル / 変形パネルでこまめに確認・ただし例外もある（数幅が奇数の線など）・あと、安易な拡大縮小はデータを汚す原因

基準点は左上がベター（Webのお作法）

※ 「線幅と効果も拡大・縮小」はチェックを入れないのがオススメチェック

線の位置

線を中央に揃える 線を内側に揃える 線を外側に揃える

赤のエリア29px × 29px

赤のエリア28px × 28px

イラレ上のオブジェクトサイズはすべて30px × 30px

赤のエリア３０px × 30px

・線の位置は「内側に揃える」or「外側に揃える」・「外側」がいいという話も… → http://www.dtp-transit.jp/adobe/illustrator/post_1797.html

参）Webのボックスモデル

Width

Height

Padding（内側の余白）

Border（線）

Margin（外側の余白）

イラレ上でピクセル描画を確認する

ちなみに「校正設定」は「インターネット標準RGB(sRGB)」

ドキュメント製作時の設定で、大半はクリアできます

「新規ドキュメント」ダイアログでは「Web」を選択

プロファイルはWebを選択※ 設定を変更すると カスタム になります複数ページを１ファイルに入れるなら

ページごとにアートボードを分けましょう

サイズは任意（w1200くらいが一般的？）

プレビューモードは「ピクセル」に変更

Web特有のデザイン・情報

・そんなフォント、普通入ってませんから！ （デバイステキストのフォント指定 / アウトライン化）

・画像にして欲しいテキスト / 画像にしないテキスト

・マウスオーバー時の変化（ボタン / リンクテキスト）

・動き（アニメーション） / ギミックは伝わるように

・画像は72dpiで（もしくは150dpi）。350dpiとか重いだけです

・ブラウザによる差異もあり、完璧な再現は不毛です

結局は人と人

DTPにはDTPの、WebにはWebのお作法があるつまり、「郷に入りては郷に従え」ということ

デザイナー ： 今度のWebデザイン、イラレでいいですか？コーダー ： うーん（仕方ないっすね）デザイナー ： あまりWebに慣れてないんで、 何か不都合があったら直すので言ってくださいねコーダー ： じゃあ、こっちでいい感じに直しますよ。 うまくないところは、後からチェックしてください。両者 ： そんな感じでお願いします

参考

・ IllustratorでWeb向けの作業を行うときのチェックリスト （DTP Transit） http://www.dtp-transit.jp/adobe/illustrator/post_1160.html

・ IllustratorでWEBデザインを納品する方法（CS5版）（くずはて）

http://www.kuzuhate.com/web-soft/illustrator/553/

・ マルチデバイス時代にありがたい！イラレのあれこれ http://www.slideshare.net/awayukin/gachinko-awayuki-share

実装に困ったらご連絡ください！

本日はありがとうございました

ご連絡・ご質問など下記までお願いしますE-mail : info@hamnaly.comFacebook / Twitter : yabecchy