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

5-4. Resizing

アートボードもしくはグループレイヤーの拡大・縮小に関するオブジェクトの位置やサイズの振る舞いを設定できます。

  • UIデザイン
  • UXデザイン
  • Webデザイン

公開日:2020/01/06最終更新日:2020/01/06

1.Resizingとは

Resizingはグループレイヤーやシンボルをサポートする機能の一つです。WebサイトやアプリケーションのUIデザインをする際は、固定化された画面設計だけではなくさまざまな画面サイズや解像度に応じたデザインをすることが必要になってきます。

このような状況に対応するため、1つのシンボルやグループレイヤーなどの部品(コンポーネント)で縦横サイズの可変に対応できるようにするのが「Resizing」の機能です。 アートボード内でシンボルもしくはオブジェクトを2つ以上格納しているグループレイヤー内のオブジェクトを選択すると、インスペクタに「Resizing」の項目が表示されます。

図:Resizing機能の説明

2.グループやシンボルの要素の

Resizingパネル内の「Pin to Edge」では選択したオブジェクトの固定位置の設定ができます。その隣の「Fix Size」では幅と高さの固定が指定できます。 これらを組み合わせることで、シンボル/グループレイヤーがのサイズが伸縮した時のオブジェクトの振る舞いを制御することができます。

通常グループ化されたオブジェクト内の入れ子のオブジェクトは大元のオブジェクトの親要素の可変に伴い相対的にカタチが変形してしまいますが、これが画像や円形だった場合は不都合が生じてしまいます。

これらの可変設定を使いこなすことで、画面サイズなどに対して対応が柔軟なシンボルたグループを作成することができます。シンボルの入れ子をしている場合は、親シンボル側ではなく、子要素側にResizingの設定をすると上手にコントロールできます。

図:位置やサイズを固定するResizing設定

理解度チェック

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

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

2. Sketchの基本操作

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

4. ツールバーの操作

5. インスペクタの操作

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

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

8. Sketchをチームで使う

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

このレッスンの著者