初心者のためのSketch入門〜基礎編〜

山里啓一郎

デザイン

＃Sketch

山里啓一郎

最終更新日2017/07/28 投稿日2017/07/28

初心者のためのSketch入門〜基礎編〜

はじめに

背景

今回は業務でSketchを使う機会があり、初心者として1からの学習しました。
その上で、初心者に向けて「初心者のためのSketch入門〜基礎編〜」という記事にまとめていきます。

目的

Sketch初心者が、Sketchで成果物を作成できるようになること。

Sketchとは

概要

Sketchはベクタードローイングツール(※)で、主にUIデザインのツールとして使用されていて、WebやUIデザインの代表的なツールとして挙げられている

(※)ベクタードローイングツールとは...  
ベクタ形式の描画ツールのこと  
ベクタ形式は画像を数値で記録しているため、ピクセルごとに色や濃度の情報を記録しているラスタ形式とは異なる

他のツールと比較した図

	Sketch	Photoshop	Illustrator
パフォーマンス	○	△	△
スタイル機能	◎	△	△
解像度に応じた書き出し	◎	○	◎
日本語対応	×	◎	◎
プラグイン	◎	○	○
外部連携	◎	◎	×

吉竹遼(2017)「UIデザイナーのためのSketch入門&実践ガイド」ビー・エヌ・エヌ新社より引用

Sketchのメリット(抜粋)
- パフォーマンス => 作業中重くならない
- スタイル機能 => フォントや色を、異なるテキストや図形で、
  同じ設定のまま適用・管理できる機能
  　
Sketchのデメリット
- 日本語対応 => 日本語対応していないため、
  有志で意訳されたものを参考にしなければならない
  - 日本語の記事も少ない

今回使用する用語

Shape(シェイプ) =>　図形のこと
オブジェクト => キャンバス上のテキストやShapeのこと

今回使用するバージョン

44.1

Sketchをはじめる

今回作るもの

成果物として下記のようなボタンを作成する

サイズ:150×50
用途:Webページにて配置するボタン

Sketchを起動する
Sketchを起動します
ここでは、最近作成しているファイルやテンプレートが選択できる今回はWebページのボタンを作成するため「New Document」を選択し、作業を開始する
- 画面構成紹介
青. レイヤー => ここで制作物の管理を行っている
黄. キャンバス => 作業をする場所
赤. インスペクタ => 作成したものの数値など細かい設定を行える
ページ作成
新規ファイルを作成すると1つのページが作られるため、展開する (最初は折りたたまれている状態) 展開するには赤い部分を押下する (ちなみに新しいページを作りたい場合は「+」を押下すると作ることができる)
- オブジェクト作成
  次にボタンとなるオブジェクトを作成する
  　
Insertを押下する
Shape内のRounded(角丸)を押下する
キャンバス内でドラッグして作成する
今回はボタンを作成するため 150×50 のサイズで作成する (ちなみに[shift]を押しながらだと、正方形のオブジェクトが作成できる)
- 作成したオブジェクトの色を変更
  下記のようにオブジェクトを選択し、キャンバス右隣にあるインスペクタで
  カラーの調整を行う
- テキスト挿入続いてボタン上に表示するテキストを作成する
  　
メニューのテキストを作成し、ボタン内でドラッグを行う
テンプレートの文字を編集し、今回は下記のように「ボタン」という文字を入れる
デフォルトでは「Type something」が入力されているため書き換える
- 文字の調整を行う文字がボタン上の中心でない位置に配置されている
  これを成果物の通りにボタン中央に配置したい
  　
テキストのサイズを20に変更する
テキストを選択し、下記のようにインスペクタの「Size」を20にする(カラーはHex:07AEF7)
オブジェクトとテキストに余白からドラッグを行い、下記のように両方選択された状態にする
インスペクタ上部(上記右側の赤枠)の横に並んだマーク(Align Objects)の
「Align Horizontally」で横軸中央に「Align Vertically」で縦軸の中央に移動し、
文字が中央に配置される
- グループ化
  作成したオブジェクトとテキストをグループ化させる
  このグループ化をしていないと、Export(書き出し)を行った際に、
  オブジェクトとテキストが別々のファイルで書き出されてしまう
上記のように別々にExportされてしまう
オブジェクトとテキストを余白からのドラッグで両方選択された状態にする
　
メニューバー左の[Group]を押下する
- Export
  最後に作成したボタンのExportを行う
  Exportはインスペクタ下部のMake Exportableで設定できる
  　
Make Exportableの「+」を押下する
下記のような設定になっていることを確認
(ちなみに「+」を押下することで、同時に異なる設定のファイルを書き出すことが可能になる)
- 解説
  - Size => 書き出しサイズの設定
    (1x なら1倍、1w=Widthのピクセル数、1h=Heightのピクセル数)
  - Prefix/Suffix => 書き出すファイルの接頭辞と接尾辞を追加
  - format => 書き出すファイルのフォーマット設定
```
ベクター形式で書き出せるフォーマット
* PDF
* EPS
* SVG
```
Export Groupを押下する