Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで

今回はSketchのパス関連の操作についてまとめておきます。
パス描画系のツール
パス描画系のツールは下記の4つです。
| ツール名 | キー | 内容 |
|---|---|---|
| 直線ツール (Line) | L | 直線の作成ができる |
| 矢印ツール (Arrow) | 矢印の作成ができる | |
ベクターツール (Vector) | V | ベジェ曲線で線の作成ができる |
| 鉛筆ツール (Pencil) | P | フリーハンドで線の作成ができる |
直線のみ作成できる「直線ツール」「矢印ツール」と、曲線にも対応した「ベクターツール」「鉛筆ツール」に大きく分かれます。
直線ツールと矢印ツールの使い方
直線ツールと矢印ツールの使い方はシンプルで、ドラッグすると直線が引けます。
ベクターツールやペンツールとは違って線を曲げることは不可能で、あくまで1本線引くことができるツールになっています。

shiftを押しながらドラッグすると縦横や斜め45度でキレイに線が引けます。
ベクターツールの使い方
ベクターツールは「アンカーポイント」と呼ばれる点をクリックして繋げていくことで直線が描けます。
Vを押して選択モードに切り替えたり、escを押すと途中で抜けられます。

クリックではなくドラッグをすると、アンカーポイントからハンドル(方向線)が出てきて、アンカーポイントを基点に曲線が描けます。
この線はベジェ曲線といって、フリーハンドではなくアンカーポイントと呼ばれる点を繋ぐことで図形を描画する方法です。
フリーハンドは描き方によっては線がガタガタになってしまいますがベジェ曲線ではキレイな線が引けます。
あとからの編集も簡単で、点を移動させたり調整することで微調整が効きやすいのが特徴です。
ちなみに、shiftを押しながらで縦横や斜め45度でアンカーポイントやハンドルが操作できます。
ハンドルに関してはoptionを押しながらドラッグすると、ハンドルの片方のみを操作できます。
開始点と終了点を繋げれば図形になります。
ちなみに、繋がっていない状態でも塗り(Fill)は有効化できますが、開始点から終了点まで真っ直ぐ線が入ったような状態になります。

鉛筆ツールの使い方
鉛筆ツールはベクターツールと違って、ドラッグでのみ利用可能なフリーハンドのツールです。
マウスを離したタイミングでガタガタになっている線は少しだけ補正してくれます。

鉛筆ツールの場合は、shiftを押しても縦横や斜め45度でガイドされないので注意が必要です。
本当にフリーハンドのツールになります。
線のスタイル設定
[Borders]プロパティで線のスタイル設定がします。
色の設定以外に「線の太さ」と「線の位置」を指定します。
![[Borders]プロパティ](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_5.png)
右上の歯車アイコンをクリックすれば、下にさらに細かい情報が表示されます。


Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
ブラウザ上で動作するデザインツール「Figma」のアカウント作成から必要最低限の設定
Figmaでデザインデータ上の画像を圧縮してファイルサイズを軽くする「Downsize」
Figmaでテキストの一括置換を行うプラグイン「Find and Replace」
FigmaのSearch Menuを使用して必要なメニュー・コマンドをすばやく実行する
Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法
Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
Photoshopでファイルを開いたとき「予期せずにファイルの末尾に達しました。」と表示される場合の対処法
Sketchの図形周りの基本操作|図形の作成方法から描画に関する細かい部分まで
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
ウェブ開発時のテスト環境と本番環境の取り違えを防ぐChrome拡張機能「Environment Marker」
【2026年版】Karabiner-Elementsで実現する右commandキー活用のススメ
Bartender ProのTop Shelf機能でできること
高機能なスクリーンショットアプリ「CleanShot X」
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」