3.レイアウトの設定

(1). レイヤー間の距離を測る

これらのオブジェクト間の距離は、キャンバス上で測定することができます。

• ベクターシェイプとパス
• テキストレイヤー
• フレーム
• コンポーネント
• グループ
• ガイドライン

オブジェクト間の距離を測る:

対象オブジェクトが他のフレーム、グループ、コンポーネントにネストされていても、以下の手順で距離を測定することができます。

1. キャンバス上の最初のオブジェクトを選択します。
2. WindowsではAltキー、MacOSでは⌥Optionキーを押してください。
3. 2番目のオブジェクトにマウスを合わせます。

すると、Pixsoはオブジェクトとオブジェクトの間に赤い線を表示し、その下に距離を表示します。

ネストされたレイヤー間の距離を測る：

1. キャンバス上の最初のオブジェクトを選択します。
2. WindowsではCtrl + Alt、MacOSでは⌘Command + ⌥ Optionのキーを押してください。
3. 2番目のオブジェクトにマウスを合わせます。

すると、Pixsoはオブジェクトとオブジェクトの間に赤い線を表示し、その下に距離を表示します。

(2) . オートレイアウト

オートレイアウトは、フレームまたはコンポーネントに追加できるプロパティです。これにより、あらゆるサイズやレイヤーに適応し、その変化に応じてデザインを再配置することができます。新しいレイヤーを追加したり、新しいデザインに合わせたりする必要がある場合、オートレイアウトは非常に便利です。

オートレイアウトは、さまざまな場面で応用できます。

• テキストの変更に伴ってサイズ変更されるボタンを作成します。
• プロジェクトのイテレーションに適応するリストを作成する。
• オートレイアウトフレームを利用して、フルインターフェイスを作成します。

オートレイアウトの追加方法

自動レイアウトは、フレームにのみ対応しています。レイヤにフレームがない場合、自動レイアウトを適用すると、Pixsoは、現在のすべてのコンテンツを含むフレームを自動的に作成します。

下のオブジェクトを選択して、オートレイアウトを適用できます。

• 新しいフレームまたは空白のフレーム
• 現在のすべてのコンテンツが含まれるフレーム
• コンポーネントまたはコンポーネントグループ
• レイヤーまたはオブジェクトグループ

その方法をご紹介します。

1. ショートカットキー Shift + A を使用します。

2. 右側パネルの「自動レイアウト」セクションの横にある「＋」アイコンをクリックします。

3. フレームまたはオブジェクトを右クリックし、「自動レイアウトを追加」を選択します。

オートレイアウトプロパティ

オートレイアウトを適用したフレームは、一般的なフレームとは異なるプロパティを持ちます。オートレイアウトを適用すると、右側のパネルにいくつかの変化が見られます。

オートレイアウトでは、フレームに対して下の操作を行うことはできません。

• フレームにレイアウトグリッドを追加します。
• フレーム上の任意のオブジェクトに拘束を追加します。
• フレーム上の任意のオブジェクトにスマートセレクトを適用します。

1. 方向性

オートレイアウトは、縦方向と横方向のどちらか一方にのみ対応しています。両面でデザインする必要がある場合は、オートレイアウトをネストすることができます。

2. スペーシング

オートレイアウトの異なる方向に基づいて、異なる方向のオブジェクト間の距離を調整することができます。

3. マージン

オートレイアウトでオブジェクトとフレームの余白距離を調整することができます。4方向の距離が同じ場合はTh絶対値、異なる場合はブレンド値が表示されます。アラインボタンをクリックすると、4方向の値を個別に調整することができます。

余白を調整した後、オートレイアウト付きのフレームは、内部要素の変化に応じて自動的にサイズを変更します。

4. 分布とアライメント

集中的に分布:入力されたスペーシングの値に基づいて分布させる。

左上、中央上、右上、左中、中央、右中、左下、中央下、右下に整列します。

均一な分布：オブジェクトは等間隔に配置され、フレームの大きさに応じて自動的に調整されます。

オートレイアウトの向きに応じて、異なる方向に整列します。

水平方向の自動レイアウト：左、中央、右。

垂直方向のオートレイアウト：上、中央、下。

5. 制約条件を調整する

自動レイアウトにおける制約は、自動レイアウトを適用したフレームに対する制約と、自動レイアウトを適用したオブジェクトに対する制約に分けられる。

オートレイアウトのフレームの制約

幅/高さを固定：ユーザーが特定の幅/高さの値を設定することができます。

コンテンツを囲む：フレーム内のオブジェクトに応じて、幅/高さを自動的にリサイズします。

オートレイアウトで適用されるオブジェクトの制約条件

幅/高さを固定：ユーザーが特定の幅/高さの値を設定することができます。

コンテナを塗りつぶす： オブジェクトの縦横を水平または垂直に埋めて、フレームをいっぱいにする。

オブジェクトの追加、編集および削除

1. オートレイアウトでフレームにオブジェクトを追加

オートレイアウトで、任意のレイヤーやオブジェクトをフレームに追加できます。

フレーム上でオブジェクトをクリック＆ドラッグします。

青いインジケータを使って、オブジェクトを置く場所を選択します。

2. ネスト・オートレイアウト

オートレイアウトを水平方向、垂直方向にネストさせることで、より複雑なデザインを作成することができます。ネストされたオートレイアウトは、互いに影響し合うことなく、オブジェクトプロパティとフレームプロパティの両方を所有します。

3. オブジェクトの繰り返し追加

オートレイアウトのフレームでは、Ctrl + D（Command + D）で同じ内容のコピー＆ペーストが素早くできます。

4.オブジェクトの位置を調整

オートレイアウトのフレームでは、矢印キーでオブジェクトの位置を素早く切り替えることができます。

5. オブジェクトの削除

自動レイアウトを適用したオブジェクトをフレームから削除したり、直接削除したりすることができます。

オートレイアウトの削除

右側のパネルにある「-」アイコンをクリックすると、自動レイアウトが削除されます。自動レイアウトを適用した際にフレームが自動的に作成された場合、自動レイアウトを解除してもフレームは削除されません。

(2) . スマートセレクト＆アレンジ

スマートセレクトは、2つ以上のレイヤーの配置や間隔をすばやく調整することができます。スマートセレクトを使うと、以下のようなことが可能です。

レイヤー間の垂直・水平方向の間隔を均一にする。

選択したレイヤーから、均一または不均一なグリッドを作成します。

行、列、グリッドレイアウトでレイヤーを並べ替えたり、並び替えたりすることができます。

選択したレイヤーをコピーまたは削除し、他のレイヤーを並べ替えます。

スマートセレクトは、複雑な作業を簡素化します。これにより、レイアウトの作成と配置をより迅速に行えるだけでなく、時間を大幅に節約できます。

スマートセレクトを使う

スマートセレクトを使用するには、すべてのレイヤー間の間隔が等しくなければなりません。また、これらのレイヤーはX軸、Y軸、またはその両方で重なっている必要があります。

レイヤー間の間隔が不揃いな場合は、アレンジツールを使ってレイヤーを並べ替え、スマートエリアを作成することができます。

スマートセレクトは、1次元と2次元の両方向の設定をサポートしています。1次元方向のスマートセレクションは、レイヤーを線や列に並べることができ、2次元方向のスマートセレクションは、グリッドやテーブルで並べたレイヤーを、線や列に並べることができます。

1.スマートセレクトを適用したい任意のレイヤーを選択し、これらのレイヤーは同じサイズと形状である必要はありません。選択できるのは、単一レイヤー、グループ、フレーム、コンポーネントです。

2.Pixsoは選択範囲にスマートアンカーを追加し、各オブジェクトの中心にピンクの円環が表示されます。

3.選択オブジェクトにマウスを乗せると、新しいピンク色のアンカーが表示されます。このピンクのアンカーで、レイヤー間の垂直方向や水平方向の間隔を調整することができます。

スマートセレクト後のレイヤー調整

スマートセレクトを使用すると、その効果の下にあるレイヤーを変更することができます。つまり、選択範囲を維持したまま、レイヤーの移動、追加、削除を同時に行うことができます。具体的には、以下のようなことができます。

• スペーシングの調整
• レイヤーの移動・並び替え
• レイヤーのコピー
• レイヤーのサイズ変更
• レイヤーの削除

選択範囲の中で、調整したいレイヤーをマークすることができます。マークアンカーはピンクの円環です。

1. スペーシングの調整

スマートアンカーを使用するか、右側のパネルで異なる値を設定することにより、選択したレイヤー間の垂直または水平方向の間隔を調整することができます。

スマートアンカーを使って、ドラッグで間隔を調整できます。

右側のパネルで一定の数値を設定することができます。

2. レイヤーの並べ替え・再調整

スマートセレクトでは、レイヤーの順番や位置を変更することも可能です。

レイヤーの中央にあるピンクの円環をクリックすると、そのレイヤーをマークすることができます。

スマートセレクトで目的の位置にドラッグします。

ドロップしてレイヤーの新しい位置を確認します。その後、元の位置が残ります。

3.レイヤーのコピー

スマートセレクトでは、任意のレイヤーをコピーすることができます。

レイヤーの中央にあるピンクの円環をクリックすると、そのレイヤーをマークできます。

ショートカットキーを押します。

MacOS：Command+D

Windows：Ctrl+D

レイヤーをコピーし、元のレイヤーの横に貼り付けます。スマートセレクトの他のレイヤーは、それに適応するように移動されます。

4. レイヤーのサイズ変更

スマートセレクトで選択したレイヤーのサイズを変更し、レイヤー間の間隔を同じにすることができます。

5. レイヤーの削除

スマートセレクトでも、レイヤー単体の削除は可能です。

レイヤーの中央にあるピンクの丸をクリックすると、そのレイヤーをマークすることができます。

DeleteキーまたはBackspaceキーを押して、削除します。

スマートセレクト内の他のレイヤーは、間隔を埋めるように再配置されます。

(4) . 定規

レイヤーやオブジェクトを正確に位置決めしようとするとき、定規が役に立ちます。

定規の追加：

事前に定規が有効になっていることを確認する必要があります。キャンバス上に定規が表示されていない場合は、ショートカットキーShift + Rを押してください。

定規の左側または上側から、マウスを押しながらキャンバスに向かってドラッグします。定規を目的の場所にドロップすると、定規の作成が完了します。定規は、キャンバスやフレームに追加することができます。

定規の削除：

定規をクリックしてドラッグして元の位置に戻す以外に、定規ラインを選択してDeleteまたはBackspaceキーを押して削除することもできます。

(5) . レイアウトグリッド

レイアウトグリッドとは？

レイアウトグリッドは、フレーム内のオブジェクトを整列させるのに役立ちます。これは、デザインに視覚的な構造を提供するものです。これを使えば、さまざまなプラットフォームやデバイスでのデザインを同じに保つことができます。

レイアウトグリッドはピクセルグリッドに依存しないので、特定の解像度比やサイズに依存することもないのです。

レイアウトグリッドを適用できるのは、フレームのみです。フレームはトップフレームでも、他のフレームにネストされたフレームでもかまいません。

レイアウトグリッドを使用すると、以下のことが可能になります。

• 複数のプラットフォームで一貫性を保つこと。
• レイアウトを定義する際の制約を少なくする。
• ワイヤーフレームのレイアウト定義に費やす時間を短縮します。
• ギャラリーやアイコン、ページ全体のレイアウトなど、さまざまなレイアウト技術を適用できます。

レイアウトグリッドを使用するには、フレームまたはコンポーネントを選択し、右側パネルのレイアウトグリッドのセクションの横にある「+」アイコンをクリックする必要があります。

複数のレイアウトグリッドを作成し、多次元的な構造設計を実現することができます。

レイアウトグリッドのプロパティ：

レイアウトグリッドは、グリッド、ライン、ロウの3つのプロパティを持っています。

グリッドを使用する場合は、グリッドのサイズと色を設定することができます。

また、行数、種類、幅、マージン、行間を設定することができます。

グリッドの種類は、左、右、中央、ストレッチの4種類から選択できます。ストレッチに設定すると、Pixsoはマージンとスペーシングのルールに基づいてフレームを広げます。タイプ設定は、常にフレーム内のオブジェクトの制約で使用されます。

レイアウトグリッドの可視性の設定：

ショートカットキーでレイアウトグリッドの表示／非表示を設定できます。

Mac OS：Command+G

Windows：Ctrl+Shift+4

(6) .制約条件

この制約は、他のオブジェクトのサイズ変更に対してレイヤーがどのように反応するかを決定します。

水平方向の制約

X軸に沿ってフレームのサイズを変更したとき、水平方向の制約がレイヤーの動作を定義します。

• 左側のレイヤーを維持し、フレームの左側としてとらえます。
• レイヤーの位置は、フレームの右側に対して相対的に保ちます。
• 左側と右側は、フレームの側面に対するレイヤーのサイズを維持します。このため、サイズ変更時にレイヤーがX軸に沿って大きくなったり小さくなったりすることがあります。
• レイヤーを中央に配置し、フレームの水平方向の中心からの相対的な位置を維持します。
• スケーリングは、フレームサイズに対するパーセンテージでレイヤーのサイズと位置を定義します。サイズを変更しても、このパーセンテージは維持されます。

垂直方向の制約

Y軸に沿ってフレームのサイズを変更したとき、垂直方向の制約がレイヤーの動作を定義します。

• レイヤーをフレームの上部に相対させます。
• レイヤーをフレームの底に相対させます。
• レイヤーをフレームサイズの上下左右に相対的に保つことで、レイヤーのサイズを変更した際にY軸方向に大きくなったり小さくなったりすることがあります。
• レイヤーを中央に配置し、フレームの垂直方向の中心からの相対的な位置を維持します。
• 制約比率は、フレームサイズに対する割合として、レイヤーのサイズと位置を定義します。そして、サイズを変更してもこの比率を維持します。

制約の使用法

フレーム内の任意のレイヤーに制約を適用することができます。フレーム外のレイヤーや、オートレイアウトのフレーム内のレイヤーには適用できませんので、ご注意ください。

• 他のフレームにネストされたフレームに制約を適用することができます。
• レイヤーには、水平制約と垂直制約の両方を適用することができます。
• グループには制約を適用できません。

レイヤーに制約を設定：

1.フレーム内のレイヤーまたは親レイヤーを選択すると、キャンバス上の青い破線で現在適用されている制約が表示されます。

2. 右サイドパネルのコンストレイント設定で、垂直方向と水平方向のコンストレイントを調整します。

3. ドロップダウン・メニューでレイヤーの制約を設定します。また、インタラクティブな表の行をクリックして制約を選択することもできます。

すべてのレイヤーを同じ位置に配置したい場合は、「スクロール時の位置を固定する」オプションにチェックを入れてください。

制約条件を無視：

フレームやレイヤーのサイズを変更したいが、制約に適用したくない場合があります。この場合、ショートカットキーを使用すると、現在のレイヤーに適用されている制約を無視することができます。

MacOS: Command （サイズ変更中に押します）

Windows: Ctrl （サイズ変更中に押します）