Sketchを買ったら読んでおきたい！基本的なことからちょっとした小技、ショートカットまとめ

つい最近までSketchは日本であまり知られておらず、日本語でSketchについて書いている記事はほとんどありませんでした。ところが5月7日にFireworksの開発終了が発表され、代替ツールとしてSketchの名前が急浮上。それに合わせたのかSketchが5月8日に半額セールを行い、Sketchについて書かれた記事やツイートも増えてきて、注目度の高まりが感じられます。とはいえ英語日本語問わず、Adobe製品に比べたら圧倒的に情報量が少ないSketch。Adobe製品と同じような機能やショートカットも多いですが、使いこなせるようになるまでは少し時間が掛かりそうです。Goodpatchでもマニュアルや記事を読みながら、隙間時間にSketchを触ってその機能を確かめています。というわけで今回は、Sketchの基本的な機能や、発見した小技、ショートカットなどをまとめてみました。
先日アップした「Fireworksユーザーに朗報？海外で話題の新しいWeb制作ツールSketch.app」に書いたことは省略しているので、そちらと合わせてご覧下さい！

ページ

Fireworksのようにページ機能があります。ツールバー左下にあるPage 1と書かれたドロップダウンメニューをクリックすることで、新規ページの作成や移動ができます。ただFireworksのようにマスターページやシンボル機能は今のところありません。が、ユーザーからの質問に対して今後マスターページを追加するつもりだと答えているので今後に期待です。

スタイル

Illustratorのアピアランスのように、塗りやシャドウなどを複数重ねることができます。チェックを外せばスタイルの適応は外せますが、上記のように左右どちらかにずらすと完全に消すことも。消えるときの音が好きです。

リンク

同じスタイルを持つレイヤーをリンクしておくと、どれか一つのスタイルに変更を加えたときに自動的にスタイルが変更されます。この設定が少しややこしいのですが、まずInspecter右上にあるリンクボタンを押します。そうするとメニューが現れ、ここに追加したリンクスタイルが表示されるようになります。何か一つレイヤーを選んで＋ボタンを押すと、そのレイヤースタイル情報が保存されます。そのレイヤーとリンクさせたいレイヤーを選択し、先ほど追加されたリンクスタイルを選択するとリンクが完了。図のようにスタイルが線で囲まれているとリンクされている証拠です。これで何か一つのレイヤーにスタイルの変更を加えると全てのリンクに適用されるようになります。左端にある斜線が入った白のボタンを押すとリンクを外せます。

ブーリアン

パスファインダのようにオブジェクトを合体したり、切り抜いたりすることが出来ます。さらに処理を行なったあとも、それぞれのオブジェクトはサブパスとして残るので、後から簡単に変更を加えることが可能です。

ベクターの編集

オブジェクトやシェイプをダブルクリックするとベクターを編集することが出来ます。さらにベクターポイントをクリックすることでハンドルの操作が出来るように。Commandを押しながら選択することによって片方ずつ動かせるのですが、どうやら片方のハンドルだけ消したいときは、Commandを押して一度クリックし、Commandを押したままdeleteをキーを押さないと消せないようです。もっといいやり方があるんじゃないかと模索中なのですが発見できず…。もしご存知の方がいたら教えてください！（他にも片方だけハンドルを引き出すことがどうも出来ないようで、ダブルクリックで一度両方のハンドルを出してから、片方を消すしかない気が…。）

あとはベクター編集モードのときにポイントとポイントの間をCommandを押しながらクリックすると、ちょうど真ん中にポイントを追加してくれます。

ツールバーのカスタマイズ

Sketchにはツールボックスがないので、他の機能を追加したいときはツールバーを右クリックし、Customize Toolbarを選ぶとその他の機能が一覧で出てくるので、そこから使いたいものをドラッグ&ドロップすることにより追加できます。実は色んな機能が隠されているのでした。

角丸

角の丸みはInspectorにあるRadiusから簡単に変更できます。ただスライダーだとなぜか最大で40までしか設定できないのですが、数値を入力すればそれ以上も出来ます。

ガイド

メニューのView→Show Rulersから定規を表示し、定規の上でダブルクリックすればガイドを引くことができます。ちなみに定規はドラッグすることで0の地点を変更可能。

カーニング

カーニングのショートカットが見つからずに弊社スタッフが困ったとツイートしたところ、 @littlebustersさんが教えてくださいました！Opt + Ctrl + 狭めたいときはT、広くしたいときは+Lで出来ます。Sketchに関する記事も書いていらっしゃるので一緒にどうぞ→ちょっと別の世界も見てみませんか？ベクターベースのグラフィックツール Sketchを紹介してみるよ。

距離

なにかレイヤーを選択し、Altキーを押してみてください。アートボードのどの位置にあるかを表示してくれます。さらにマウスを他のレイヤーにホバーした状態でAltを押すと、選択したレイヤーとの距離を示してくれます。

レイヤーを検索

Command + Fを押すことでレイヤーリストの上に検索フォームが出現します。名前を付けておけばどんなにレイヤーが増えても簡単にさくっと探すことが出来ますね。

後ろにあるレイヤーを選択

例えば上の図のように重なり合ったレイヤーの中から、後ろのレイヤーを選択したい場合はalt + command を押しながら一番上にあるオブジェクトをクリックすると、どのレイヤーを選択するか選べます。さらにレイヤーが選択された状態でAキーを押したままマウスをドラッグすると、マウスがそのシェイプの上になくても選択されたレイヤーだけを移動します。

デフォルト設定

シェイプはグレーの塗り＆内側にボーダーというスタイルがデフォルトですが、基本にしたいスタイルを適用したシェイプを作り、メニューのEdit → Set Style as Defaultを選ぶと、次から作るシェイプはそのスタイルを持ったシェイプになります。他にもスタイルは左下のStyle Presetsに登録できるので、よく使うものは設定しておくと便利そうですね。

テンプレートの設定

オリジナルサイズのアートボードやレイアウトなどをテンプレートとして保存できます。メニューのFile → Save as Templateを選び、使いたいときはFile → New from Templateから選ぶだけ。

ショートカット一覧

基本的なショートカット

Ctr + H　→　オブジェクト、シェイプのハンドル表示切り替え。

Ctr + L　→　ガイドの表示、非表示の切り替え。

Ctr + G　→　グリッドの表示、非表示の切り替え。

Space　→　ハンドルツール。

Cmd +　3 →　選択されているレイヤーを真ん中に表示。

Cmd +　2 →　選択されているレイヤーをズームで表示。

Z →　ズームツール。 Z + altを押しながらクリックすると縮小できます。

esc　→　現在のツールを終了、または全選択レイヤーを解除。

Tab　→　下のレイヤーへの移動。Shift + Tabで上のレイヤーに移動します。

レイヤーの追加

R →　四角形

O →　円

L →　線

U →　角丸

T →　テキスト

V →　ベクター

P →　鉛筆

移動＆サイズの変更

Alt + ドラッグ →　レイヤーの複製

Alt + ホバー →　他のレイヤーとの距離を表示

Alt + サイズ変更 →　中心点から拡大、縮小

Shift + サイズ変更 →　縦、横の比率を持ったまま拡大、縮小

 

いかがでしたでしょうか？他にもまだまだ機能があるので、今週末はぜひ実際に触ってSketchで遊んで確かめてみてください！dribbbleなどでも少しずつSketchを使って作られたものが増えてきているので、ダウンロードしてどうやって作られているか見てみるのもいい練習になるかもしれません。使ってみて何か新しい発見やもっと良いやり方などがあったらぜひMEMOPATCHまでお知らせください！