WEB

UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由

UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由

初めまして。アメリカからやってきたUIデザイナーのCorey(コーリー)です。 LIGの転職サービス「Poole」でUIデザインをしています。

PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。
現在、日本のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。
今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。

Sketchへ乗り換えた理由(Why I Use Sketch)

Bohemian Coding   Sketch 3

1. UI Design中心

Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていません。そのため不要な機能に邪魔されず、スムーズに綺麗なデザインを作っていけます。
It’s all you need.

2. 100% Vector

Sketchで作成されるデザインはベクターデータなので、解像度に関わらず必ず綺麗なデザインが作れます。現在の業界では解像度の高い端末がどんどん出ているので、今こそベクターデザインを作れないといけません。
No vector, no life.

3. 難易度が低い

シンプルでわかりやすいソフトなので、数分ですぐデザインを作れます。
新しいソフトを使うと慣れるまで時間がかかるのは当然ですが、Sketchの場合だと本当に1日で十分だと思います。そうして慣れると、Sketchの速さでデザイン時間が節約できます。
It’s so easy!

4. ファイルサイズが小さい

Sketchの「.sketch」専用ファイルは、ベクターだからファイルサイズがすごく小さいです。私の平均ファイルサイズは6mbから12mbぐらい。かなりディスクスペースの節約になります。

5. 速い

起動が速く、操作も速い。Sketchはサクサク動く、マジで速いソフトです。スペックが低いMacbook AirでもSketchはすぐ起動します。
あんまり早いので、ローディング画面がまるで不要です。起動時間だけではなく、複雑なドキュメントの作成間でもサクサク動きます。
Super fast!

6. 100% CSS対応

全てのスタイルはCSSで再現でき、デザインのスタイルをそのままCSSで書き出すこともできます。これは楽よ。
そのため、Sketchで作成したデザインはWebまで統一できます。
Code friendly!

SketchのCSS機能

7. 書き出し

画像の書き出しに関して、Sketchは最強。
これ以上使いやすい書き出し機能は想像できません。書き出したいレイヤーが選択しやすいし、フォルダーにオーガナイズできるし、複数のファイル形式と解像度での書き出しが一度にできます。すごすぎて、一回使ってみたら他のソフトに物足りなさを感じるしかありません。それほどいいです。
It’s that good.

Sketchの書き出し機能

8. 複数アートボード

デザインを作成するとき、統一感と使いやすさを守るため、大まかなデザインを見ながら細かいデザインを作ることは結構大事です。
その点Sketchは、複数のアートボードを自由に設置して作成することができるので便利です。私はWebやアプリデザインを作る度に、一つのドキュメントで複数のアートボードを利用しながらUXの構成を調整しています。自分の作業の仕方にぴったり合っています。
Art boards, everywhere.

9. 値段

最初のリリースに比べるとSketch 3(最新版)の値段は少しずつ上がっていますが、コスパ的にまだいい値段で発売されています。
デザインのソフトは開発に比べたらわりと高いもの。Sketchはそれほど高くはないので、デザイナーや学生は個人で買いやすいと思います。企業のデザイン部定番ソフトにはまだなってはないので、私も個人で買ってそこから操作を学び始めました。
Affordable.

まとめ

誰よりも最新ツールを使うことが好きなのですが、Sketchは一目惚れでした。
UIデザイナーとWebデザイナーにはオススメです!
こんなに便利なソフトは体験しないともったいないから、ぜひ使ってみてください。
You should use this.

>>Sketch体験版<<

>>SketchのMac App Store版はこちら<<

 

【デザイン&コーディングを高速で】

Avocodeを使ってスライスとコーディングの効率をグッとあげよう

PSDデザインカンプのスライス不要!DreamweaverでのHTML/CSSコーディングを爆速化する方法

Adobe Creative Cloud アセットでPSD画像をスライスし、テキストのCSS情報を取得しよう

新米デザイナーは知っておきたい、“美しい”バナーを“効率的”に制作するための10のステップ

【保存版】Photoshopの超絶便利なショートカットまとめ

この記事を書いた人

corey
corey デザイナー
Leeと申します。カルフォルニア出身で来日から、早5年目です。何でも作れるようになりたいので、何でもやってみるタイプです。