コンテンツへスキップ →

Sketch 3レビュー!PhotoShopからのりかえた5つの魅力!参考リンクのまとめもあり

Web制作を始めてからずっとFireworksを愛用してきたが、開発がストップするということで、少しづつPhotoShopに移行しはじめていた。

PhotoShopは多機能だし、使いこなせればなんでも作れるくらい凄いアプリだと思う。多くの人に使われているし。けど、多機能であるがゆえにFireworksに慣れた僕にとっては、いまだに上手くなじめていない感がずっとあった。

Sketch 3ははじめからしっくりきた

Sketchは日本ではまだマイナーだけど、海外ではFireworksが終了してから、Sketchを使うユーザーが爆発的に増えたらしい。使ってみるとそれも納得できる。操作に違和感がなくて、やりたいことが直感的にできる感じ。触ってみるとkeynoteの使いやすさにも通じるものがある。

また、後発のアプリということもあってか思考が新しい。最近のWeb制作・アプリ開発にマッチしているから違和感がない。例えば、一つのオブジェクトから複数の解像度に書き出せる。retina対応もグッと楽になる。

1. 動作が軽快

まずアプリを使う上での前提は動作が快適なことが挙げられる。よく使うアプリだからこそ軽さは重要。Sketchはもっさり感がまったくない。保存する時も一瞬で終わる。しかも自動保存されるので、うっかりミスがあっても安心という素晴らしさ。履歴から過去のバージョンに戻すこともできる。

2. わかりやすいUIだから学習コストが低い

Webとモバイルに特化。不必要な機能を排除している。だから、すぐに理解して使い始められるし、学習コストが低い。実際に、触って1日でおおよその使い方を覚えることができた。
sketch1最初にオブジェクトを作る。ペンで書くか、四角、円、テキスト…などを選んで配置していく。Webやアプリで使われるようなデザインを作りやすくなっている。角丸やグラデ、シャドウなどなどエフェクトも自由自在に設定できるのだが、設定パネルの項目が多くないのが迷わない。

3. 全てがベクター

ベクターなので一つのオブジェクトから複数の解像度で一発書き出しができる。I Love Vector。これからはRetina対応にも苦しめられない。Fireworksのように直感的にスライスもつくれる。

4. CSS対応

全てのパーツはCSSで書きだすことができる。閲覧環境においては解像度や端末が違うのがあたりまえになった今、ボタンを画像で書きだすことも少なくなった。CSSで表現すれば各デバイスで柔軟に対応できる。ビジュアル的に作ったものを、そのままCSS化して取り出せてしまう。

5. ページ機能

Fireworksのようにページという概念がある。そしてアートボードも複数作れる。ページごとにファイルを分けなくてすむ。

Sketchで覚えておくと捗るTips

ズーム関連

zで+マーク、akt + zで−マークがでる。そのまま、マウスクリックで拡大縮小できる。

Cmd + 1でオブジェクト全体が収まるようにズームイン。
cmd1

Cmd + 2で選択したオブジェクトだけが収まるようにズームイン。
cmd2

Cmd + 3はキャンバスの中心に移動。

表示順番

Alt + Cmd + ↑で上に移動(Control + Alt + Cmd + ↑で一番上に移動)
Alt + Cmd + ↓で下に移動(Control + Alt + Cmd + ↓で一番下に移動)

そのほか

スライスのview?についての表示・非表示切替は左下のアイコン。
slice

基本スマートガイドがONになっているので、オブジェクトをマウスで移動させようとすると、いろんなところで整列するように吸着する。スマートガイドを適用させずに移動させたい時はCmdを押しながら移動させるといい。

Sketchで作られたリソースが集まっているSketch App Sourcesから、いろんなSketchファイルが落とせるので、これを見ながら作り方を学ぶのもいい。
sketchapp
iPhoneのパーツなんかもあって、モックアップに使えそう。
ios

Sketch関連リンク

Sketch公式サイト
公式ドキュメント
UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由
Sketchを買ったら読んでおきたい!基本的なことからちょっとした小技、ショートカットまとめ
Sketch 3を使いこなすためリンクやメモ
勉強会をきっかけに、話題の「Sketch 3」を1週間使ってみた話
Sketch 3 の魅力
Sketch Appを使おう(導入編)
Sketch 3を使う3つの理由と10の魅力
Sketch Shortcuts(ショートカット集)

SHARE

スキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも発信中!

PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)

カテゴリー: デザイン 生産をあげるITツールの紹介