iOSアプリ・Webサービス開発のイリテク

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

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

このエントリーをはてなブックマークに追加

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

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

SPONSOR

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(ショートカット集)

このエントリーをはてなブックマークに追加

記事を書いている人

イリテク(株)代表。Webシステム/iOSアプリの開発を行っています。
受託開発だけでなく、月額固定の専属エンジニアサービスおよび、 自社でクラウド見積請求書サービス CLOUD PAPERを運用中!
プロフィール

月額10万円で御社専属エンジニアを雇いませんか?

御社の顧問エンジニアとして、デザイン・システムに関わる様々なご相談をお受けします。企画・提案だけでなく、実際に手を動かして開発まで行います。また、システムにとどまらず、デザイン案件もお受けできるのが強みです。
顧問エンジニアサービス

イリテクの最新記事をフォロー

  • follow us in feedly
    RSSで最新記事を取得

SPONSER

コメントをどうぞ!

関連記事