【お役立ち情報】エンジニアでもSketchを使ってみよう!

お役立ち情報

Sketchの使い方を徹底解説!


sketchの説明動画

  • Sketchとは、アプリやWEBデザインのUIデザインに特化したMac専用ツールです。
  • 買い切りタイプ($99)で、1年分のアップデートが付属してあります。
  • 30日間無料トライアル付きです。

Sketchの特徴とは?

似たようなツールにPhotoshopやIllustratorやFireworksがありますが、Sketchは、人気やシェア共にトップクラスのツールです。

Sketchを採用している企業が多く、デザイナーさんが使用しているツールをエンジニアも共有する事でコミュニケーションを円滑に行うことが出来きます。またSketchのUIもXcodeのInterface Builderに似ている所があるので扱いやすいかと思います。

Sketchを実際に使って、特に魅力的だと感じた部分が下記です。

  • とにかく動作が軽くて速い!
  • 買い切りなのでAdobe製品よりも安い
  • 画像のEXPORTが簡単!

画像のEXPORTは、動画の様にMAKE EXPORTを選択するだけでPNGやJPGなどを指定して、簡単に保存することが出来ます。

Sketchの画像ダウンロード方法

Sketchをダウンロードしよう!

今回は30日間無料の方でダウンロードしてみましょう。
まずは、Sketchの公式ページにアクセスしてダウンロードします。
※Mac専用なので注意してください。

ダウンロード方法

ダウンロード後

ローカルにzipファイルがダウンロードされるのであるので、ダブルクリックして解凍しましょう。
あとは、解凍されたSketchをアプリケーションフォルダに移動しておきましょう。

起動

Sketchを起動すると、下記の表示が出ますが「開く」を選択しましょう。

起動時画面

次に下記の画面が表示されるので 「New Document」を選択しましょう。

Sketch起動表示

主な名称と概要

メニューバー

メニューバーには、Sketchの大体の機能が格納されています。探している機能が見つからない時はここから探してみましょう。

ツールバー

デフォルトでは、既によく使われる機能が配置されていますが、自分でカスタマイズすることも出来ます。
ツールバー上で右クリックして「Customize Toolbar」を選択します。あとは、追加したい機能をドラッグ&ドロップでツールバーに加えます。

Sketchのツールバーの説明

レイヤーリスト

レイヤーリストでは、レイヤーだけではなくpageも含めて管理しています。

インスペクタ

Sketchで選択したオブジェクトやレイヤーのパラメータを設定することが出来ます。例えば、文字の色を変えたりするのもここで設定します。(後ほど詳しく説明します。)

Sketchのデータ構造

Sketchのデータ構造は少し特徴的で1ファイルには、Pageという概念でアートボードなどがまとめられます。

Sketchの最上位にあるのはPageという概念です。Pageは、新規ファイルと同等です。

Pageの下にあるのがアートボードです。これは何かを描くための紙みたいなものです。

そして、アートボードの下にあるのが、オブジェクトになります。これは、文字や画像などのことを指します。

Page作成

Pageは、レイヤーリストの右端にある「PAGESの+ボタン」を選択すると作成することが出来ます。デフォルトでは、既にPage1があります。Pageをダブルクリックすると、名前を変えることが出来るので管理しやすくなります。

Pageの作成

アートボード作成

Pageを作成した時点では、キャンパスにはアートボードが無い状態です。
アートボードを作成するには、ツールバーのinsertからArtboardを選択するとアートボードを作成することが出来ます。ショートカットではaを押すだけでアートボードを選択することが出来ます。

デフォルトでデバイスに対応したアートボードが沢山ありますが、カスタマイズすることも出来ます。

カスタマイズのアートボード作成

また、デフォルトの各デバイスごとのアートボードは、Artboardを選択すると、右手に表示されるので使用したいデバイスを選択するだけで使用する事が出来ます。

デフォルトアートボード作成

Sketchの基本的な使い方

いくつかのSketchの基本的な使い方を紹介します。説明補足動画もあるので是非手を動かしながら進めてみてください。

オブジェクトの選択

オブジェクトを選択する時「カーソルで選択する方法」と「レイヤーリストから選択する方法」があります。

オブジェクトが重なっていたりすると、カーソルでオブジェクトを選択しても他のオブジェクトが反応する事があるので、その場合はレイヤーリストから対象のオブジェクトを選択する方がスムーズです。

オブジェクト選択

また、「shift キー」を押しながら対象オブジェクトを選択すると複数選択する事が出来ます。これは、レイヤーリストでも同様です。

シェイプ作成

シェイプとは、丸型や線型などのオブジェクトのことを指します。
シェイプの使い方は、ツールバーのinsertのShapeから選択します。
あとは、アートボード上でドラッグ&ドロップで描いていきます。(shiftを押しながらドラッグ&ドロップすると、均等な形に仕上がります。)

シェイプの色や形などはインスペクタで調整することが出来ます。

シェイプの説明

テキスト作成

テキストは、insertのTextを選択します。ショートカットは、Tです。
作成したテキストを選択して文字の色や大きさを変更することが出来ます。

  • 文字色
  • フォントの種類
  • 文字の大きさ
  • 文字の配置

さらに他のオブジェクトの上に文字を乗せる事もできます。

文字編集

コピー

Sketchでは、作成したオブジェクトだけではなく、アートボードごとコピーして使いまわすことが出来ます。

コピーする方法は簡単です。コピーしたい対象をドラッグ&ドロップして「command + C」でコピーします。

アートボードごとコピーする場合は、レイヤーリストのアートボード名か、キャンパスの方のアートボードを選択してから「command + C」でコピーします。(下の例ではpikawakaに当たる部分です。)

貼り付けるときは、「command + V」で貼り付けます。

Sketchでコピー

マージンを測る

Sketchでは、アートボード・オブジェクト同士のマージンを簡単に測れる機能があります。
マージンを測りたい対象を選択した状態で「alt(option)」キーを押すとマージンが表示されます。

マージンを測る

カーソルが対象アートボード・オブジェクトの位置にあるとマージンが表示されないので、カーソルの位置を対象の外に配置しましょう。

グループ化

複数のレイヤーを選択した状態でツールバーの「Group」もしくはレイヤーリストで「右クリック + Group selection」を押すとレイヤーをグループすることが出来ます。

ショートカットは、「 command + g 」です。

レイヤーのグループ化

作成していると、レイヤーがたんだん増えてくるのでグループ化の機能は管理する上でもとても便利です。また、複数の関連するオブジェクトを移動や大きさを変更する時に一気に操作することが出来ます。

今回動画で使用したSketchの素材は、こちらからダウンロード出来るようになってますので、是非試して見てください。

次回、Sketchの便利なプラグインや複数人と共同作業する方法を紹介していきます。

まとめ


・Sketchは、アプリやWEBデザインのUIデザインに特化したMac専用ツールです。

・30日間無料トライアル付きで、とにかく動作が軽くて早い!

・Sketchは、1つのファイルの中に複数のページを管理する事が出来きます。