自分ハックで毎日を楽しく!イリテク!

HOME > Sketch > Sketch 3レビュー!PhotoShopからのりかえた5つの魅力!参考リンクのまとめもあり
2015/07/30 (2016/07/05更新) タグ:

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

タグ:
この記事をシェアする
このエントリーをはてなブックマークに追加

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む

イリテクで開発したサービス

請求書作成業務をもっとかんたんに。見積請求書の作成だけでなく、郵送代行、メール送信、PDFダウンロードなどバックオフィスを効率化。

詳しくはこちら

こちらの記事もおすすめです

SPONSER

開発したWebサービス
記事を書いている人
入江 慎吾 ITゼネラリスト
イリテク(株)代表。webシステム、デザイン、iOSアプリ開発に携わって15年目。複数の企業と専属エンジニア契約中。自社で見積請求CLOUD PAPER運営。iPhoneアプリ全国総合ランキング3位を記録。イリテクブログは月間約5万PV。(もっと詳しく
SPONSOR
最新記事
Facebook
Twitter
おすすめ記事