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デザイン 4番勝負!
有限会社アップルップル
Sketch
VS
Photoshop
理紗子今井
✤ 原則、最新バージョンの機能です
(2015.09.11現在)

✤ 主観も多分に含みます

取り入れられそうなものだけ取り入れちゃってください
今井 理紗子
有限会社アップルップル デザイナー 2014.04∼
CMSを導入した更新
できるWebサイトの
制作がメイン
デザインツールを乗り換えるまで
本セッションの流れ
デザインパーツの作成
画像の書き出し
プロトタイピング
拡張機能
まとめ
1
2
3
4
0
5
VS
VS
VS
VS
デザインツールを乗り換えるまで0
Fireworksの開発中止をきっかけに、Sketchの勉強会を受講
→社内プレゼン後、弊社のデザインツールに
Fw
Photoshop CC 2015 リリース!
Webデザイン向け機能の充実に「これでもいいんじゃない?」ムードが漂う
? ?
VSなんて銘打ってしまいましたが、
どちらもとても良いツールです
それを踏まえて、
よりWebデザイン向きなのは
どちらか考えていきます
あなたにピッタリの
ツールを見つける
お手伝いができれば幸いです
✤ Fireworksの後継として話題に
✤ MacOS専用です
✤ 扱える単位はピクセルのみ
✤ 比較的軽い
✤ とはいえ、まだまだ発展途上
✤ 日本語の扱いが弱い
✤ UIがオールEnglish
✤ Windowsに互換性なし
イマイチなところ
グループ・オブジェクト
サイズやカラー、
シャドウなどの効果を設定
アートボード
値段の比較をしてみました
¥ 11,800
App Store (2015.09.09現在)
※メジャーバージョンアップ時には注意
¥ 980∼ /月
Adobe フォトグラフィプラン
1VS デザインパーツの作成
✤ボタンとバナー
✤パーツを使い回すには
✤パス、SVGの扱い
ボタンとバナー
•効果の重ねがけはできる
•文言の修正に強い
•ビットマップは要注意
Dynamic Buttonで文言修正に対応
&複数の塗り(Fill)や効果を追加
ボタンとバナー
•レイヤー効果は便利
•シャドウの自由度
•和文フォントの美しさ
CC 2015 から一部レイヤースタイルが
重ねがけ可能に!
パーツを使い回すには
•Shared Style
•Symbol
Styleで色やサイズを管理
Symbolでパーツを管理
パーツを使い回すには
•文字スタイル
•段落スタイル
•スマートオブジェクト
スマートオブジェクトでパーツを管理
パス、SVGの扱い
•Illustratorからコピペ
•SVG書き出しにも対応
パス、SVGの扱い
•Illustratorとの連携
•CC 2014以降は

SVG書き出し対応
ボタンとバナー
パーツの使い回し
パス、SVGの扱い
Winner Photoshop
VS 1. デザインパーツの作成
2VS 画像の書き出し
オブジェクトごとに
書き出し
&複数の画像を一気に!
Exportで複数の画像を一括書き出し
スライス不要?
「アセットを抽出」
指定のレイヤー名をつければ自動書き出し
OVEN http://oven.chrometaphore.com/
レイヤーの名前つけを
よりスムーズに
たくさんのパーツを一括で
書き出すならPhotoshopが便利
画像の書き出し
Winner Photoshop
VS 2. 画像の書き出し
3VS プロトタイピング
InVision http://www.invisionapp.com/
リアルタイムでスマホサイトの
デザインが確認できます
or
Sketch Mirror ※現在iOS版のみ ※有償
Adobe Preview CC ※現在iOS版のみ
Sketch、Photoshopで
同じサービスを使える
プロトタイピング
DRAW
VS 3. プロトタイピング
4VS 拡張機能
プラグイン
ありきです!
✤ Content Generator
✤ Sketch Dynamic Button
✤ Align Text Baseline
✤ Sketch Measure ……などなど
Sketch Toolbox でまとめて管理
http://sketchtoolbox.com/ ※beta
本体機能が
充実しても
まだまだ現役!
✤ Guide Guide
✤ OVEN
✤ INK ……などなど
プラグインで
Webデザイン用に強化
必要なものを追加したいならSketch
拡張機能
Winner Sketch
VS 4. 拡張機能
まとめ5
まとめ
まとめ
デザインパーツ
画像の書き出し
拡張機能
プロトタイピング
Winner Photoshop …ですが
• 動作が軽いよ!
• 学習コスト
• スマホUI得意!
Sketchのいいところ
Prott https://prottapp.com/ja/
Sketch Photoshop
どちらでも
Webデザインはできます
CSS再現性重視&Webフォントなら…
私はこのタイプの
制作がメインです
画像見出しやバナーを盛り込むなら…
シチュエーションに合わせて
Webデザインをハッピーに!
ツールでの作業時間を減らせば
よりクリエイティブなところに
時間が使えるようになるはず!
http://4kakudez.com
ブログで情報発信中!
こんなイベントなら聞きに
行ってやってもいいぞ!など
ご意見お待ちしております!
ご清聴ありがとうございました
i_mairy
http://4kakudez.com
Risako Imai
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Upcoming SlideShare
Loading in …5
×

Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn

2,219 views

Published on

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

Published in: Design
  • Be the first to comment

Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn

  1. 1. Webデザイン 4番勝負! 有限会社アップルップル Sketch VS Photoshop 理紗子今井
  2. 2. ✤ 原則、最新バージョンの機能です (2015.09.11現在)
 ✤ 主観も多分に含みます
 取り入れられそうなものだけ取り入れちゃってください
  3. 3. 今井 理紗子 有限会社アップルップル デザイナー 2014.04∼
  4. 4. CMSを導入した更新 できるWebサイトの 制作がメイン
  5. 5. デザインツールを乗り換えるまで 本セッションの流れ デザインパーツの作成 画像の書き出し プロトタイピング 拡張機能 まとめ 1 2 3 4 0 5 VS VS VS VS
  6. 6. デザインツールを乗り換えるまで0
  7. 7. Fireworksの開発中止をきっかけに、Sketchの勉強会を受講 →社内プレゼン後、弊社のデザインツールに Fw
  8. 8. Photoshop CC 2015 リリース! Webデザイン向け機能の充実に「これでもいいんじゃない?」ムードが漂う ? ?
  9. 9. VSなんて銘打ってしまいましたが、 どちらもとても良いツールです それを踏まえて、 よりWebデザイン向きなのは どちらか考えていきます
  10. 10. あなたにピッタリの ツールを見つける お手伝いができれば幸いです
  11. 11. ✤ Fireworksの後継として話題に ✤ MacOS専用です ✤ 扱える単位はピクセルのみ ✤ 比較的軽い ✤ とはいえ、まだまだ発展途上
  12. 12. ✤ 日本語の扱いが弱い ✤ UIがオールEnglish ✤ Windowsに互換性なし イマイチなところ
  13. 13. グループ・オブジェクト
  14. 14. サイズやカラー、 シャドウなどの効果を設定
  15. 15. アートボード
  16. 16. 値段の比較をしてみました ¥ 11,800 App Store (2015.09.09現在) ※メジャーバージョンアップ時には注意 ¥ 980∼ /月 Adobe フォトグラフィプラン
  17. 17. 1VS デザインパーツの作成
  18. 18. ✤ボタンとバナー ✤パーツを使い回すには ✤パス、SVGの扱い
  19. 19. ボタンとバナー •効果の重ねがけはできる •文言の修正に強い •ビットマップは要注意
  20. 20. Dynamic Buttonで文言修正に対応 &複数の塗り(Fill)や効果を追加
  21. 21. ボタンとバナー •レイヤー効果は便利 •シャドウの自由度 •和文フォントの美しさ
  22. 22. CC 2015 から一部レイヤースタイルが 重ねがけ可能に!
  23. 23. パーツを使い回すには •Shared Style •Symbol
  24. 24. Styleで色やサイズを管理
  25. 25. Symbolでパーツを管理
  26. 26. パーツを使い回すには •文字スタイル •段落スタイル •スマートオブジェクト
  27. 27. スマートオブジェクトでパーツを管理
  28. 28. パス、SVGの扱い •Illustratorからコピペ •SVG書き出しにも対応
  29. 29. パス、SVGの扱い •Illustratorとの連携 •CC 2014以降は
 SVG書き出し対応
  30. 30. ボタンとバナー パーツの使い回し パス、SVGの扱い
  31. 31. Winner Photoshop VS 1. デザインパーツの作成
  32. 32. 2VS 画像の書き出し
  33. 33. オブジェクトごとに 書き出し &複数の画像を一気に!
  34. 34. Exportで複数の画像を一括書き出し
  35. 35. スライス不要? 「アセットを抽出」
  36. 36. 指定のレイヤー名をつければ自動書き出し
  37. 37. OVEN http://oven.chrometaphore.com/ レイヤーの名前つけを よりスムーズに
  38. 38. たくさんのパーツを一括で 書き出すならPhotoshopが便利 画像の書き出し
  39. 39. Winner Photoshop VS 2. 画像の書き出し
  40. 40. 3VS プロトタイピング
  41. 41. InVision http://www.invisionapp.com/
  42. 42. リアルタイムでスマホサイトの デザインが確認できます
  43. 43. or
  44. 44. Sketch Mirror ※現在iOS版のみ ※有償
  45. 45. Adobe Preview CC ※現在iOS版のみ
  46. 46. Sketch、Photoshopで 同じサービスを使える プロトタイピング
  47. 47. DRAW VS 3. プロトタイピング
  48. 48. 4VS 拡張機能
  49. 49. プラグイン ありきです!
  50. 50. ✤ Content Generator ✤ Sketch Dynamic Button ✤ Align Text Baseline ✤ Sketch Measure ……などなど
  51. 51. Sketch Toolbox でまとめて管理 http://sketchtoolbox.com/ ※beta
  52. 52. 本体機能が 充実しても まだまだ現役!
  53. 53. ✤ Guide Guide ✤ OVEN ✤ INK ……などなど プラグインで Webデザイン用に強化
  54. 54. 必要なものを追加したいならSketch 拡張機能
  55. 55. Winner Sketch VS 4. 拡張機能
  56. 56. まとめ5 まとめ
  57. 57. まとめ デザインパーツ 画像の書き出し 拡張機能 プロトタイピング
  58. 58. Winner Photoshop …ですが
  59. 59. • 動作が軽いよ! • 学習コスト • スマホUI得意! Sketchのいいところ
  60. 60. Prott https://prottapp.com/ja/
  61. 61. Sketch Photoshop どちらでも Webデザインはできます
  62. 62. CSS再現性重視&Webフォントなら… 私はこのタイプの 制作がメインです
  63. 63. 画像見出しやバナーを盛り込むなら…
  64. 64. シチュエーションに合わせて Webデザインをハッピーに!
  65. 65. ツールでの作業時間を減らせば よりクリエイティブなところに 時間が使えるようになるはず!
  66. 66. http://4kakudez.com ブログで情報発信中!
  67. 67. こんなイベントなら聞きに 行ってやってもいいぞ!など ご意見お待ちしております!
  68. 68. ご清聴ありがとうございました i_mairy http://4kakudez.com Risako Imai

×