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

5-2. 位置・サイズの変更

選択中のアートボードやオブジェクトの座標やサイズなどが変更・操作できる基本的なパネルです。シェイプやパスの編集時にはアンカーポイントの座標が表示されます。

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

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

1.位置の変更(Position)

アートボード/オブジェクト選択中以下のパネルが表示され、座標やサイズが表示されます。座標の基準点は左上にな
り、Xが横軸、Yが縦軸の座標を示しています。

図:位置変更をおこなうパネル

複数のオブジェクトを管理しはじめると、それぞれの位置情報が煩雑になりやすいので、前のセクションで説明した「整列」やガイドを活用しながらデザイン制作を進めていきましょう。

2.サイズの変更(Size)

Widthは横幅・Heightは縦幅を示し、パネル内の値を調整するとオブジェクト/アートボードのサイズが変化します。数値の単位はピクセルで、入力欄内ではカーソルを↑↓で動かすと1pxずつ調整ができます。デフォルトでは整数ですが小数点や%での入力も可能で[Shift]を押した状態だと10px単位で、[option]を押した状態だと0.1pxずつ調整ができます。

また、Width と Height の間にある錠前アイコンをクリックすると、固定比率と自由比率を切り替えられます。固定比率時は、数値の変更やアンカーポイントのドラッグによるリサイズをおこなっても比率を保持されます。

図:サイズ変更をおこなうパネル

シェイプ作成時に [Shift] キーを押しながら作成すると固定比率にデフォルトの値が設定され、自由にドラッグして作成すると自由比率がデフォルトとして適用されます。 なお、ScaleによるリサイズBorder(線)の幅やテキストのサイズも 相対的に変化しますが、Sizeを利用したリサイズではこれらは変化しませんので注意しましょう。

3.サイズ値入力時の工夫

アートボードやオブジェクトのサイズを変更する際には、値入力欄の数値に接尾辞や四則演算を適用するとより便利に操作をすることができるようになります。

暗算でオブジェクトのサイズを計算して並べるなどはかなり手間な計算を用したりすることもありますので覚えておいて損はないです。

- Width + r :基準点を右上にリサイズ
- Width + c :基準点を上部中心にリサイズ
- Height + r :基準点を左下にリサイズ
- Height + c :基準点を左側中心にリサイズ

図:値に演算を入れた工夫

四則演算の場合は、例えばWidth + 20pxにすると基準値に対して20px大きい値が適用され「-」の場合は逆に減ります。「*」は数値に乗算され「/」だと割り算されます。

理解度チェック

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

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

2. Sketchの基本操作

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

4. ツールバーの操作

5. インスペクタの操作

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

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

8. Sketchをチームで使う

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

このレッスンの著者