イラレでWebデザインしても嫌われないデータ作成術
-
Upload
yasuhito-yabe -
Category
Technology
-
view
19.272 -
download
1
description
Transcript of イラレでWebデザインしても嫌われないデータ作成術
イラストレーターでWebデザインしても制作現場で嫌われないデータ作成術
矢部靖人
2013年12月6日Knock! Knock! 勉強会
1) Webデザインでイラレはなぜ嫌われるのか2) 今イラレが注目される理由3) Webデザインでイラレを使うTips
今日の話は「Webデザインの良し悪し」ではなく、「Webデザイン用“データ”の良し悪し」です
1)Webデザインでイラレはなぜ嫌われるのか
・イラレって…DTPの人がデザインしたんでしょ? → Webのお作法とかわかってないんだから…・あんまりイラレ得意じゃないんだよね
→ 普通Psでしょ? 微妙に使いにくいんだよね…・エッジがにじむし、画像が足りなかったりするし
→ データが汚いんだよね…
DTPもWebもない、お互いに歩み寄りませんか
イラレがWeb制作現場で嫌われる原因その多くは先入観…
イラレだってデキる子なんです!
CS4まではWeb向きではなかった
今は?Webでもかなり使えるようになりました
ただ、これだけだと“積極的にイラレ”とはいかない…
2)今イラレが注目される理由
なくなったわけないけど、次を考えないと…
Fireworks CS6で事実上の開発停止
・多様なデバイス(PC・スマホ・ゲーム機…)・多様なスクリーンサイズ(スマホ~PC)
個別最適化は不可能 → 汎用的に構築したい
求められるマルチデバイス対応
・多様な画面解像度(device pixel ratio)
・CSS3によるグラデーション・角丸・変形 etc...・Webフォント・SVG(ベクター形式によるWeb用画像)
ベクター形式 = 拡大縮小に強い → 画面サイズ・画面解像度に依存しない
汎用的なパーツ制作
Adobeでベクター形式といえばIllustrator! Illustrator! Illustrator!
このあたりのお話は、またいずれかの機会に…
3)Webデザインでイラレを使うTips
問題 : エッジがにじむ原因 : ピクセルに整合していない
要は、ピクセルという“単位”との上手なお付き合い
大原則 : 単位はピクセル、数値は整数
単位はピクセル
数値は整数
・「ピクセルグリッドに整合」にチェック・「新規オブジェクトをピクセルグリッドに整合」にチェック・情報パネル / 変形パネルでこまめに確認・ただし例外もある(数幅が奇数の線など)・あと、安易な拡大縮小はデータを汚す原因
基準点は左上がベター(Webのお作法)
※ 「線幅と効果も拡大・縮小」はチェックを入れないのがオススメチェック
線の位置
線を中央に揃える 線を内側に揃える 線を外側に揃える
赤のエリア29px × 29px
赤のエリア28px × 28px
イラレ上のオブジェクトサイズはすべて30px × 30px
赤のエリア30px × 30px
・線の位置は「内側に揃える」or「外側に揃える」・「外側」がいいという話も… → http://www.dtp-transit.jp/adobe/illustrator/post_1797.html
参)Webのボックスモデル
Width
Height
Padding(内側の余白)
Border(線)
Margin(外側の余白)
イラレ上でピクセル描画を確認する
ちなみに「校正設定」は「インターネット標準RGB(sRGB)」
ドキュメント製作時の設定で、大半はクリアできます
「新規ドキュメント」ダイアログでは「Web」を選択
プロファイルはWebを選択※ 設定を変更すると カスタム になります複数ページを1ファイルに入れるなら
ページごとにアートボードを分けましょう
サイズは任意(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 : [email protected] / Twitter : yabecchy