【Sketch】便利で使える！Sketchの技集

はじめに

本記事では便利で使えるSketchの技をご紹介します。
個人的にデザインをしている時に気づいたらよく使っているショートカットや機能などをまとめました。

簡単なものから、意外と気づかないシンボルの使い方まで色々とご紹介します！

画像の切り取り

Sketchで画像を切り取る、といえばマスクですが、マスクを使うとレイヤーの階層も増えるし、ものを動かす時に少し邪魔になるし…という時には、画像の切り取りを行いましょう。

Photoshopほどではないですが、Sketchにも画像を加工するための機能が少しだけ備わっています。

画像をダブルクリックすると、右サイドバーに画像加工のメニューが出てきます。

Selectionを選択し、くり抜きたい画像の範囲を囲みます。

「Crop」で切り取り完了です。

あとあと編集する可能性があるものはマスクを、ダミー画像をすこし切り抜きたいだけの場合はそのまま画像を加工してしまった方が早いかもしれません。

グループの中身を直接選択

色々なものを整えるためにグループをどんどん活用する必要があるSketchですが、グループを増やしていくにつれ、その中身が選択しづらくなるもの事実です。

そんな時、グループの中身を直接選択できる Cmd + クリック が大活躍します。

地味ですが、非常に重宝する技なので、ぜひ活用してください！

グループの中身を直接選択する: Cmd + クリック

アートボードを全てたたむ

アードボードがどんどん増えてくると自分で何をしているのかわからなくなってきます。

▼イライラ状態▼

自分が今掴みたい！と思っているレイヤーが掴めず、イライラする、ということが私にはよくあります。

また、他のアートボードなどをみて全体像を掴みたいのに現在のアートボードの中のレイヤーが多すぎて、何も見えない！ということもよくあります。

そんな時に私を救ってくれるのが、アートボードを全てたたむショートカットです。

Alt + Cmd + C を押すと、アートボードが一気にたたまれて、なんとも幸せな気分になります！

▼ハッピー状態▼

私みたいにレイヤーが散乱するだけでイライラする方は重宝すると思います。

アートボードを全てたたむ： Alt + Cmd + C

シンボルのオーバーライド

ご存知の方も多いと思いますが、Sketchで同じ部品をなんども使用する場合は「シンボル」というものを使います。

また、例えばシンボルとして「Contact」ボタンを作成したものの、今回は同じボタンで「アカウントを作成」という内容にしたい場合は、シンボルのオーバーライドが便利です！

シンボルを選択した際に、右側に「Overrides」という項目が出てくるので、そこから文字などを変更することができます！

シンボルのオーバーライド その２

これはテキストボックスをシンボルとして保存した時に使える技です。

テキストボックスのシンボルを使用する際、オーバーライドに何も入れないと、このようにデフォルトの文字が表示されます。

ただし、入力した時のテキストボックスを使いたい時は良いですが、未入力のテキストボックスを表現したい場合、新しくシンボルを作るしかないのか…と思う方も多いのではないでしょうか？

実はこれ、同じシンボルで解決するとっても簡単な方法があります。
オーバーライドになんらかのスペース（半角スペース、全角スペース）などを入れてあげると、中身がからになり、未入力のテキストボックスが表現可能です。

レイヤーをシンボルに入れ替える

たまにシンボルとして登録し忘れたコンポーネントなどがデザインしている途中で出てきたりします。

また、シンボルから一度外したけれども、やっぱりもう一度シンボルとして登録したい、という場合などもたまにですがあります。

その際に使えるのが、「レイヤーをシンボルに入れ替える」という機能です。

レプレイスしたいレイヤーを選択し、「Layer」→「Replace with」ですり替えたいシンボルを選択します。

とっても便利！

角丸の操作

Sketch上で直感的にできる角丸ですが、四隅の角丸を別々に変更することができることをご存知でしたか？

角丸の値を選択する際に 10;100;10;100 と入力すると、左上から時計回りに全て角が指定した値通りの角丸に仕上がります。

もちろん、return でベクターモードに入り、１つ１つの角をつまんでから設定することも可能です。

また、少し話は変わりますが、Sketchのwidthやheight、x/y positionの中では計算をすることも可能です。

ズームのショートカット

私は普段デザインしている際、ズームは z キーを押しながらクリックアンドドラッグでズームしたり、逆にz + alt キーを押しながらクリックアンドドラッグでズームアウトしたりしています。

ただしぴったりと等倍にズームしたい！という時は Cmd + 0、画面上の全ての要素にズームしたい場合は Cmd + 1、現在選択している要素にズームしたい場合は Cmd + 2、現在選択している要素を中心に持ってくる場合は Cmd + 3 とそれぞれ使い分けたりしています。

全て使い慣れればとても便利です。

クリックアンドドラッグでズーム： z + クリックアンドドラッグ
等倍にズーム： Cmd + 0
画面上の全ての要素にズーム： Cmd + 1
選択している要素にズーム： Cmd + 2
選択している要素を中心に持ってくる：Cmd + 3

アートボード間の移動

スペースキーを長押しして手のひらツールで隣のアートボードに移動しても全然問題ないのですが、個人的には fn + → / ← を使うと非常にスムーズにデザインが進む気がします。

今見ているアートボードの状態のまま次のアートボードに移動してくれるので、無理にズームアウトしたりズームインしたりする必要がなく、非常に便利です。

アートボード間を移動する： fn + → もしくは fn + ←

レイヤーのロック

自分が選択したいものを「がっ」と掴みたいけど、クリックアンドドラッグで選択しようとすると下の背景も掴んでしまって困る…。ということはたまにあると思います。

せっかく細かいボタンとかタグが掴めたのに、背景も一緒に選択されるとイライラして泣けてきます。

そんな時に非常に役立つのが、その下のレイヤーをロックするショートカットです。

背景とかをロックするのにはとにかくよく使います！

レイヤーのロック： Cmd + Shift + L

まとめ

今回は便利で使える！Sketchの技集をご紹介しました！
デザインツール系のショートカットは山ほどありますが、今回は覚える価値あり！というものを厳選してご紹介しました。
ぜひSketchでのデザインの効率化につかってみてください！