Sketch3は、ウェブサイトや、アイコンや、スマホデザインや、レスポンシブデザインなどのデジタルデザインに特化したデザインアプリです。
直感的で、定義をすればするほど速くデザインができるんですが、PsやFwと比べると、シンプルになりすぎてて「あの機能はどこなの？っていうかあるの？」って思うものがいくつかあったので、まとめてみたいとおもいます。

ウェブデザインをするときのフローとして、


という流れがよさげです。アートボードを置いておくことで
ページ遷移やナビゲーションのバリエーションなどを同じ[ページ]に置けるので、全体の見渡しが容易になります。




1. [Insert]ボタン。なんでもカンバスに置くものの追加はだいたいここから入れられる。
2. オブジェクトを変形させたり、マスクしたりするボタン。
3. パスをブレンドする操作周りのボタン。
4. [View]ボタン。カンバス自体の設定や、ルーラーやグリッドなどの設定が入っています。
5. [Export]ボタン。書き出しはここか、10番から。
6. オブジェクトの配置や整列
7. 情報エリア。選択しているオブジェクトによって数値が変化。
8. [Fills]エリア。塗りつぶしの設定がまとめられていて、複数設定、レイヤー的にブレンド可能。
9. [Borders]エリア。線の装飾はこのあたり。その下に影とかぼかしなどの設定も。だいたいこのあたりで装飾などを行っていく。文字を選択しているときは、文字設定が表示される。
10. [Export]エリア。@1x、@2xや書き出し設定を設定できる。スライスや、オブジェクト、グループ、アートボードなど、書き出せる時はここに表示される。
11. アートボード本体。
12. ページのレイヤー（新規ファイル時は折りたたまれている）
13. アートボードのレイヤー
14. アートボード内のレイヤー
15. レイヤー名でサクッと検索できる検索フォーム

と、ほとんどのことがボタンでできるようになっています。
ただ、出現したりしなかったり、臨機応変に表示が変わっていくのでPsでいつも設定ウィンドウを表示していたタイプの人は慣れるまで「あれ、どこだっけ？」があるかもしれません。
なれると、考えることなく進められそうです。

なんとなくPsなどを使っていると、[File]とかにありそうなんですが、左上の[Insert]ボタン（１）にあります。Insertボタン（１）から以外にも、Aキーで新規追加できます。


Sketchでは、全部レイヤー扱いになっていると考えたほうがアタマが混乱しないような気がします。


13番のアートボードレイヤーを選択し、７番にアートボードサイズが表示されるので、Sizeを変更する。
もしくは、アートボード選択時に表示されるバウンディングボックスで直接下へ伸ばすと変更できます。




スライスは、「ツール」っていうイメージがあって、集中しているとどこにいったか迷うことが多々ありました。これも、１番の[Insert]ボタンにあります。キーボードショートカットならSキーです。


スライスレイヤーを選択すると、10番の位置に「Export」が現れます。
左側のレイヤー一覧から、アートボードや、オブジェクト、グループを選択することでも、「Export」が表示されるので、スライスを定義していなくても書き出しの設定ができます。



さらに、Exportの右横の[＋]ボタンを押すと、複数の書き出し設定が可能です。



つぎに、ウィンドウ右上の「Export」ボタンを押して、書き出したいレイヤーを選択して書き出します。「Export」エリアの一番下にも書き出しボタンが出現するので、そちらでもOK。


という流れだけ覚えておくといいかもです。


フォントの装飾のボタンが一部隠れているので見つけにくいかもしれません。
下線、打ち消し線、太字のボタンは、「Options」ボタンの中にあります。
[List Type]では、ウェブで嬉しいリストスタイルも設定できるみたいです。




[Shape]レイヤーを選択後、右側「Fills（塗りつぶし）」エリアで[pattern fill]アイコンを選択し、[ Choose Image.. ]をクリックすると、Finderが開くので、好きな画像を読み込みます。
[Tile...]となっているドロップダウンリストでは、全面で塗りつぶしたり、タイル状にしたりと繰り返しの設定ができます。

写真の背景でFillしちゃいたいときとかも使えるので便利です。


新規パターンを追加した上で、ポップアップの下の方の[+]ボタンをクリックすると、
汎用パターンとして登録も可能です。
Global Patterns は、どのファイルでも参照できるパターン。
Document Patterns は、開いているドキュメント内のみで有効なパターンになります。

登録したパターンを選択して、枠外にドロップすると削除されます。
右クリックでDeleteすることも可能です。


レイヤーを選択後、
Layer→Create Symbol（Create Shared Style）
とすると、シンボル化、共通スタイルを作れます。よく使うものは登録するといいかもです。




Preferences > Layers　にある、「Text Layers」にチェックしておくと
Macでは文字をコピーしたときに色情報などを持ってしまっていることが多いのですが
いらない情報を消してくれます。Psでデザインするときはいつも「Plain Clip」を使っていたので何気に便利です。




border-topは実装されてないっぽいですが、これからのリリースであるかもということ。

@williamhutter not really, but you can kinda fake it with a 1px shadow with y: -1px offset : )

— Sketch (@sketchapp) April 15, 2014

いまは、ドロップシャドウでフェイクボーダーを作ることはできるみたいです。


「ページ」で、各ページの管理を。
「アートボード」でバリエーションや画面変化を作ると
縦横の２Dでファイルを管理でき、見渡すことができるのがいいなぁって思いました。
特にスマホサイトや、レスポンシブレイアウトのカンプに対してすごく良い感じですね。


Photoshopで縦ガイドを引くときは、横からぐぐーっと伸ばしますが
ルーラーの目盛りをマウスホバー→（自動でガイドが表示）→クリック（確定）という操作になります。
直感的には逆のイメージです。
（ぐぐーっと引かなくていいのは楽です。）

ガイドの表示/非表示は　View > Canvas > Show Smart Guides でコントロールします。

ガイドを削除するときは、ルーラ上で手のアイコンになったら掴んで枠外にドラッグすると消えます。



・オブジェクトを Alt + ドラッグ で複製コピーできます。
・スライスやページを選択した状態で、[delete] ボタンで削除できます。
・同じ位置にペーストは、 shift + cmd + V
・Shift + 方向キー で10pxごとに移動します。

書きながら調べたら、ショートカット一覧を見つけました。

Bring Forward　Alt + Cmd + ↑
Bring to Front　Control + Alt + Cmd + ↑
Send Backward　Alt + Cmd + ↓
Sent to Back　Control + Alt + Cmd + ↓

このあたり、便利そうです。
あと、ショートカットの追加は、Mac本体のシステム環境設定からの設定になるみたいです。


最初に触った時には、ベクター扱いなソフトと聞いていたのに拡大するとピクセルなのが謎だったのですが、「view」ボタンで「Show Pixels」がオンになってただけでした。（オフにすると、ベクターな表示になりました。）
イラストレーター形式のアイコンも、コピペでパスごと持ってこれますし、@2xな画像をドロップしたら、50%表示で読み込んでくれるのも嬉しい。

Photoshopで慣れている人は、スマホサイトや、レスポンシブのカンプが必要なときに展開するときなどに使ってみるとわかりやすいかもしれません。パーツをアセットで書き出しながら配置していくと、アタマが理解していきます。
慣れれば、たぶんPhotoshopを通さず（というか、イラレやPhotoshopで素材を作って）そのままSketchで配置していき、プロジェクト内で繰り返し使うパターンや、色を登録していくことで
どんどん速くなるアプリのように感じました。

数値Boxにマウスホバーでドラッグで縦横の数値を変えられるのも、サクサク動いて気持ちいいです。

設定が隠れている感じとか、Macっぽい操作方法のアプリですね。集中するための意図なんでしょうねー。

Sketch3は、有料アプリで、Mac App Storeでは¥11,800（2015-07-19現在）です。
オフィシャルサイトでは、フリートライアル版のDLもできるみたいです。

ご参考にどうぞ。

関連記事

• Sketch3でこれからデザインする人に使い方のヒントになりそうな操作をまとめてみる
• 自分色にハックする21世紀エディタ「Atom」
• ウェブ上の画像データを圧縮＆加工するサービス（Mac&オンラインツール）
• 食べたごはんを写真で記録できる「お料理アルバム by クックパッド」
• jsで実装できる今風の動きいろいろ（2015/05）