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

32,254 views
32,998 views

Published on

http://knock3.hamnaly.com/vol20/20thKnock-follow-yabe-illustrator-de-WebDesign.html

Published in: Technology
0 Comments
28 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
32,254
On SlideShare
0
From Embeds
0
Number of Embeds
22,635
Actions
Shares
0
Downloads
32
Comments
0
Likes
28
Embeds 0
No embeds

No notes for slide

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

  1. 1. イ ス レーターでWebデザ ンしても ラ ト イ 制作現場で嫌われないデータ作成術 2013年12月6日 Knock! Knock! 勉強会 矢部靖人
  2. 2. 1)Webデザインでイ ラレはなぜ嫌われるのか 2)今イラレが注目される理由 3)Webデザイ ンでイ ラレを使うTips
  3. 3. 今日の話は Webデザインの良し悪し」 「 ではなく、 「Webデザイ “データ” ン用 の良し悪し」 です
  4. 4. 1) ラレはなぜ嫌われるのか Webデザインでイ
  5. 5. ・ ラレ て…DTPの人がデザインしたんでし ? イ っ ょ → Webのお作法とかわかっ てないんだか ら… ・ ん りイ あ ま ラレ得意じゃないんだよね → 普通Psでし ? 微妙に使いにく ょ いんだよね… ・ エッジがにじむし、 画像が足 りなかった るし りす → データ が汚いんだよね…
  6. 6. イ ラレがWeb制作現場で嫌われる原因 その多く は先入観… お互いに歩み寄 ませ り んか DTPもWebもない、
  7. 7. CS4まではWeb向きではなかった 今は? り使え うにな ま るよ り した Webでもかな イ ラレだっ てデキ る子なんです !
  8. 8. ただ、 これだけだと “積極的にイ ラレ” とはいかない…
  9. 9. 2) ラレが注目される理由 今イ
  10. 10. Fireworks CS6で事実上の開発停止 なく なったわけないけど、 次を考えないと…
  11. 11. 求められるマルチデバイ ス対応 ・ 多様なデバイ (PC スマホ ゲーム機…) ス ・ ・ ・ 多様なスク リーンサイ (スマホ∼PC) ズ ・ 多様な画面解像度 device pixel ratio) ( 個別最適化は不可能 → 汎用的に構築したい
  12. 12. 汎用的なパーツ制作 ・ ・ ・ CSS3によるグラデーション 角丸 変形 etc... ・ ォン Webフ ト ・ (ベク ター形式によ Web用画像) る SVG ベク ター形式 = 拡大縮小に強い  → 画面サイ ・ ズ 画面解像度に依存しない
  13. 13. ター形式といえば Adobeでベク Illustrator! Illustrator! Illustrator!
  14. 14. このあた りのお話は、 またいずれかの機会に…
  15. 15. 3) ラレを使うTips Webデザインでイ
  16. 16. 問題 :エッジがにじむ 原因 : ピクセルに整合し ていない
  17. 17. 要は、 ピクセルとい“単位” の上手なお付き合い う と
  18. 18. 大原則:単位はピクセル、 数値は整数
  19. 19. 単位はピクセル
  20. 20. 数値は整数
  21. 21. ・ 「ピクセルグリ ドに整合」 ェ ッ にチ ック ・ 「新規オブジェ ト ク をピクセルグリ ドに整合」 ェ ッ にチ ック ・ 情報パネル / 変形パネルでこ まめに確認 ・ ただし例外もあ (数幅が奇数の線など) る ・ と、 あ 安易な拡大縮小はデータ を汚す原因
  22. 22. 基準点は左上がベター Webのお作法) ( チ ック ェ ※「線幅と効果も拡大 縮小」 ェ を入れないのがオススメ ・ はチ ック
  23. 23. 線の位置
  24. 24. イ ラレ上のオブジェ トサイ ク ズはすべて30px × 30px 赤のエリ ア 29px × 29px 赤のエリ ア 28px × 28px 赤のエリ ア 3 px × 30px 0 線を中央に揃え る 線を内側に揃え る 線を外側に揃え る
  25. 25. ・ 線の位置は 「内側に揃え or る」「外側に揃え る」 ・ 「外側」 がいいとい う話も… → http://www.dtp-transit.jp/adobe/illustrator/post_1797.html
  26. 26. 参) スモデル Webのボック (外側の余白) Margin (内側の余白) Padding Width Height ( Border 線)
  27. 27. イ ラレ上でピクセル描画を確認す る
  28. 28. ちなみに 「校正設定」 は 「インターネッ ト標準RGB(sRGB)」
  29. 29. 「新規ドキ メン ダ アログでは Web」 ュ ト」 イ 「 を選択 ドキ メント製作時の設定で、 ュ 大半はク アでき リ ます
  30. 30. プロフ イ ァ ルはWebを選択 複数ページを ファ ルに入れるな 1 イ ら ページごとにアート ボードを分けま ょ しう ※ 設定を変更す と カスタ にな ます る ム り サイ ズは任意 らいが一般的?) (w1200く プレビューモードは 「ピクセル」 に変更
  31. 31. ・ Web特有のデザイン 情報
  32. 32. ・ そんなフ ト、 ォン 普通入っ てませんか ! ら (デバイ ステキストのフ ォント指定 / アウト ライン化) ・ 画像にし て欲しいテキスト / 画像にしないテキ スト ・ マウスオーバー時の変化 (ボタ / リ ン ンクテキ スト) ・ (アニメーション)/ ギミ 動き ックは伝わるよ うに ・ 画像は72dpiで くは150dpi) 350dpiとか重いだけです (もし 。 ・ ブラウザによ る差異もあ 完璧な再現は不毛です り、
  33. 33. 結局は人と人
  34. 34. DTPにはDTPの、 WebにはWebのお作法がある つま 「郷に入 ては郷に従え」 う と り、 り とい こ
  35. 35. デザイナー: 今度のWebデザイン、 ラレでいいですか? イ コーダー :うーん (仕方ない っすね) デザイナー: あ りWebに慣れてないん ま で、 何か不都合があ ったら直すので言っ てくださいね コーダー :じゃあ、 っちでいい感じに直し こ ますよ。 う く ま ないとこ ろは、 らチ ック てく 後か ェ し ださい。 両者 :そんな感じでお願いし ます
  36. 36. 参考
  37. 37. ・ 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
  38. 38. 実装に困っ ら た ご連絡く ださい !
  39. 39. 本日はあ がと ございま り う した ご連絡 ご質問など下記までお願いし ・ ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy

×