Sketchの使い方: 初心者がマスターしておきたいSketchでのデザイン作業がぐっと効率的になるチップス
Post on:2015年6月29日
Sketchでのデザイン作業がより素早く、快適になるキーボードショートカットや機能を紹介します。

10 Sketch Tricks for Designers
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
- レイヤー間でスタイルをコピペ
- レイヤーの移動
- カラーピッカー
- 角丸の半径を個別に設定
- 再利用できるシンボル
- ツールバーのカスタマイズ
- iOSデバイスでデザインレビュー
- Sketchの便利なプラグイン
- Sketchでプレゼンテーション
- iPhone, iPadの画面を録画
レイヤー間でスタイルをコピペ
レイヤーに同じデザインをコピペしたい時は、カラーコードなどをコピペするのではなく、スタイルをレイヤー間でコピペできます。

- レイヤー間でスタイルをコピー
- ⌘ + Option + C
- レイヤー間でスタイルをペースト
- ⌘ + Option + V
レイヤーの移動
レイヤーを上下に移動させたい時は、ドラッグ&ドロップの代わりにキーボードのショートカットで上下に移動できます。これはレイヤーのリストを見る必要がないので、便利です。

- レイヤーを上に移動
- ⌘ + Option + ↑
- レイヤーを下に移動
- ⌘ + Option + ↑
カラーピッカー
Sketchではカラーピッカーをいつでも簡単に呼び出すことができます。

- カラーピッカーを表示
- Ctrl + C
角丸の半径を個別に設定
角丸のそれぞれの半径を簡単に設定できます。

- 角丸の半径を個別に設定
- 10/10/0/0 (上左/上右/下右/下左)
再利用できるシンボル
シンボルは再利用することができる要素のグループで、シンボル内の一つを変更すると全てに反映されます。

- シンボルの作り方
- グループ化したい要素を選択し、⌘ + Gでグループ化、その後ツールバーの「Create Symbol」をクリック

ツールバーのカスタマイズ
よく使うツールはメニューからいちいち選ぶのではなく、ツールバーに登録しておきましょう。

- ツールバーのカスタマイズ
- ツールバーで右クリック

こんな感じに自由にカスタマイズできます。
iOSデバイスでデザインレビュー
iOSアプリの「Sketch Mirror (600円)」を使用すると、iPadやiPhoneであなたのデザインがどのように見えるか簡単に確認することができます。ボタンやテキストが実際にiOSデバイスでどう見えるのか、大きさは大丈夫かと確認したい時に有用です。

- Sketch Mirrorの使い方
- ツールバーの「Connect」ボタンから。
- ※iOSが同じWiFi上である必要があります。
Sketchの便利なプラグイン
もし、Sketchで便利なプラグインを探そうとするなら、まずは「Sketch Toolbox」をダウンロードしてください。便利で人気の高いプラグインを探すことができます。
もし一つだけというのであれば、これをお勧めします。
- Sketchのお勧めプラグイン
- Content Generator Plugin

ダミーのデータを使ったコンテンツを素早く作成できます。
Sketchでプレゼンテーション
もし誰かに作成した新しいデザインを見せようとするのであれば、Sketchではそれも簡単にできます。

- プレゼンテーションモード
- ⌘ + .
iPhone, iPadの画面を録画
これはSketchの機能ではありませんが、知っておくと便利です。
QuickTimeを起動し、メニューから「ファイル - 新規ムービー収録」を選択します。録音ボタンの右の矢印から接続しているiPhoneやiPadを選択し、画面を録画できます。

- iPhone, iPadの画面を録画
- QuickTimeの「新規ムービー収録」
sponsors