メインコンテンツまでスキップ
03.18 ㅣ 整列・間隔測定の追加

整列・間隔測定の追加

エディターで要素をより正確に配置・操作できるように、ガイドライン、サイズ調整、回転、整列機能 が改善されました。

ひと目でわかる

新規1

要素の間隔を数値で確認これまでは要素間の間隔を目分量で合わせる必要がありましたが、ショートカット1つで正確な間隔を確認できるようになりました。
関連ガイド整列と配置

これまでは要素間の間隔を目分量で合わせる必要がありましたが、ショートカット1つで正確な間隔を確認できるようになりました。

要素を選択した状態で Altキー(Mac: Optionキー)を押すと、周囲の要素との間隔がpx単位で表示されます。

  • 縦の間隔は 右側、横の間隔は 上側 に表示されます。

改善2

サイズ調整時の数値表示これまでは要素のサイズをドラッグで調整するとき、どれだけ変わったかを別途確認する必要がありましたが、ドラッグしている間に変化する数値がリアルタイムのツールチップで表示されるようになりました。
関連ガイド整列と配置

これまでは要素のサイズをドラッグで調整するとき、どれだけ変わったかを別途確認する必要がありましたが、ドラッグしている間に変化する数値がリアルタイムのツールチップで表示されるようになりました。

  • 角のハンドラー をドラッグ → 比率を維持したままサイズ調整
  • 外枠のハンドラー をドラッグ → 一方向のみサイズ調整(比率維持なし)
  • 複数の要素を選択しても同じように動作します。
回転時の角度表示これまでは要素を回転するとき何度回転したか分かりにくかったのですが、ドラッグしている間に現在の角度(例: 90°)がリアルタイムで表示されるようになりました。
関連ガイド整列と配置

これまでは要素を回転するとき何度回転したか分かりにくかったのですが、ドラッグしている間に現在の角度(例: 90°)がリアルタイムで表示されるようになりました。

  • 角のハンドラーの外側にマウスを動かすと、回転カーソルが表示されます。
  • 複数の要素を選択すると、グループの中心を基準に一緒に回転します。

新規1

ページ・グループの整列これまでは複数の要素の位置を1つずつ直接合わせる必要がありましたが、整列と間隔分配機能で一度に整えられるようになりました。
関連ガイド整列と配置

これまでは複数の要素の位置を1つずつ直接合わせる必要がありましたが、整列と間隔分配機能で一度に整えられるようになりました。

ページ基準の整列​

要素を選択して右クリック > ページ整列 で、ページを基準に位置を合わせられます。

  • 横: 左 / 中央 / 右
  • 縦: 上 / 中間 / 下
要素の整列​

複数のレイヤーを選択したあと、「もっと見る」(···)> 要素整列 で、レイヤーの位置を合わせられます。

  • 左: 最も左のレイヤーを基準に整列
  • 中央: すべてのレイヤーの平均位置で中央に整列
  • 右: 最も右のレイヤーを基準に整列
  • 上: 最も上のレイヤーを基準に整列
  • 中間: すべてのレイヤーの平均位置で中央に整列
  • 下: 最も下のレイヤーを基準に整列
要素の間隔​

複数のレイヤーを選択したあと、「もっと見る」(···)> 要素間隔 で、レイヤー間の余白を調整できます。

  • 縦間隔の分配: レイヤー間の縦の余白を均等に揃えます。
  • 横間隔の分配: レイヤー間の横の余白を均等に揃えます。
  • カスタム間隔: 希望する数値(px)を直接入力するか、+/- ボタンで1pxずつ調整できます。
備考

レイヤー間の間隔がバラバラの場合は Mixed と表示されます。この状態で +/- を押すと、平均値に統一されてから調整されます。

GENCYチーム一同