iPhone DuoのSwiftUIレイアウトはどう適応する？2026年初心者向けチュートリアル

Appleは、Xcode 27.1のiPhone Duoシミュレーターで姿勢や向きを確認できると案内しています（Xcode 27.1のリリースノート、iPhone Duoの準備ガイド）。

症状：折りたたむとボタンが窮屈になったり、展開すると画面の片側が空いたりする。
最短解：SwiftUIの画面を特定の端末サイズや向きに固定せず、使える空間に合わせて組み替え、シミュレーターで各姿勢を確認します。

SwiftUIを学んでいて、折りたたみ画面向けに課題を調整したい学生向けです。
Windowsを主に使い、授業でXcodeシミュレーターを動かす必要がある場合も、必要な開発環境を判断できます。
すでに画面を作成済みで、回転や折りたたみでボタンや文章が隠れないか気になる人は、チェック項目に沿って見直してください。

最終更新：2026年10月30日。AppleのXcode 27.1リリースノート、iPhone Duo準備ガイド、レイアウトガイド、Tech Talk、Device Hub資料、Xcodeシステム要件を確認しています。Appleがシミュレーターや適応レイアウトの説明を更新した場合は、手順も再確認してください。

外側画面での見え方

外側画面では、表示できる幅が狭くなる場面を想定し、タイトル、本文、主要な操作ボタンが無理なく読めて押せるかを確かめます。ボタンやカードに固定幅を指定していると、内容がはみ出したり、隣り合う操作が押しづらくなったりすることがあります。

iPhone Duoの外側画面に合わせるとき、まず何を直せばよいですか？
最初に、端末の幅を決め打ちした指定や、広い画面を前提にした横並びを探します。SwiftUIのビューが利用可能な幅に応じて縮んだり、必要なら縦並びに切り替わったりする構成を優先してください。背景は表示領域に広げても、文字や操作要素まで画面端ぎりぎりに置かないようにします。

AppleのHuman Interface Guidelinesのレイアウト指針では、画面サイズが変わっても内容が読みやすく操作できるようにする考え方が示されています。見た目を特定の端末寸法に合わせ込むのではなく、要素が使える幅に収まるかを基準にするのが出発点です。

内側画面と広い空間

展開した内側画面では、表示領域が広がっても、すべての要素を横に引き伸ばす必要はありません。文章の行が長くなりすぎないか、操作のまとまりが離れすぎないかを確認し、広い空間をどう使うか決めます。

内側画面と外側画面で、同じSwiftUI画面を使えますか？
多くの課題では、内容を保ったまま、並び方やナビゲーションの見せ方を変える設計ができます。たとえば外側では主要な操作を縦にまとめ、内側では補足情報を横に並べる方法があります。どの画面でも同じ配置を守ることより、課題で必要な情報と操作が見つけやすいことを優先してください。

size classは、利用できる幅や高さの大まかな分類です。端末の向きそのものではないため、「横向きなら広いレイアウト」と決めつけず、実際の表示領域とクラスに応じて構成を考えます。Appleの公式Tech Talkも確認し、iPhone Duo固有の姿勢についてはAppleが説明している範囲で扱ってください。

回転とテント姿勢での再配置

回転やテント姿勢では、画面全体の幅だけでなく、操作の順序や視線の流れも変わることがあります。片方の向きでは読みやすい文章が、別の向きではボタンを画面外へ押し出していないか、姿勢を切り替えて確認します。

SwiftUIの配置は、画面の向きと使える空間のどちらに合わせますか？
基本は使える空間に合わせます。向きは確認する場面のひとつですが、同じ向きでも姿勢によって表示条件が異なる可能性があるため、向きだけをレイアウト判断の代わりにしないでください。余白が不自然に広がる場合は、固定した余白や幅がないかを調べ、内容のまとまりごとに配置を見直します。

折りたたみ領域と安全領域

カメラ周辺や折りたたみ部分に近い場所では、背景と、見える状態を保つべき前景を分けて考えます。背景色や装飾は画面の端まで広げられる場合がありますが、見出し、本文、ボタンは安全領域や操作性を考慮して配置します。

折りたたみ部分に文字やボタンが重なる場合はどうしますか？
まず、どの姿勢で重なっているかをシミュレーターで確認し、重要な内容を安全領域の内側へ移します。標準のナビゲーション部品を使っている場合も、姿勢ごとに操作できるかを確かめてください。iPhone Duo専用のAPIや適用範囲は、Appleの公式資料に明記された内容だけを根拠にし、画面の見た目から対応仕様を推測しないようにします。

シミュレーターで行う画面チェック

iPhone Duoの姿勢切り替えには、Appleが案内するXcodeシミュレーターとDevice Hubを使います。Device Hubの公式資料を参照し、表示状態を切り替えながら、同じ課題画面を順番に確認してください。シミュレーターでの確認は、実機での動作を確かめたことと同じではありません。

iPhone Duoシミュレーターでは、何をどの順で確認すればよいですか？
画面の見た目だけでなく、ボタンを押せるか、文章を最後まで読めるか、ナビゲーションで迷わないかも見ます。以下をひとつずつ確認すれば、崩れた箇所を課題の修正につなげやすくなります。

• [ ] 画面内に端末の幅や高さを固定する指定がないか探します。
• [ ] 折りたたんだ状態で、見出し・本文・主要ボタンが読めて操作できるか確認します。
• [ ] 展開した状態で、内容の横幅や余白が不自然になっていないか見直します。
• [ ] 回転とテント姿勢に切り替え、文字や操作が隠れたり画面外へ出たりしないか確かめます。
• [ ] カメラ周辺や折りたたみ部分に近い箇所で、重要な前景要素が妨げられていないか確認します。
• [ ] 授業の提出条件に、実機での確認や特定のXcode環境が含まれていないか照合します。

WindowsだけではXcodeシミュレーターを実行できないため、コースの条件を先に確認してください。Xcodeの対応環境は更新されることがあるので、使えるMacを用意する前にAppleのXcodeシステム要件で必要な環境を照合します。Xcodeのバージョンやシミュレーターの準備で迷ったときは、Xcode関連の課題で起きやすい確認事項も参考になります。

課題に必要なMac環境の選び方

レイアウトの考え方を学ぶだけなら、まず手元の環境でSwiftUIの構造を整理できます。一方、授業でXcodeシミュレーターの起動や提出前の画面確認が必須なら、実行できるMac環境が必要です。学校のPCにソフトを追加できない、手元がWindowsのみ、といった制約がある場合は、リモートMacの利用場面を確認し、必要なXcodeと課題作業が可能かを照らし合わせてください。

WindowsではXcodeをそのまま実行できず、学校のPCではインストール権限が制限されることがあり、個人でMacを購入すると課題期間外も含めて端末を保有することになります。シミュレーターだけでは実機での確認を置き換えられない点も、提出条件に合わせて判断が必要です。短期間だけ動作確認用の環境が必要なら、KVMFLUXのリモートMacを使うほうが、Mac本体を購入する前に必要な作業を試せます。利用前にXcodeの要件と接続方法を確認し、プラン内容が課題期間や作業に合うかを比べてください。実機接続が必須、または長期間にわたって安定した重い作業を行う場合は、レンタルだけで足りると決めつけず、必要な機材や利用条件を先に確認しましょう。