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

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

2. t
ご注意
2016年9月時点での情報を
もとにお話をいたします

3. t
こんな方に向けて
✤マークアップエンジニアさんとの連携を
見直したいデザイナーさん
✤デザイナーの頭の中身を覗いてみたい
マークアップエンジニアさん、
ディレクターさん

5. 約100名の方に
ご受講いただき
ましたm(_ _)m

8. t
スキル
✤ Sketchは一番使ってます（プラグイン開発は…）
✤ XDは触り始めたばかり
✤ Photoshop 10年選手
✤ イラストはIllusrator中心
✤ ときどきマークアップ

9. Webデザイナーが
バトンを渡すときに
考えていること

10. 魂を込めるための
ノウハウ

11. t
今日お伝えしたいこと
✤ せっかく込めた魂には、伝える努力を添えて
✤ 次世代ツールはイマドキWeb制作向き
✤ クオリティを上げられるところを見逃さない

12. t
今回のアジェンダ
01. イマドキデザイナーが魂を込めるポイント
02. 込めた魂には、伝える努力を添えて
03. SketchとXDが好きな理由
04. 次世代ツールとWeb制作事情
05. 次世代ツールとの付き合い方

13. 01
イマドキデザイナーが
魂を込めるポイント

14. t
魂を込めるポイント
✤ フォント
✤ 配色
✤ 余白感
✤ ビットマップ画像
✤ エフェクト
✤ コンテンツとの相性

15. 02
込めた魂には、
伝える努力を添えて

16. t
「伝える努力」とは
✤ フォント
✤ 配色
✤ 余白感
✤ ビットマップ画像
✤ エフェクト
✤ コンテンツとの相性

17. ようするに、思いやり
＝

18. フォント

21. 配色

22. 余白感

23. 実演

24. ビットマップ画像

26. エフェクト

27. 実演

28. コンテンツとの相性

30. 03
Sketch と XD が
好きな理由

31. t
Sketchが好きな理由
✤とにかく動作が軽い
✤機能とオペレーションが限定的
✤ベクターベースなのでSVGも書き出せる
✤これは趣味ですが…コミュニティが活発

32. t
XDがいいなと思う理由
✤動作が軽い
✤デザインとプロトタイプを同時進行
✤オペレーションが直感的

33. 04
次世代ツールと
Web制作事情

34. 次世代ツールは
イマドキの制作事情を
よく考えられている

37. 「作業の効率化」を
意識するようになった

38. 05
次世代ツールとの
付き合い方

39. 入社半年で
FwからSketchに
乗り換えました

40. t
ツールの影響を感じたとき
✤ デザインがフラットになりがち
✤ ツールができることに引っ張られる
✤ 意識的にグラフィカルな要素を足す

41. 別のチャネルを
持ってみる

44. t
まとめ
✤ せっかく込めた魂には、伝える努力を添えて
✤ 次世代ツールはイマドキWeb制作向き
✤ クオリティを上げられるところを見逃さない

45. ご清聴ありがとうございました
!
"
i_mairy
Risako Imai