【Affintiy】整列・配置を使ってオブジェクトの位置を揃える

TOMIX編集部

TOMIX編集部

株式会社トミックス

今回は Affintiy Designer / Photo の機能から、ツールバーに関するトピックです。
各種オブジェクトやテキストなどを配置した際に、きっちり端や真ん中にそろえる機能のご紹介です。

「整列」の機能と使い方

img211001_ss1

上図では、オブジェクトを不規則な位置に配置してあります。

img211001_ss2

オブジェクトを複数選択した状態で、ツールバーの整列をクリックすると、その下に整列に関するメニューが展開します。

これは選択したオブジェクトを、その範囲内で整列させる機能です。
例えば、整列:左揃えをクリックした場合は、選択したオブジェクトの中で一番左に位置するものを基準として整列させます。
また、整列:中央揃えをクリックした場合は、選択したオブジェクトの中心点を基準として整列させます。

すでにお気づきの方もいるかと思いますが、ボタンに描かれたアイコンがそれぞれの結果を表しています。
この整列機能がどのような結果をもたらすかは、下記の表をご参照ください。

水平方向に整列
機能 適用前 適用後
整列:左揃え img211001_0 img211001_1
整列:中央揃え img211001_2
整列:右揃え img211001_3
垂直方向に整列
機能 適用前 適用後
整列:上揃え img211001_0 img211001_4
整列:上下中央揃え img211001_5
整列:下揃え img211001_6

ちなみに、オブジェクトを一つだけ選択した場合は、アートボード、もしくはドキュメントの領域を基準にそれぞれ整列させることになります。

「配置」の機能と使い方

先ほどの整列のアイコンの右端に、水平方向に等間隔配置垂直方向に等間隔配置という二つのアイコンがあります。
これらは複数のオブジェクトを、その範囲内で縦方向、または横方向に等間隔で配置する機能です。

それぞれどのような結果になるかは、下記の表をご参照ください。

機能 適用前 適用後
水平方向に等間隔配置 img211001_7 img211001_8
垂直方向に等間隔配置 img211001_9 img211001_10

最後に

この機能はWEBデザインだけでなく、広告や資料の作成など、あらゆるデザイン作業において使用されます。

基本的にテキストやオブジェクトといった要素の位置は、きっちり揃えられていたほうが見た目が良くなります。
そのためにもこういった機能を使いこなし、クオリティを底上げする「キレイなデザイン」を心がけていきたいですね。

TOMIX編集部

TOMIX編集部

株式会社トミックス