UI/UXデザインツール『Sketch』入門

4-5. レイヤーの順序の入れ替えとグループ化

  • UIデザイン
  • UXデザイン
  • プロトタイピング

キャンバス上の操作ではレイヤーの前面・背面の重なりや、オブジェクトごとのグルーピングによって作業結果に大きく影響します。データの構造や後の編集作業に大きく影響するのでショートカットキーを含めて操作方法を身に着けておきましょう。

公開日:2019/07/02最終更新日:2019/07/02

1.レイヤーの前面・背面移動

3-2. ページ・選択対象の切り替えと、順番の並び替えで紹介した「選択したレイヤーの順番を入れ替える」方法と同様に、ツールバーでもレイヤーやオブジェクトの前面・背面の入れ替えをおこなえます。「Forward」では前面に「 Backward」では背面に1つずつ移動します。

ショートカット:

  • 前に持ってくる:[command] + [option] + [↑]
  • 後ろに持ってくる:[command] + [option] + [↓]
  • 最前面に持ってくる:[command] + [option] + [control] + [↑]
  • 最後部に持ってくる:[command] + [option] + [control] + [↓]

ツールバーでは1つずつしか移動ができないため、ショートカットキーで操作する習慣をつけておいたほうが作業スピードは早いです。また、すばやく任意の順番に移動したい場合は、レイヤーリストからドラック&ドロップで視覚的に操作可能ですのでこちらを利用しましょう。

同じ操作でも行いたい操作によっては、パネルによって微妙に操作性が変わってきますが目的に合わせて慣れていきましょう。

図:Forward / Backward 機能によるレイヤーの重なりの移動

2.オブジェクトやレイヤーをグループ化する

グループ化については2-2. キャンバスとオブジェクトを操作するでも触れました。細かい操作が必要なくなったデザインのパーツは、積極的にグループ化して情報をまとめておきましょう。ツールバーでも「グループ化」と「グループ化の解除」がおこなえます。

ショートカットキー([command]+[G] / [shift]+[command]+[G])

複数のオブジェクトを選択した状態で「Group」のアイコンをクリックするとグループ化「UnGroup」のアイコンをクリックするとグループ化の解除ができます。

図:グループ化されたボタンパーツ(左)とグループ化が解除されたボタンパーツ(右)

後に紹介する「シンボル化」で再利用性の高いデザインパーツを上手に管理したりコンポーネント(部品)として扱うために重要なステップになりますので、どの粒度でグループ化するかを考えながら使っていきましょう。

理解度チェック





UI/UXデザインツール『Sketch』入門

1. Sketchの概要とインストール

2. Sketchの基本操作

3. レイヤーリストの操作

4. ツールバーの操作

5. インスペクタの操作

6. シンボル・オーバーライド・ライブラリーの使い方

7. プロトタイプの作り方

8. Sketchをチームで使う

9. 料理写真投稿アプリを作ってみよう



このレッスンの著者