画面構成と役割

2018-08-18

Sketchの画面を構成する「Canvas」「Inspector」「Layer List」「Toolbar」の役割について紹介します。Sketchの使い始めに、まずおさえておきたい内容です。

画面構成

Sketchの画面は、 Canvas Inspector Layer List Toolbar で構成されています。
それぞれ確認していきます。

Canvas

オブジェクトを描画できます。サイズは無限です。固定幅のほうが都合が良いので、通常はアートボードを作成して、その上で描画します。

ショートカットキーを利用して、拡大縮小ができます。

エクスポートしたときの本来の解像度で表示するには、ピクセルプレビューを有効にします。
View › Canvas › Show Pixels on Zoom で設定できます。

ルーラー/ガイド/グリッドを活用すると、レイヤーを正確に配置できるようになります。

Control + Rでルーラーの表示/非表示を切り替えられます。

Control + Gでグリッドの表示/非表示を切り替えられます。

Grid Settingsでグリッドの調整ができます。icon作成など1px単位の調整が必要な場合に設定を変更すると作業しやすくなります。

選択しているレイヤーの設定調整を行うのに利用します。
「整列」「回転」「塗りつぶし」などの操作ができます。

選択レイヤーによって、設定できる内容は異なります。

選択しているページの全てのレイヤーが表示されます。
「非表示」「ロック」「名前変更」「順序変更」などの操作ができます。

デザイン操作するためのツールが表示されます。
各ツールが何をするのか表すアイコンも表示されているので、直感的でわかりやすいですね。

以下のように、表示するツールを調整できます。利用頻度の高いツールを表示するといったことができますね。