2017年10月9日

デザイン

【Sketch】これからSketchを始める人のためのおすすめ初期設定

目次

  1. はじめに
  2. ツールバーの設定
  3. キーボードのショートカットの設定
  4. プラグイン
  5. まとめ

はじめに

今回はSketchをこれから使い始める方やSketch初心者の方のために効率的にデザインをするために役立つSketchの初期設定をご紹介します。

オススメのツールバーやショートカットの設定、そしてプラグインなどもご紹介するのでぜひみなさんのデザイン制作の参考にしてください。

本記事はSketchをすでにダウンロードした方向けの記事です。
Sketchの導入については触れませんが、下記リンクよりダウンロードすることが可能です。
ここからSketchをダウンロード(公式サイト)

ツールバーの設定

まずはSketchを開きましょう。

一番上にあるバーがツールバーです。

デフォルトのツールバー:

私の現状のツールバー:

私は基本あまりツールバーを使うことがないです。
ほとんどの機能はショートカットを使えば一瞬で持ち替えられるので、わざわざマウスを持ってクリックすることがない、と感じます。

強いていくのであれば、回転ツールとSketch mirrorを使用するために使うくらいなので、あまり必要ないと思った機能は削ぎ落としています。

ただし、長方形ツールや円形ツール、ペンツールなどいろんな機能を入れたい方もいらっしゃるので、お好みに合わせてカスタマイズしてください。

キーボードのショートカットの設定

PhotoshopやIllustratorに慣れている方や、キーボードのショートカットを多用したい方は、最初にSketchを設定する時点でショートカットを登録しておきましょう。

以下、手順に沿ってショートカットを設定します。

  1. システム環境設定を開く

  2. キーボードを開く

  3. ショートカットを開く

  4. 左メニューにあるアプリケーションを選択する

  5. 大きい枠の下にある「+」ボタンを押す

  6. ドロップダウンメニューから、アプリケーションをSketchにする。メニュータイトルはSketchのメニューバーなどに乗っている名前を正確に入力する。最後にキーボードショートカットを設定する。

  7. 追加するをクリック。

個人的に登録しているショートカットはこちらです。

Tighten, Loosenはカーニング/トラッキングのためのショートカット。
Move To Front, Move To Back, Backward, Forward はそのままですが、レイヤーを前後に持ってくるためのショートカットです。

個人的に重宝しているのは、「Collapse All Groups」というショートカットで、アートボートを一瞬で全て閉じた状態にしてくれます。

かなり大掛かりなプロジェクトになると、グループはもちろん、アートボードもどんどん増えていくので、こちらのショートカットでめちゃくちゃなレイヤーパネルを整理することができ、とてもおすすめです。

プラグイン

Sketchにはプラグインが豊富にあり、どのプラグインを使うかは個人の好みなのですが、私が使っていて非常に便利だと思ったものをご紹介します。

Sketchpacks / Sketch toolbox

まずは、プラグインマネージャーのプラグインを入れておくと良いでしょう。

いくつかあるのですが、Sketchpacks, Sketch toolboxあたりが良いと思います。

どちらもあまり変わらないので、好きな方を選んでください。もし、いろんなデバイス間でプラグインを管理したい場合は、Sketchpacksの方が良いかもしれないです。

Sketch Runner


Sketch Runnerはキーボードでコマンドをいくつか打つことで、指定したアートボードに飛んだり、シンボルを追加したりなど様々なことができるようになる、ワークフローの効率を上げるプラグインです。

Sketch Runnerに関しては、こちらの記事で詳しく説明していますので、ぜひご覧ください。

【Sketch】Sketch内でAlfredを使うようなSketch Runner とは?

Launchpad


こちらは、いくつかのプラグインが入っているものなのですが、特によく使うのは、auto layoutというレスポンシブレイアウトを作る際に、コンポーネントを定位置にピンしたりできるプラグインです。

レスポンシブのデザインを作るわけではなくても、コンポーネントをリサイズすることはよくあるので、とてもおすすめです。

また、Launchpadには、Sketchで作ったデザインをそのままWebサイトにする機能があります。

私はモックを作成することなどもあるので、その際にはこちらの機能も重宝しています。

Launchpadが吐き出すコード自体は綺麗ではないので、そのままWebサイトとして使用することはオススメしませんが、簡易的なサイトやモックアップとしては使えると思います。ブレイクポイントなどは設定することができるので、一応レスポンシブなサイトも作れます。

気になる方はこちらからどうぞ。
Launchpad

また、プロトタイピング/モックアップツールを比較してくれているサイトも前回の記事でご紹介しているので、気になる方はどうぞ。

【ツール】もうデザインツール比較には困らない!Uxtools.co

CRAFT

CraftとはSketchとPhotoshop用の無料プライグイン集です。

CRAFT

とにかく機能が豊富で、写真や画像をリアルデータの形で出力してくれたり、繰り返しのデザインを一瞬で作ってくれたりします。

また、プロトタイプ機能なども付いています。

CRAFTについてはこちらの記事で詳しくご紹介しているので、興味がある方はどうぞ。

【Sketch】Craft prototypeでSketchを使ってできるようになったこと

Abstract

Abstractとはデザインをバージョン管理するツールです(プラグインとはちょっと違います)。
他の人とコラボレーションするときもそうですが、自分でデザインを作っているときもバージョンを管理しておけると非常に安心です。

Abstractの使い方や詳しい機能に付いてはこちらの記事で取り上げています。

【Sketch】デザインをgit管理する!Abstract

Icon Font

IconfontはSketch上にアイコンを簡単に書き出すことができるプラグインです。

FontAwesome, Material Design Icons, Ion Icons, Simple Line Icons, Ant Design Iconsなど豊富なアイコンバンドルから自分が使いたいアイコンを検索し、挿入することができます。

特にIcon FontをSketch Runnerと組み合わせになるとアイコンをすぐに入れることができるようになり、非常に便利です。

Zeplin

エンジニアへデザインをハンドオフするときに大活躍するツールです。

スタイルガイドを自動的にかき出してくれたり、CSSコードを吐き出してくれたり、コンポーネントとコンポーネント間の距離を出してくれたり、とても便利なツールです。

自分でコーディングなどを行う方も、他のエンジニアさんにデザインを渡される方も重宝すると思います。

公式サイトはこちらから

ImageOptim

Sketch からエクスポート(書き出し)した画像を最適化してくれるプラグインです。

一回書き出した後にもう一度最適化する必要がなくなるので、とても便利です。

まとめ

以上、今回はこれからSketchを始める人のためのおすすめ初期設定をご紹介しました。

これで設定は完璧!とまではならないと思いますが、ある程度の基本はカバーできていると思うので、あとはお好み応じてカスタマイズしてください。

1

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP