# Sketchでデザインを作成するときの基本的な操作方法

URL: https://webrandum.net/sketch-design-basic-operation/
公開日: 2022-05-09
更新日: 2022-05-08
カテゴリー: デザイン
タグ: Sketch
出典: Webrandum（著者: サイトウ マサカズ）

Sketchに関しての基本操作についてまとめておきます。

Sketch自体の説明に関しては[過去に記事](https://webrandum.net/sketch-1)にしているので、そちらをご覧ください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2018/04/Sketch_1.png)今から始めるUIデザインツールSketch入門 Sketchの特徴と使う理由https://webrandum.net/sketch-1Sketch(スケッチ)はUIデザインツールとして最近爆発的に利用されているmac OS専用のアプリケーションです。最近は色んなデザインツールが増えてきましたが、Sketchはその中でも比較的早く登場し、アップデートを重ねて進化してきました。何より軽く、プラグインを導入する事であらゆる制作が楽になったり、デザインから実装がスムーズに行えるという事で話題です。最近も僕はデザインをする時はSketchで行うシーンが増えてきました。今回はそんなSketchの特徴からインストールまでざっとまとめます。Sketchって何？SketchはオランダのB...](https://webrandum.net/sketch-1)

## ファイルの作成

まずはファイルの作成方法からです。

Sketchを起動するとスタート画面が開きます。

ここで「New Document」をクリックすると新規ドキュメントの作成ができます（command + Nでも可能）。

![新規ドキュメントの作成](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_1-16.png)

ちなみにサイドバーの［Templates］をクリックするとテンプレートの一覧が表示されます。

ダブルクリックすると、テンプレートとしてある程度必要なデザインが揃った状態でスタートできます。

![テンプレートを開く](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_2-23.png)

## デザイン編集画面

新規ドキュメントを作成すると、デザイン編集画面が開きます。

![デザイン編集画面](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_3-19.png)

それぞれエリア分けすると、下の画像のようになります。

![デザイン編集画面のエリア分け](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_4-15.png)

|  | 名称 |  |
| --- | --- | --- |

| 1 | ツールバー | 左側でツールの切り替え、右側ではその他のメニューが並んでいる |
| --- | --- | --- |

| 2 | レイヤーパネル | 要素の一覧が表示され、要素の重なり順やグループ分けを管理 |
| --- | --- | --- |

| 3 | キャンバス | デザインを作成するメインの画面 |
| --- | --- | --- |

| 4 | プロパティパネル | 選択した要素の設定が表示される |
| --- | --- | --- |

Adobe XDやFigmaと同じようなレイアウトなので、それらを使ったことがある人なら何がどこにあるのか、なんとなく分かると思います。

## 基本操作

### ツール

用意されてあるツールは下記の通りです。

ツールバー左側の「＋」アイコンから切り替えられますが、ショートカットキーも用意されていて、すばやく変更できます。

| ツール名 | キー | 内容 |
| --- | --- | --- |

| 長方形ツール （Rectangle） | R | 長方形の作成ができる |
| --- | --- | --- |

| 楕円ツール （Oval） | O | 楕円の作成ができる |
| --- | --- | --- |

| 角丸長方形ツール （Rounded） | U | 角丸長方形の作成ができる |
| --- | --- | --- |

| 直線ツール （Line） | L | 直線の作成ができる |
| --- | --- | --- |

| 矢印ツール （Arrow） |   | 矢印の作成ができる |
| --- | --- | --- |

| 三角形ツール （Triangle） |   | 三角形の作成ができる |
| --- | --- | --- |

| スターツール （Star） |   | 星形の作成ができる |
| --- | --- | --- |

| 多角形ツール （Polygon） |   | 多角形の作成ができる |
| --- | --- | --- |

| ベクターツール （Vector） | V | ベジェ曲線で線の作成ができる |
| --- | --- | --- |

| ペンツール （Pen） | P | フリーハンドで線の作成ができる |
| --- | --- | --- |

| テキストツール （Text） | T | 文字の入力・編集ができる |
| --- | --- | --- |

| 画像を配置 （Image…） |   | 画像を選択して配置できる |
| --- | --- | --- |

| アートボードツール （Artboard） | A | デザインの表示領域である「アートボード」を作成したり、編集できる |
| --- | --- | --- |

| スライスツール （Slice） | S | 画像の書き出し領域を作成できる |
| --- | --- | --- |

| ホットスポットツール （Hotspot） | I | ホットスポットの作成ができる |
| --- | --- | --- |

| 拡大ツール （Zoom） | Z | 画面の表示拡大ができる （Zを押している間だけ切り替わり、離すと1つ前のツールに戻る） |
| --- | --- | --- |

### アートボードの作成

アートボードツールに切り替えてドラッグしても作成できますが、アートボードツールに切り替えると右サイドバーに候補が表示されます。

![アートボードの作成](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_5-11.png)

これをクリックすると目的のサイズのアートボードが作成できます。

デザインはこのアートボード内に要素を追加して作成します。

### 画面の移動と拡大・縮小

spaceを押しながら画面上をドラッグするとキャンバス内の移動ができます。

そしてcommandを押しながら下へスクロールすると拡大し、上へスクロールすると縮小します。

Zを押している間は拡大ツールに切り替わるので、拡大ツールの状態でクリックしたり、拡大したい範囲をドラッグでも拡大できます。

他にも、ショートカットキーがいくつか用意されているので使いそうなものは覚えておきましょう。

| 拡大・縮小 | キー | 内容 |
| --- | --- | --- |

| Zoom In | command + + | 画面が拡大される |
| --- | --- | --- |

| Zoom Out | command + – | 画面が縮小される |
| --- | --- | --- |

| Actual Size | command + 0 | 拡大率100%になる |
| --- | --- | --- |

| Fit Canvas | command + 1 | デザイン全体が俯瞰できる拡大率になる |
| --- | --- | --- |

| Selection | command + 2 | 選択要素で画面いっぱいになる |
| --- | --- | --- |

| Artboard | command + 4 | アートボードで画面いっぱいになる |
| --- | --- | --- |

### デザインの作成

あとはツールを使って、アートボード上に要素を追加していきます。

試しに長方形ツールで長方形を作成すると、右側のプロパティパネルに設定項目が表示されます。

「位置」「サイズ」「色」「ボーダー」「エフェクト」など必要な項目はすべてここにあるので、見た目の設定は基本的にここで行います。

![要素の追加](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_6-7.png)