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

3-2. ページ・選択対象の切り替えと、順番の並び替え

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

作成されたアートボードやレイヤーは基本的に作成された順でレイヤーリストに表示され、上位に位置するものが一番手前に表示されることになります。作業を効率化したりレイヤーを上手に管理するために、表示順をきれいに並べることも重要です。このレッスンではページ・レイヤーの選択方法と、レイヤーの順番の並べ替えについて解説をします。

公開日:2019/05/16最終更新日:2019/05/16

1.ページを切り替える

編集したいページを切り替えるときは、対象のページをクリックするか、以下のショートカットキーで操作できます。

ショートカット:[fn] + [↓]、[fn] + [↑]

page upキーとpage downキーがある場合は、そちらでも操作可能です。

図:ページ選択の切り替えの様子

2.選択対象を切り替える

編集したいレイヤーを選択したい場合は、レイヤーリスト上でクリック操作するか、以下のショートカットキーで操作できます。

ショートカット:オブジェクトを選択した状態 + [tab] or [shift] + [tab]

オブジェクトを選択した状態で[tab] を押すと、レイヤーリストで1つ下のレイヤーが選択されます。 アートボードもオブジェクトと同様に、[tab] / [shift] + [tab]で上下のアートボードの選択切り替えできます。

レイヤーやオブジェクトの順番が変わるわけではないので注意しましょう。

図:選択切り替えの様子

3.選択したレイヤーの順番を入れ替える

レイヤーリスト上でページ、アートボード、レイヤーをドラッグすると、上下の順番を入れ替えることができます。これは以下のショートカットキーでも操作できます。

ショートカット:

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

ドラッグすると移動先に青い線が出現し、グループ内にドラッグする時は青い線が短くなります。レイヤーやオブジェクトに限ってはアートボード内でショートカットを利用することで順番をすばやく切り替えることができます。

図:レイヤーの並べ替えの様子

シェイプのみ、レイヤー同士を重ねるようにドラック&ドロップすると「複合シェイプ」に変化します。

図;複数のシェイプを重ねて「複合シェイプ」に変化させる様子

理解度チェック





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

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

2. Sketchの基本操作

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

4. ツールバーの操作

5. インスペクタの操作

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

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

8. Sketchをチームで使う

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



このレッスンの著者