Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

35,958 views

Published on

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

Published in: Technology
  • Be the first to comment

イラレで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

×