すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

お役立ち情報

【お役立ち情報】 Sketchの使い方や特徴について丁寧に解説!

ぴっかちゃん
ぴっかちゃん

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

sketchの説明動画

Sketchは、買い切りタイプ($99)で1年分のアップデートが付属してあります。30日間無料トライアル付きです。

Sketchの基礎情報

この章では、Sketchの基礎情報について解説します。

Sketchの特徴

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

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

以下は、Sketchを使ってみて魅力的だと感じた点です。

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

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

上記の動画のように、作成した画像は「MAKE EXPORT」を選択するだけでPNGやJPGなどを指定して、簡単に保存することが出来ます。

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

今回は30日間無料の方でダウンロードしてみましょう。
まずは、Sketchの公式ページにアクセスしてダウンロードします。

ダウンロード方法

※Mac専用なので注意してください。

ダウンロード後

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

解凍されたSketchをアプリケーションフォルダに移動する

起動

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

起動時画面

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

Sketch起動表示

主な名称と概要

以下は、Sketchの主な名称と概要です。

Sketchの主な名称と概要

メニューバー

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

ツールバー

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

Sketchのツールバーの説明

レイヤーリスト

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

インスペクタ

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

Sketchのデータ構造

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

Sketchのデータ構造

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のバージョン管理が出来るAbstractのプラグインも導入すると、作成した画像の管理しやすくなります。

Sketchについてもっと学びたい!という方は、以下の書籍で基礎から実践的な内容まで学ぶことができます。UIデザイナーとタイトルにありますが、内容は初心者向けなので安心して手に取ることができる1冊です。

UIデザイナーのためのSketch入門&実践ガイド
UIデザイナーのためのSketch入門&実践ガイド

Sketchの基本的な操作から実践的なノウハウまでを網羅的に解説した入門書!

この記事のまとめ

  • Sketchは、アプリやWEBデザインのUIデザインに特化したMac専用ツールだよ
  • 30日間無料トライアル付きで、とにかく動作が軽くて早い!
  • 1つのファイルの中に複数のページを管理する事が出来る