WCAN 2015 Autumnのセッション「Sketch VS Photoshop Webデザイン4番勝負」のスライドです。Webデザインに欠かせないいくつかの項目について2つのツールを比べてみました。

1. Webデザイン 4番勝負！
有限会社アップルップル
Sketch
VS
Photoshop
理紗子今井

2. ✤ 原則、最新バージョンの機能です
（2015.09.11現在）
✤ 主観も多分に含みます
取り入れられそうなものだけ取り入れちゃってください

3. 今井 理紗子
有限会社アップルップル デザイナー 2014.04∼

4. CMSを導入した更新
できるWebサイトの
制作がメイン

5. デザインツールを乗り換えるまで
本セッションの流れ
デザインパーツの作成
画像の書き出し
プロトタイピング
拡張機能
まとめ
1
2
3
4
0
5
VS
VS
VS
VS

6. デザインツールを乗り換えるまで0

7. Fireworksの開発中止をきっかけに、Sketchの勉強会を受講
→社内プレゼン後、弊社のデザインツールに
Fw

8. Photoshop CC 2015 リリース！
Webデザイン向け機能の充実に「これでもいいんじゃない？」ムードが漂う
？ ？

9. VSなんて銘打ってしまいましたが、
どちらもとても良いツールです
それを踏まえて、
よりWebデザイン向きなのは
どちらか考えていきます

10. あなたにピッタリの
ツールを見つける
お手伝いができれば幸いです

12. ✤ Fireworksの後継として話題に
✤ MacOS専用です
✤ 扱える単位はピクセルのみ
✤ 比較的軽い
✤ とはいえ、まだまだ発展途上

13. ✤ 日本語の扱いが弱い
✤ UIがオールEnglish
✤ Windowsに互換性なし
イマイチなところ

14. グループ・オブジェクト

15. サイズやカラー、
シャドウなどの効果を設定

16. アートボード

17. 値段の比較をしてみました
¥ 11,800
App Store (2015.09.09現在)
※メジャーバージョンアップ時には注意
¥ 980∼ /月
Adobe フォトグラフィプラン

18. 1VS デザインパーツの作成

19. ✤ボタンとバナー
✤パーツを使い回すには
✤パス、SVGの扱い

20. ボタンとバナー
•効果の重ねがけはできる
•文言の修正に強い
•ビットマップは要注意

21. Dynamic Buttonで文言修正に対応
&複数の塗り(Fill)や効果を追加

22. ボタンとバナー
•レイヤー効果は便利
•シャドウの自由度
•和文フォントの美しさ

23. CC 2015 から一部レイヤースタイルが
重ねがけ可能に！

24. パーツを使い回すには
•Shared Style
•Symbol

25. Styleで色やサイズを管理

26. Symbolでパーツを管理

27. パーツを使い回すには
•文字スタイル
•段落スタイル
•スマートオブジェクト

28. スマートオブジェクトでパーツを管理

29. パス、SVGの扱い
•Illustratorからコピペ
•SVG書き出しにも対応

30. パス、SVGの扱い
•Illustratorとの連携
•CC 2014以降は
SVG書き出し対応

31. ボタンとバナー
パーツの使い回し
パス、SVGの扱い

32. Winner Photoshop
VS 1. デザインパーツの作成

33. 2VS 画像の書き出し

34. オブジェクトごとに
書き出し
＆複数の画像を一気に！

35. Exportで複数の画像を一括書き出し

36. スライス不要？
「アセットを抽出」

37. 指定のレイヤー名をつければ自動書き出し

38. OVEN http://oven.chrometaphore.com/
レイヤーの名前つけを
よりスムーズに

39. たくさんのパーツを一括で
書き出すならPhotoshopが便利
画像の書き出し

40. Winner Photoshop
VS 2. 画像の書き出し

41. 3VS プロトタイピング

42. InVision http://www.invisionapp.com/

43. リアルタイムでスマホサイトの
デザインが確認できます

44. or

45. Sketch Mirror ※現在iOS版のみ ※有償

46. Adobe Preview CC ※現在iOS版のみ

47. Sketch、Photoshopで
同じサービスを使える
プロトタイピング

48. DRAW
VS 3. プロトタイピング

49. 4VS 拡張機能

50. プラグイン
ありきです！

51. ✤ Content Generator
✤ Sketch Dynamic Button
✤ Align Text Baseline
✤ Sketch Measure ……などなど

52. Sketch Toolbox でまとめて管理
http://sketchtoolbox.com/ ※beta

53. 本体機能が
充実しても
まだまだ現役！

54. ✤ Guide Guide
✤ OVEN
✤ INK ……などなど
プラグインで
Webデザイン用に強化

55. 必要なものを追加したいならSketch
拡張機能

56. Winner Sketch
VS 4. 拡張機能

57. まとめ5
まとめ

58. まとめ
デザインパーツ
画像の書き出し
拡張機能
プロトタイピング

59. Winner Photoshop …ですが

60. • 動作が軽いよ！
• 学習コスト
• スマホUI得意！
Sketchのいいところ

61. Prott https://prottapp.com/ja/

62. Sketch Photoshop
どちらでも
Webデザインはできます

63. CSS再現性重視＆Webフォントなら…
私はこのタイプの
制作がメインです

64. 画像見出しやバナーを盛り込むなら…

65. シチュエーションに合わせて
Webデザインをハッピーに！

66. ツールでの作業時間を減らせば
よりクリエイティブなところに
時間が使えるようになるはず！

67. http://4kakudez.com
ブログで情報発信中！

68. こんなイベントなら聞きに
行ってやってもいいぞ！など
ご意見お待ちしております！

69. ご清聴ありがとうございました
i_mairy
http://4kakudez.com
Risako Imai