オートレイアウト（デザインの自動調整）
機能概要
オートレイアウトはフレームに使用でき、デザインはコンテンツの変更に動的に応答するため、時間を節約できるだけでなく、応答性と適応性のあるデザインを作成できるようになります。
オートレイアウトフレームの要素は、方向、間隔、パディング、整列、その他のオートレイアウトプロパティに基づいて自動的に配置されます。コンテンツが変更されたり、要素が追加、削除、サイズ変更された場合でも、レイアウトは手動で再配置する必要なく調整されます。
対象プラン
Proプラン以上・レスポンシブ環境(v4)
オートレイアウトを追加
オートレイアウトはページ、または選択したエレメントに追加できます。
オートレイアウトフローを選択
縦並びと横並び
オートレイアウトがフレームで使用されている場合、フレームのオブジェクトのフローと配置を決定するために、以下の２つのオプションから選択できます。
- 縦並び
- 横並び
縦並びは、フレームのオブジェクトをY軸に沿って配置します。追加、削除、並べ替えたオブジェクトはすべてY軸に沿って配置されます。
例:複数のリスト項目。
横並びは、フレームのオブジェクトをX軸に沿って配置します。追加、削除、並べ替えたオブジェクトはすべてX軸に沿って配置されます。例: モバイルナビゲーションメニューのボタンの列またはアイコン。
アライメント
アライメントでは、オートレイアウトの中で子エレメントをどの位置に揃えるかを設定できます。
位置は、フレームの流れ（横並び/縦並び）と、アイテム同士の間隔によって決まります。
右側のパネルにある“配置ボックス”から、子エレメントを上・中央・下、左・中央・右など、全9種類の位置に揃えることができます。
間隔
エレメント間のギャップを使用して、オートレイアウトフレーム内のオブジェクト間の距離、つまり分布を設定します。
指定した間隔：オブジェクト間の間隔を指定します。フィールドに値を入力してください。
💡ギャップ = エレメント同士の間にできる「空間」や「隙間」のこと
均等配置
パディング
パディング（範囲内の余白）は、オートレイアウトフレームの境界とフレームの子エレメント間の空白スペース（空白）を制御します。パディングは、垂直方向と水平方向に均一に設定することも、上、右、下、左のパディングにそれぞれ異なる値を設定することもでき、複数のパディングを個別に設定することも可能です。
キャンバス コントロールまたは右側のパネルの「範囲内の余白（padding)フィールド」を使用してパディングを調整します。
キャンバスコントロールにアクセスするには、オートレイアウトフレームを選択し、マウスオーバーします。入力フィールドを開き、数値を入力します
.gif?table=block&id=29ab3ff2-9033-807c-9c62-f95706fcc28a&cache=v2&width=1200)
最終更新日：2025/11/04
不具合等が発生した場合は、以下のフォームよりお問い合わせください。https://docs.google.com/forms/d/e/1FAIpQLSe2uAfz82hPZFo5ov31M1SHggTwNEoDh_1Xgi6nlDSrrxpBqg/viewform?usp=sf_link