1.作業効率が上がる

要素を増やしたり減らしたりしても、余白を詰めたり、再計算したりする手動の作業がゼロになります。
illustratorやphotoshopだと要素を増やしたり減らしたりしたらその分手動で調整しないといけないですが、それを自動でやってくれます！

2.デザインが崩れにくい安心感

テキストが長くなったりしても自動で幅を調整してくれるほか、余白も常に一定に保たれます。これにより、デザインのバラつきがなくなり、一貫性のある綺麗なデザインを保てます。

3.サイズや配置のルールを柔軟に設定できる

・Hug contents: 「中身のサイズに合わせて、フレームもギュッと抱きしめる」ようにサイズを調整します。
・Fill container: 「親フレームのサイズいっぱいに、子要素をめいっぱい広げる」ように指定できます。
といった機能のおかげで、レスポンシブなデザインも簡単です。

4.コーディングの考え方に近いので、実装との連携がスムーズ

前述の通りflexboxに考え方が近いので、「このデザインの意図って、こういうCSS設定だよね」とコーダーさんとの共通言語になります。実装時の手戻りが減ります！

1.自由な配置が苦手

オートレイアウトは「要素をきっちり並べる」のが得意です。なので、

• 斜め配置や、意図的に不規則にした間隔
• 「ここだけ余白を倍にしたい」といったイレギュラーな対応

には向いていません。こういう要素は、オートレイアウトの外で自由に配置してあげた方が良いです。

2.複雑になると管理が大変

オートレイアウトのフレームの中に、またオートレイアウトのフレームを入れる（入れ子にする）と、どんどん複雑になります。
フレームの入れ子が深くなりすぎると、修正したいときに「どこを直せばいいのか」を探すのに時間がかかってしまうこともあります。

例1：崩れないボタン

• １．「登録する」などのテキストと、背景の図形を選択して、Shift+A！
• ２．パディング（内側の余白）を設定します（例: 上下12px、左右24px）。

こうすることで、テキストをどんなに変えても、背景が自動で追従し、ボタンの形と余白が完璧に保たれます！

例2：メニューバーの管理

• １．ナビゲーションの各項目（「ホーム」「お知らせ」など）をオートレイアウトでボタン化します。
• ２．それら全てのボタンを選択して、もう一度Shift+Aでまとめます。

これで、項目をドラッグして順番を入れ替えたり、一つ削除したりしても、残りの要素が均等な間隔を保って自動で整列してくれます！