ajike switch

【Sketch初心者必見!#02】Sketchとは?

こんにちは!アシスタントディレクターの野村です。
【Sketch初心者必見!】第2弾です!

前回はSketchでワークフローが変わっていくのではないかという予想を、現状の問題点を例に挙げてご紹介いたしました。
(前回の記事へ→【Sketch初心者必見!#01】Sketchで変わる?WEB制作のワークフロー

そして今回から具体的に「Sketchとはなんぞや?」ということをお伝えしていきます!
今回はSketchとPhotoshopを比較してわかりやすくお伝えしようと思います!

sketch_02_02

Sketchとは?

Sketchとは、Bohemian Coding社が開発した「ベクタードローイングツール」です。
UIとUXのデザインを考える人をターゲットに開発され、
2013年のAdobe社のFireworksの新規開発の中止のニュースを受け、注目を集めました。

しかし、それ以前から世界中の多くの制作者に愛用されており、Sketchの公式サイトには多くの有名企業のロゴが…
スクリーンショット 2015-09-14 14.45.54

そんなSketchですが、なぜ多くのWEBデザイナーに愛用されているのでしょうか?
Photoshopと比較してみます。

SketchとPhotoshop

金額

まず、Photoshop単体のプランを契約すると、月々¥980。
年間で考えると¥11,760。

それに比べてSketchは、¥12,357の買い切り…!(※ドルを円で換算しているため、金額は変化いたします)
Photoshopのみのプランの年間かかる金額と比較すると、1年以上使うならSketchの方が安いですね。

スクリーンショット 2015-09-14 10.19.27

【Sketch ◯ vs × Photoshop】

レンダリング

PhotoshopはWEBのレンダリングには向きません。
一方、SketchはWEBのレンダリングに最適です。
ここがUIデザイン制作に特化したSketchの魅力ですね!

【Sketch ◯ vs × Photoshop】

グラフィック

ブラシなどの描画機能や画像の加工などは、やはりAdobeの製品が優れています。
やはりグラフィック系の作業に関してはPhotoshopはとても良いですね。
しかし、単純にUIデザインを行うのなら、Sketchの機能で十分制作することができます!
スクリーンショット 2015-09-15 12.07.44
【Sketch △ vs △ Photoshop】

ショートカット

Sketchはショートカットキーなどはありますが、まだまだ機能数としては少ないです。
それに比べてPhotoshopはとても多いです。
ただ、Sketchは使いやすくするためにかなり機能が厳選され、シンプルになっているので初心者の方にも使いやすいです!
スクリーンショット 2015-09-14 17.36.26
【Sketch △ vs △ Photoshop】

容量

Sketchはベクターですべて作成するので、容量がとても小さいです。
それに比べてPhotoshopのデータは画像で作成するので、容量はとても大きいです。
UIデザインをするということは、多くの画面のデザインを作成します。
よって、Sketchで作成したデータのほうが、容量を気にせず作成することができますし、扱いやすいですね!

【Sketch ◯ vs × Photoshop】

動作

上記とも関係してきますが、Sketchのほうが動作速度は速いです。スイスイ作成することができます!
しかし、Photoshopの動作速度はSketchに比べて劣ります。
頭の中のアイディアをいち早くデザインに起こしたい…!なんて時にすばやく起動してくれて、動作も速いSketchは優秀ですね!

【Sketch ◯ vs × Photoshop】

ライブラリ

Photoshopにはライブラリーがありますが、Sketchにはライブラリーがありません。
しかし、次回詳しくご紹介しますが、Sketchで作成したデータを共有する方法があるのです!
ライブラリが無くても十分データを共有することができますよ!

【Sketch △ vs △ Photoshop】

グリッド

Sketchは作成する際にデフォルトでグリッド線が表示されます。
自分で作成しないといけないPhotoshopより便利です!

【Sketch ◯ vs × Photoshop】

アートボード

Sketchは複数のアートボードを並べて製作を行っていきますが、Photoshopは一つのアートボードで製作を行っていきます。
WEBデザインなど多くの画面のデザインを作成するには、複数のアートボードを見ながら製作できるSketchのほうが適しています!
スクリーンショット 2015-09-30 11.23.29
【Sketch ◯ vs × Photoshop】

結果

Sketch 6
Photoshop 0
引き分け 3

UIデザインにおいて、Sketchの圧倒的勝利!

まとめ

いかがでしたか?
まだまだ小さなバグがあったり、Photoshopより劣るところはありますが、SketchはPhotoshopよりWEBデザインに向いており、この先改善や進歩が期待できるツールであることは間違いないです!
次回はさらに詳しく「UIデザインならSketchを使うべき理由」をご紹介します!
お楽しみに!

【関連記事】
【Sketch初心者必見!#01】Sketchで変わる?WEB制作のワークフロー
【Sketch初心者必見!#03】UIデザインならSketch!の理由
【Sketch初心者必見!#04】テンプレート活用で素早くUIデザイン
【Sketch初心者必見!#05】シンボル化でスピーディーに作成
【Sketch初心者必見!#06】Sketchでスマートな会議に
【Sketch初心者必見!#07】Sketchは書き出しを簡単に
【Sketch初心者必見!#08】Sketchで簡単指示書作成

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×