更新日:
【お役立ち情報】 Sketchの使い方や特徴について丁寧に解説！
Sketchとは、アプリやWEBデザインのUIデザインに特化したMac専用ツールです。
Sketchは、買い切りタイプ($99)で1年分のアップデートが付属してあります。30日間無料トライアル付きです。
Sketchの基礎情報
この章では、Sketchの基礎情報について解説します。
Sketchの特徴
似たようなツールにPhotoshopやIllustratorやFireworksがありますが、Sketchは、人気やシェア共にトップクラスのツールです。
Sketchを採用している企業が多く、デザイナーさんが使用しているツールをエンジニアも共有する事でコミュニケーションを円滑に行うことが出来きます。またSketchのUIもXcodeのInterface Builderに似ている所があるので扱いやすいかと思います。
以下は、Sketchを使ってみて魅力的だと感じた点です。
- とにかく動作が軽くて速い!
- 買い切りなのでAdobe製品よりも安い
- 画像のEXPORTが簡単!
上記の動画のように、作成した画像は「MAKE EXPORT」を選択するだけでPNGやJPGなどを指定して、簡単に保存することが出来ます。
Sketchをダウンロードしよう！
今回は30日間無料の方でダウンロードしてみましょう。
まずは、Sketchの公式ページにアクセスしてダウンロードします。
※Mac専用なので注意してください。
ダウンロード後
ローカルにzipファイルがダウンロードされるのであるので、ダブルクリックして解凍しましょう。
あとは、解凍されたSketchをアプリケーションフォルダに移動しておきましょう。
起動
Sketchを起動すると、下記の表示が出ますが「開く」を選択しましょう。
次に下記の画面が表示されるので 「New Document」を選択しましょう。
他にもデフォルトで、AndoroidやiOSのiconテンプレートがあります。用途に合わせてテンプレートを選択しましょう。
主な名称と概要
以下は、Sketchの主な名称と概要です。
メニューバー
メニューバーには、Sketchの大体の機能が格納されています。探している機能が見つからない時はここから探してみましょう。
ツールバー
デフォルトでは、既によく使われる機能が配置されていますが、自分でカスタマイズすることも出来ます。
ツールバー上で右クリックして「Customize Toolbar」を選択します。あとは、追加したい機能をドラッグ&ドロップでツールバーに加えます。
レイヤーリスト
レイヤーリストでは、レイヤーだけではなくpageも含めて管理しています。
インスペクタ
Sketchで選択したオブジェクトやレイヤーのパラメータを設定することが出来ます。例えば、文字の色を変えたりするのもここで設定します。(後ほど詳しく説明します。)
Sketchのデータ構造
Sketchのデータ構造は少し特徴的で1ファイルには、Pageという概念でアートボードなどがまとめられます。
Sketchの最上位にあるのはPageという概念です。Pageは、新規ファイルと同等です。
Pageの下にあるのがアートボードです。これは何かを描くための紙みたいなものです。
そして、アートボードの下にあるのが、オブジェクトになります。これは、文字や画像などのことを指します。
Page作成
Pageは、レイヤーリストの右端にある「PAGESの+ボタン」を選択すると作成することが出来ます。デフォルトでは、既にPage1があります。Pageをダブルクリックすると、名前を変えることが出来るので管理しやすくなります。
アートボード作成
Pageを作成した時点では、キャンパスにはアートボードが無い状態です。
アートボードを作成するには、ツールバーのinsertからArtboardを選択するとアートボードを作成することが出来ます。ショートカットではaを押すだけでアートボードを選択することが出来ます。
デフォルトでデバイスに対応したアートボードが沢山ありますが、カスタマイズすることも出来ます。
また、デフォルトの各デバイスごとのアートボードは、Artboardを選択すると、右手に表示されるので使用したいデバイスを選択するだけで使用する事が出来ます。
Sketchの使い方
この章では、Sketchのいくつかの使い方を解説します。
オブジェクトの選択
オブジェクトを選択する時「カーソルで選択する方法」と「レイヤーリストから選択する方法」があります。
オブジェクトが重なっていたりすると、カーソルでオブジェクトを選択しても他のオブジェクトが反応する事があるので、その場合はレイヤーリストから対象のオブジェクトを選択する方がスムーズです。
また、「shift キー」を押しながら対象オブジェクトを選択すると複数選択する事が出来ます。これは、レイヤーリストでも同様です。
シェイプ作成
シェイプとは、丸型や線型などのオブジェクトのことを指します。
シェイプの使い方は、ツールバーのinsertのShapeから選択します。
あとは、アートボード上でドラッグ&ドロップで描いていきます。(shiftを押しながらドラッグ&ドロップすると、均等な形に仕上がります。)
シェイプの色や形などはインスペクタで調整することが出来ます。
ショートカットは、insertを選択した時に各機能名の横に書いてあります。例えば、シェイプの楕円型だったら、「Oval O」と書いてあるのでショートカットは、Oになります。
テキスト作成
テキストは、insertのTextを選択します。ショートカットは、Tです。
作成したテキストを選択して文字の色や大きさを変更することが出来ます。
- 文字色
- フォントの種類
- 文字の大きさ
- 文字の配置
さらに他のオブジェクトの上に文字を乗せる事もできます。
コピー
Sketchでは、作成したオブジェクトだけではなく、アートボードごとコピーして使いまわすことが出来ます。
コピーする方法は簡単です。コピーしたい対象をドラッグ&ドロップして「command + C」でコピーします。
アートボードごとコピーする場合は、レイヤーリストのアートボード名か、キャンパスの方のアートボードを選択してから「command + C」でコピーします。(下の例ではpikawakaに当たる部分です。)
貼り付けるときは、「command + V」で貼り付けます。
オブジェクトの場合は、コピー対象と重なって張り付いている場合があるので、そのときは、「command + V」で貼り付けた後に「shift + 移動する方向の矢印」で移動、もしくはコピー対象にカーソルを当ててそのまま移動させてあげましょう。
マージンを測る
Sketchでは、アートボード・オブジェクト同士のマージンを簡単に測れる機能があります。
マージンを測りたい対象を選択した状態で「alt(option)」キーを押すとマージンが表示されます。
カーソルが対象アートボード・オブジェクトの位置にあるとマージンが表示されないので、カーソルの位置を対象の外に配置しましょう。
グループ化
複数のレイヤーを選択した状態でツールバーの「Group」もしくはレイヤーリストで「右クリック + Group selection」を押すとレイヤーをグループすることが出来ます。
ショートカットは、「 command + g 」です。
作成していると、レイヤーがたんだん増えてくるのでグループ化の機能は管理する上でもとても便利です。また、複数の関連するオブジェクトを移動や大きさを変更する時に一気に操作することが出来ます。
今回動画で使用したSketchの素材は、こちらからダウンロード出来るようになってますので、是非試して見てください。
また、Sketchのバージョン管理が出来るAbstractのプラグインも導入すると、作成した画像の管理しやすくなります。
Sketchについてもっと学びたい！という方は、以下の書籍で基礎から実践的な内容まで学ぶことができます。UIデザイナーとタイトルにありますが、内容は初心者向けなので安心して手に取ることができる１冊です。
Sketchの基本的な操作から実践的なノウハウまでを網羅的に解説した入門書！
この記事のまとめ
- Sketchは、アプリやWEBデザインのUIデザインに特化したMac専用ツールだよ
- 30日間無料トライアル付きで、とにかく動作が軽くて早い！
- 1つのファイルの中に複数のページを管理する事が出来る
