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

3-1. レイヤーリストの機能と基本操作

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

Sketchの左側のパネルに表示される『レイヤーリスト』では、作成したページ・アートボード・オブジェクトなどの一覧が常に表示されており、効率的に管理することができます。各レイヤーのオブジェクトの状態を制御・管理する項目を使いこなして、常に整頓して作業しておくことで制作全体の効率化に繋がってくるので、ぜひ覚えていきましょう。

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

1.レイヤーリストに表示されている項目の説明

レイヤーリストには、ページ・アートボード・レイヤーが並んでいますが、中でもレイヤーは状態によって見え方が異なります。ページ内にどんなオブジェク トがあるのかを見分けられるようになると、ファイルの構造をいちはやく理解できるようになります

レイヤーリストでは、上下の並びが重なりの順序となっており、上にあるほど前面のレイヤー、下にあるほど背面のレイヤーとして表示されます。

図:レイヤーリストエリアの各項目説明

2.ページの展開と収納を切り替える

ページ名の右にあるアイコンをクリックすると、ページリストの展開と収納を切り替えられます。アートボードやレイヤーをより多く表示したい場合は収納するとよいでしょう。

図:ページの展開と収納を切り替える様子

3.レイヤーの展開と収納を切り替える

アートボードの左にあるアイコンをクリックすると、レイヤーの展開と収納を切り替えられます。作業しないアートボードを収納しておくことで、作業時のレイ ヤーリストがすっきりします。

図:アートボード内のレイヤーの展開と収納

4.ページを複製する/削除をする

ページを複製/削除する場合は、ページリストを展開した状態で該当するページをクリックして選択します。

選択状態で右クリックをすると「Duplicate Page(複製)」 と「Delete Page(削除)」から、それぞれ複製と削除ができます。複数選択した状態でも行えますが、全てのページを選択した状態では削除はできません。

図:ページの複製/削除の様子

理解度チェック





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

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

2. Sketchの基本操作

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

4. ツールバーの操作

5. インスペクタの操作

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

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

8. Sketchをチームで使う

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



このレッスンの著者