デザインへのオートレイアウトの追加

2025/10/22 9:152025/11/5 15:03

機能概要

オートレイアウトは、レスポンシブ機能対応アプリで利用可能なデザイン補助機能です。手動での位置調整や余白の微調整を最小限に抑え、効率的かつ統一感のあるデザイン作成をサポートします。

※オートレイアウトはレスポンシブ機能でのみご利用可能です

💡この記事では、デザインにオートレイアウトを追加する方法と、オートレイアウトフローで子オブジェクトを再配置する方法について説明します。オートレイアウトのサイズ変更、間隔、整列や、その他のプロパティについては、オートレイアウトプロパティをご覧ください。

オートレイアウト機能が付いたページには、通常のページにはないさまざまなプロパティがあります。オートレイアウトを適用すると、右側パネルのスタイルタブ内に、「レイアウト」項目が追加されます。

Proプラン以上・レスポンシブ環境(v4)

ページ全体にオートレイアウトを追加する

オートレイアウトを追加するには、必ず作業の開始時にページ左上にあるページ名を選択し、右側パネルのページのプロパティのスタイルタブから「オートレイアウトにする」をクリックしてください。

選択範囲にオートレイアウトを追加する

オートレイアウトを適用すると、エレメントを囲む青色の枠線が自動で表示されます。本記事では、この青色の枠線を、「オートレイアウトのフレーム」とし、以下の目的で使用されます。

オートレイアウトを使用すると、ネストされたエレメントは自動的に縦並び、横並び、間隔を空け、コンテナを埋め、中央揃えに配置されます。

💡 ネスト（nested）＝中に入っている／エレメントが入れ子になっている構造

構造については、レイヤーを確認ください。オートレイアウトごとに表示されています。レイヤー内のエレメントは自由に位置を動かすことが可能です。

オートレイアウトのフレーム（青線の枠）には、エレメントを追加できます。

Gif画像つける

ページをオートレイアウトにしていない場合は、エレメントを配置後に、そのエレメントの右側パネルないのスタイルから、位置をデフォルトの「絶対」から「相対」に変更してください。※エレメントのレイアウトで絶対配置を使用している場合、オートレイアウトの設定は反映されません。

💡 オートレイアウトのフレーム（青線の枠）に追加できるかどうかはサイズによって決まります。エレメントのサイズが親フレームより大きい場合、そのエレメントをオートレイアウトに追加できません。その場合は、フレームを拡げてください。

オートレイアウトのフレームは別のオートレイアウトのフレーム内にネストできます。これにより、水平レイアウトと垂直レイアウトを組み合わせて複雑なインターフェイスを作成できます。

オートレイアウトのフレームに背景をつけることが可能となりました。ブロック毎に背景を選択できますので、さらにデザインの幅が広がります。

オートレイアウトを削除すると、フレームの通常のプロパティにアクセスできるようになります。

【関連記事】

最終更新日：2025/11/05