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

5-1. オブジェクトやアートボードの整列

インスペクタでの操作は、選択したオブジェクトなど対象によって変化します。利用頻度が多いのはシェイプやテキスト、シンボルを中心に覚えていきましょう。

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

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

1.オブジェクトの整列(Align Objects)

デザインをする際、複数のオブジェクトやアートボードは頻繁に上揃えや左揃えなど、整列(Align)の操作をおこなうことになります。複数選択したそれらのオブジェクトは以下のインスペクタの操作画面でアイコンに応じた整列をおこなうことができます。

図:整列操作をおこなうパネル


複数選択した際は、整列方向にもっとも近いオブジェクトを基準に整列されます。

図:左揃えの操作の例

現在の最新版のSketchでは、近接するオブジェクトやガイドの縦横軸に応じてガイドラインが表示されるためかなり操作性が向上しましたが、綿密なデザインの操作を完了するためには整列をきちんとおこないましょう。

ショートカットキーを独自で割り当てると操作もよりスピーディーになります。

2.アートボードに対するオブジェクトの整列

アートボード内のオブジェクト単体に対して整列(Align)行うと、アートボードそのものを基準とした整列となります。これにより、簡単にアートボードの上端や中心にオブジェクトを配置することができます。

図:アートボード基準に整列したオブジェクトの様子

また複数のオブジェクトであっても、[option]を押しながら整列すると同様に、アートボードを基準に整列ができます。

3.均等間隔での整列(Distribute Objects)

均等間隔で整列(Distribute Objects)のアイコンをクリックすると、複数の選択したアートボードやオブジェクトを均等間隔で分布させることができます。これは3つ以上のオブジェクトやアートボードを選択している時に有効になり、この状態で以下のいずれかのアイコンをクリックすると一定の基準で均等配置されます。

図:横均等配置と縦均等配置の様子

また複数のオブジェクトであっても、[option]を押しながら整列すると同様に、アートボードを基準に整列ができます。

4.パスにも適用できる整列操作

整列と均等配置の操作はパスにも適用できます。ベクターオブジェクトをダブクリックして現れるパスのポイントを複数選択して、オブジェクトやアートオブジェクトと同様の手順で整列操作をおこなえば操作が完了できますので試してみましょう。同時の図形を作成したり編集する際に便利な機能です。

図:パスのポイントへの整列や均等配置の適用

理解度チェック

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

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

2. Sketchの基本操作

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

4. ツールバーの操作

5. インスペクタの操作

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

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

8. Sketchをチームで使う

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

このレッスンの著者