Sketch初学者が理解すると作業効率が2倍になる5つのTips

こんにちは。デザイナーのイノウエタカヒト(@intkaaa)です。

皆さんはデザインをするとき、どんなツールを利用していますか?
僕はWebデザインをする時、もっぱらAdobeXDを利用していました。

過去にSketchを購入して一通りの機能を触りましたが、Adobe製品とショートカット等の使い勝手が異なり、使いづらさ故にそれ以降使うのを辞めてしまいました。

最近は、Basecampの坪田さん(@tsubotax)やレオさん(@ell_eo)からSketchを改めて学んでいて、「Sketch便利…!」と感じてきたので、教わったことをまとめてみました!

0. この記事の対象者

・Sketchを買ってみたものの、便利さがイマイチ掴めていない方
・XDやPhotoshopを使っており、乗り換えを検討している方

に向けて、本記事でSketchがレギュラー入りしてもらえると嬉しいです。


1. シンボルの基本と活用例

シンボル機能はSketchでマストな機能ですが、以前はその有用性にピンときていませんでした。

Web制作時、UIをマメに変えたり使い回す作りをしていなかったので「ふーん確かに便利そうやけど…」みたいな感じで終わってました。

しかし、きちんと使い方を理解すると「Webデザインでも使えるやん!!」って思えたのでそれらを紹介していきます。

シンボルの基本と便利なポイント
とその前にまずシンボルについて改めて理解したことをまとめます。

「/」を使うことで階層分けができる
シンボルを作る際に「/」で区切ることで種類ごとに階層を分けられます。下図は「Buttons/primary/default」としました。

「OK」を押すと以下図の通り「Symbols」のページが作成され、作成したシンボル群がここに表示されます。

以下図では先ほど作成した「Buttons/primary/default」に加え「Buttons/primary/outline」「Buttons/secondary/default」「Buttons/secondary/outline」を作成してみました。

プライマリとセカンダリ、アウトラインをそれぞれ用意する時などに利用すると修正時の作業コストが大幅に下がります

オーバーライドについて
これはXDから乗り換えたとき、一番感動した機能でした。

ざっくり言えば、シンボル化したお知らせリストやボタンなどのテキストなどを上書き(オーバーライド)できる機能です。

聞くよりも見たほうが簡単。

シンボル化したお知らせリストを選択し、画面右のところの入力欄を変更すると…

すごい便利。
今まで⌘+クリックで選択して日付変えて、⌘+クリックして本文変えて、みたいにしていました。

しかしこれだと、1つ入力してTab押して入力して…ってできるので、動作にするとあまり変わりがないように思えますが、気持ち的に随分負担が軽減されました。

ボタンの背景色をオーバーライドで変更する
オーバーライドの活用例として、ボタンの背景色をオーバーライドで切り替えることができます。

上のように、あらかじめ作成したカラーのシンボルをボタンの背景レイヤーに設定することで、ボタンの背景色をセレクトボックスで切り替えることができます。

チェックボックスやラジオボタンのオーバーライド
コデアルのデザインシステムを構築された西田さん(@nikoko45)のSketchファイルを参考にさせていただいています。

こちらもオーバーライドでチェックボックス、ラジオボタンのアクティブ/非アクティブを切り替えることができ、開発側が参照しやすくなっています。

このデータは西田さんのnoteで配布されているので、ぜひダウンロードをおすすめします!

✏️CI&UIリニューアルしながらデザインシステムを作った話 - Yoko Nishida


2. 超絶便利なResizing

次はResizingについて。

みなさんも右側に十字キーのような表示があるけど、イマイチよく分からずそのまま…という人も多いのではないかと思います。

実はこの十字キーたちがめちゃめちゃ便利な役割を果たすので、次はこのResizingという機能について書いていきます。

Resizingの概要と基本的な使い方
Resizingは「グループもしくはシンボル内のレイヤーに対し、親がリサイズされた時の挙動を設定できる」機能です。

Resizingでは「選択したグループ内の小要素の四辺のどこを固定するか」と「小要素の幅と高さを固定するか」の設定ができます。

上図のように、「辺」と「幅・高さ」のそれぞれ固定したい部分をクリックするだけで、アートボードを可変しても子要素が伸びたりせずにレスポンシブな振る舞いをしてくれます

このResizingのおかげで、今までPCデザインからスマホのデザインを作るときに一つ一つのパーツをちまちま編集してたのですが、その手間が大幅に削減され、作業効率がかなり改善されました…!😭

Resizingの細かい振る舞いの解説については有名なSketch本の著者であるRyo Yoshitakeさん(@ryo_pan)の記事が詳しくて分かりやすいのでぜひ一読してみてください。

✏️Sketch v44 betaで新しくなったResizingを試してみる - よりぶろ




3. サービスUIデザインに活用したいSketch Libraries

3つ目はSketch Librariesという機能です。

こちらはWeb制作というよりもWebサービスでのUIデザインなどに威力を発揮します。

Sketch Librariesの概要と基本的な使い方
Sketch Librariesはシンボル群が入ったSketchのファイルを外部ファイルとして読み込むことで、そのシンボル群をそれぞれのファイル間で同期して使用することができます。

以下に基本的な使い方を説明していきます。

1. 同期するシンボルのファイルを作成する
まずは同期するシンボル群のSketchファイルを作成します。(今回ファイル名を「UIparts.sketch」としています。)

2. 作成したシンボルのファイルをLibraryに追加する
次にSketchのメニューバーから「Preference/Libraries」に行き、「Add Library..」から先程作ったSketchファイルを追加します。

3.他のファイルでLibraryを使用するLibraryに追加したシンボル群は、他のSketchファイルでも使えるようになります。
Libraryに追加したシンボルは、メニューバーにある「Insert」→「1,2で作成したファイル名」から利用できます。



4. 覚えると作業効率が爆上がりするSketchのショートカット

4つ目はSketchを利用するときに覚えておくと作業効率が格段にUPするショートカットを挙げていきます。

挿入系のショートカット

R:長方形
O:円
L:線
T:テキスト

レイヤー周り

F:(レイヤーを選択した状態で)塗りの表示/非表示
B:(レイヤーを選択した状態で)線の表示/非表示
1 ~ 0:(レイヤーを選択した状態で)透明度を変更(10%単位で変更されます)
⌃ + C:カラーピックを起動
⌘ + G:選択したレイヤーをグループ化
⌘ + R:選択したレイヤーの名称を変更
⌘ + クリック:クリックしたレイヤーを一発で選択(グループで内包されているときに便利です)
⌘ + ⌥ + ↑:選択レイヤーを一つ上に移動
⌘ + ⌥ + ↓:選択レイヤーを一つ下に移動
⌘ + ⌥ + ⌃ + ↑:選択レイヤーを一番上に移動
⌘ + ⌥ + ⌃ + ↓:選択レイヤーを一番下に移動

その他

A:アートボードを作成
⌃ + L:グリッドを表示
⌃ + R:ガイドの表示/非表示
⌘ + 1:アートボード全体を表示
⌘ + 2:選択したアートボードを表示
⌥ + hover:要素間の距離を表示
⌘ + ⇧ + {:テキスト左寄せ
⌘ + ⇧ + }:テキスト右寄せ
⌘ + ⇧ + |:テキスト中央寄せ
⌘ + ⇧ + L:レイヤーをロック


5. インストール必須のプラグイン

最後はインストールしておくと便利なプラグインをまとめていきます。
他にも良いプラグインがありましたらぜひ教えてください!🙏

SketchPacks
Sketchでプラグインのインストールやアップデートを管理するためのツールです。
兎にも角にもまずこれをインストールしましょう!
Rename It
複数のアートボードやレイヤーの名前を素早く変更できるプラグインです。
パラメーターや順序などで、複数のアートボードやレイヤーの名前を動的に変更することができます。
Sketch Runner
これはぜひ入れていただきたい、オススメのプラグインです。
AlfredやSpotlightのように、キーワードを打ち込むだけでコマンドを起動でき、頻繁に利用するアクションをキーボードで完結できるようになります

✏️参考記事
[Sketch] 便利ランチャー Sketch Runnerをご紹介!
CRAFT
InVisionがリリースした、ダミーデータを挿入して作業を自動化できるプラグインです。

✏️参考記事
Sketch3とPhotoshopのプラグイン Craft を使って制作を楽にしよう
Artboard Manager
散らかったアートボードを自動で整列してくれるプラグインです。
アートボードを設定したマージンで整列できます。
Map Generator
選択したレイヤーに設定した範囲のGoogleMapを挿入することができるプラグイン。
作成したデザインにGoogleMapの表示が必要なときに一瞬で設定した地点のGoogleMapを作成できます。



終わりに

以上つらつらと書いていきましたが、XDも日々進化しています。

「それXDでもできるわい!」自分自身でツッコミながら書いていきましたが、あくまでもSketchが「レギュラー入り」できるツールとして、目的や用途によって適宜ツールも使い分けられるように自己のスキルを整えていかなきゃなと思った次第でした。

最近ではFigmaというデザインツールもよく聞くので触ってみたいな〜と思っています。

最後までお読みいただき、ありがとうございました!🎉



Twitterもやっています。今後デザインに関する情報や考察を発信していくので見ていただけると嬉しいです 🙌


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとうございます!🎉
72

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
5つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。