Sketchでデザインをして気付いたPhotoshopより優れているポイント

こんにちは。
Sketch3にPhotoshopから乗り換えて1年が経つデザイナーです。
すでに使っている人が多数かと思いますが、慣れ親しんだPhotoshopを止められない！という方もいるのではないでしょうか。

今回は、「Sketchって気になってるけど実際どうなの？」「Photoshopとどっちがいいの？」という方へ向けて、Sketchが優れている理由をいくつかあげてみました。

是非参考にしてください！

Sketchとは

SketchはMac用のベクターグラフィックソフトです。
ベクターソフトでありながらピクセル基準で作成することが前提のつくりになっており、Web制作やUIデザインに特化しています。

日本でのweb制作といえば、Photoshopが有名かと思います。
筆者も以前はPhotoshopをメインに使っていましたが、今ではSketchに魅了されメインソフトにしました。

アプリケーションの操作が心地いい！

操作が軽い

起動時も筆者の場合5秒待つことはないくらい早いです。乗り換えたときは本当に驚きました。
デザインがどんなに複雑になってきても、操作スピードは劣りません。
また、オートセーブ付きで、⌘Sをせずとも保存ができています。

データも軽い

Sketchはファイルサイズも小さいです。
このサイトのindexのデザインはpsdで作成しましたが、1ページで10MBです。
比較して１つアートボードをつくったSketchファイルは2.5MBくらい。
1つのワークスペースに20ページデザインを作って50MB程です。

ツールバーを自分好みにすることができる

Sketchのソフトの上部にあるツールバーはカスタムすることができます。

デフォルトの状態はアイコンと文字が表示してあり、初心者に優しいデザイン。
文字のみやアイコンのみにすることもできて、上級者にも満足度が高いカスタマイズができます。

UIデザインにおいて便利な機能

アートボード機能が優秀

Sketchは１つのワークスペースに複数アートボードが作れ、デバイス環境を選択することができます。
アップデートが頻繁にくるので、iPad Proも対応してあります！（ナイス）

１ページを作りこむと、どうしても全体チェックをせずに進めてしまうことがあります。
ですが、Sketchだと⌘+1を押すだけでワークスペースのデザインの全体が見渡すことができます。
アートボードはほぼ無限に作れるので、ワークスペースがサイトマップのようになって、導線も可視化できます。

ページ機能

Sketchは１つファイル内にページという概念があります。
ページごとでアートボードを分けられる機能です。

筆者はページ機能を使って、非ログイン時とログイン時のデザインを分けたりします。

画像出力機能が優秀

webデザインで少し面倒な作業の画像の書き出し。
Sketchなら一気に複数の解像度、各ファイル形式に出力することができます。
名前も自動に@2xとつけてくれて、これほどの親切をありがとうございますという感じです。

Photoshopのアセット機能も感動しましたが、Sketchにはスライス用にレイヤーができ、
サイズ指定などができるところがポイント。

「少し余白入れたい・・」みたいな場合もスライス範囲を指定できるので、融通が利きます。

実機確認がスムーズ

SketchMirrorという有料アプリをいれる必要があります。
PCと実機が同じwi-fiに接続しているだけで、作業しているデザインをリアルタイムで確認することができます。神アプリ、神機能。

→SketchMirrorをダウンロード

デザイン制作で便利なところ

シンボル機能

Sketchにはシンボルという機能があります。Photoshopでいうスマートオブジェクトのようなものです。

複数アートボードでのデザインをしていると、ヘッダーやサイドバーなど、デザインが同じ箇所が出てきます。
その部分のグループをシンボル化すると、一気にデザインの変更が適用されます。

テキストスタイルの設定

シンボルはグループに対して適用しますが、テキストベースでもスタイルを設定することができます。
「h1は何pxでline-heightは何で作ってたんだっけ？」と調べる手間が減って便利です。「やっぱり2pxあげよう」と思ったときに一発で変更が適用されるのも効率的。

オブジェクトスタイルの設定

Sketchはオブジェクトで要素を作っていき、そのオブジェクトには角丸や色などのスタイルを当てることができます。
「ボタンのスタイルは同じだけど、文言は別にしたい」場合に便利な機能です。

シンボル機能と似ていますが、シンボルはグループの中身をすべて共通化してしまうので、
ボタンや見出しの装飾にはオブジェクトスタイルを使います。

さいごに

などなど、SketchにはデフォルトでこんなにWeb制作に向いた機能を備えています。
細かい便利な機能はまだまだ沢山あるので、また記事を書こうと思います！

Sketchは体験版もあるので、ぜひ一度使ってみてください。戻れなくなりますよ！

Download Trialからダウンロードできます。

▷ 体験版リンク