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デザイン術マークアップのための
t
ご注意
2016年9月時点での情報を
もとにお話をいたします
t
こんな方に向けて
✤マークアップエンジニアさんとの連携を

見直したいデザイナーさん
✤デザイナーの頭の中身を覗いてみたい

マークアップエンジニアさん、

ディレクターさん
約100名の方に
ご受講いただき
ましたm(_ _)m
t
スキル
✤ Sketchは一番使ってます(プラグイン開発は…)
✤ XDは触り始めたばかり
✤ Photoshop 10年選手
✤ イラストはIllusrator中心
✤ ときどきマークアップ
Webデザイナーが
バトンを渡すときに
考えていること
魂を込めるための
ノウハウ
t
今日お伝えしたいこと
✤ せっかく込めた魂には、伝える努力を添えて
✤ 次世代ツールはイマドキWeb制作向き
✤ クオリティを上げられるところを見逃さない
t
今回のアジェンダ
01. イマドキデザイナーが魂を込めるポイント
02. 込めた魂には、伝える努力を添えて
03. SketchとXDが好きな理由
04. 次世代ツールとWeb制作事情

05. 次世代ツールとの付き合い方
01
イマドキデザイナーが
魂を込めるポイント
t
魂を込めるポイント
✤ フォント
✤ 配色
✤ 余白感
✤ ビットマップ画像
✤ エフェクト
✤ コンテンツとの相性
02
込めた魂には、
伝える努力を添えて
t
「伝える努力」とは
✤ フォント
✤ 配色
✤ 余白感
✤ ビットマップ画像
✤ エフェクト
✤ コンテンツとの相性
ようするに、思いやり
=
フォント
配色
余白感
実演
ビットマップ画像
エフェクト
実演
コンテンツとの相性
03
Sketch と XD が
好きな理由
t
Sketchが好きな理由
✤とにかく動作が軽い
✤機能とオペレーションが限定的
✤ベクターベースなのでSVGも書き出せる
✤これは趣味ですが…コミュニティが活発
t
XDがいいなと思う理由
✤動作が軽い
✤デザインとプロトタイプを同時進行
✤オペレーションが直感的
04
次世代ツールと
Web制作事情
次世代ツールは
イマドキの制作事情を
よく考えられている
「作業の効率化」を
意識するようになった
05
次世代ツールとの
付き合い方
入社半年で
FwからSketchに
乗り換えました
t
ツールの影響を感じたとき
✤ デザインがフラットになりがち
✤ ツールができることに引っ張られる
✤ 意識的にグラフィカルな要素を足す
別のチャネルを
持ってみる
t
まとめ
✤ せっかく込めた魂には、伝える努力を添えて
✤ 次世代ツールはイマドキWeb制作向き
✤ クオリティを上げられるところを見逃さない
ご清聴ありがとうございました
!
"
i_mairy
Risako Imai
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
次世代ツールを使った『マークアップのための』Webデザイン術
Upcoming SlideShare
Loading in …5
×

次世代ツールを使った『マークアップのための』Webデザイン術

909 views

Published on

2016年9月23日(金)開催「DevLOVE Vol.198 webサイトをマークアップするということ」でのセッションです。

Sketch 3 と Adobe XD を軸に、デザイナーとマークアップエンジニアの連携と「Webサイトに魂を込める」ことについて30分間お話をさせていただきました。

■■■ セッション中でご紹介したSketch プラグイン
https://github.com/utom/sketch-measure
https://github.com/getflourish/Sketch-Style-Inventory

Published in: Design
  • Be the first to comment

次世代ツールを使った『マークアップのための』Webデザイン術

  1. 1. 次世代デザインツールを使った Webデザイン術マークアップのための
  2. 2. t ご注意 2016年9月時点での情報を もとにお話をいたします
  3. 3. t こんな方に向けて ✤マークアップエンジニアさんとの連携を
 見直したいデザイナーさん ✤デザイナーの頭の中身を覗いてみたい
 マークアップエンジニアさん、
 ディレクターさん
  4. 4. 約100名の方に ご受講いただき ましたm(_ _)m
  5. 5. t スキル ✤ Sketchは一番使ってます(プラグイン開発は…) ✤ XDは触り始めたばかり ✤ Photoshop 10年選手 ✤ イラストはIllusrator中心 ✤ ときどきマークアップ
  6. 6. Webデザイナーが バトンを渡すときに 考えていること
  7. 7. 魂を込めるための ノウハウ
  8. 8. t 今日お伝えしたいこと ✤ せっかく込めた魂には、伝える努力を添えて ✤ 次世代ツールはイマドキWeb制作向き ✤ クオリティを上げられるところを見逃さない
  9. 9. t 今回のアジェンダ 01. イマドキデザイナーが魂を込めるポイント 02. 込めた魂には、伝える努力を添えて 03. SketchとXDが好きな理由 04. 次世代ツールとWeb制作事情
 05. 次世代ツールとの付き合い方
  10. 10. 01 イマドキデザイナーが 魂を込めるポイント
  11. 11. t 魂を込めるポイント ✤ フォント ✤ 配色 ✤ 余白感 ✤ ビットマップ画像 ✤ エフェクト ✤ コンテンツとの相性
  12. 12. 02 込めた魂には、 伝える努力を添えて
  13. 13. t 「伝える努力」とは ✤ フォント ✤ 配色 ✤ 余白感 ✤ ビットマップ画像 ✤ エフェクト ✤ コンテンツとの相性
  14. 14. ようするに、思いやり =
  15. 15. フォント
  16. 16. 配色
  17. 17. 余白感
  18. 18. 実演
  19. 19. ビットマップ画像
  20. 20. エフェクト
  21. 21. 実演
  22. 22. コンテンツとの相性
  23. 23. 03 Sketch と XD が 好きな理由
  24. 24. t Sketchが好きな理由 ✤とにかく動作が軽い ✤機能とオペレーションが限定的 ✤ベクターベースなのでSVGも書き出せる ✤これは趣味ですが…コミュニティが活発
  25. 25. t XDがいいなと思う理由 ✤動作が軽い ✤デザインとプロトタイプを同時進行 ✤オペレーションが直感的
  26. 26. 04 次世代ツールと Web制作事情
  27. 27. 次世代ツールは イマドキの制作事情を よく考えられている
  28. 28. 「作業の効率化」を 意識するようになった
  29. 29. 05 次世代ツールとの 付き合い方
  30. 30. 入社半年で FwからSketchに 乗り換えました
  31. 31. t ツールの影響を感じたとき ✤ デザインがフラットになりがち ✤ ツールができることに引っ張られる ✤ 意識的にグラフィカルな要素を足す
  32. 32. 別のチャネルを 持ってみる
  33. 33. t まとめ ✤ せっかく込めた魂には、伝える努力を添えて ✤ 次世代ツールはイマドキWeb制作向き ✤ クオリティを上げられるところを見逃さない
  34. 34. ご清聴ありがとうございました ! " i_mairy Risako Imai

×