iPhone DuoのSwiftUIレイアウトをどう適応する？2026年学生向けチュートリアル

画面の姿勢を変えると、授業ページの文字やボタンが隠れてしまう。
iPhone DuoのSwiftUIレイアウト対応では、固定サイズに頼らず、使える空間に合わせて組み立ててから外側の画面、展開時、折りたたみ姿勢を順に確認します。

この記事は、SwiftUIで授業用ページを作っている学生や、VStack・HStackを覚えたばかりの方に向けた内容です。iPhone Duoのシミュレーターを使いたいものの、対応するMac環境が手元にない場合の考え方も扱います。

最終更新：2026年9月27日。 iPhone Duoの開発資料、Xcodeのシステム要件、SwiftUIのレイアウト文書を照合しました。Appleは開発準備資料で、発売日を2026年10月23日と案内しています。最新のbetaや動作条件は、作業前にAppleのiPhone Duo開発資料とXcodeのシステム要件で再確認してください。

まず固定サイズを外し、ページの骨組みを整える

「自動調整のレイアウト」は、画面の形が変わったときに、内容の並び方も無理なく変えられる設計です。机の広さに合わせてノートや教科書を置き直すように、画面の使える幅を見て内容を並べます。

たとえば授業ページなら、見出し、今日の課題、完了ボタンをひとまとまりにします。SwiftUIのVStackやHStackは、その基本を作るための入れ物です。AppleのSwiftUIレイアウトの基礎を見ながら、まずは要素同士の関係を組み立てます。

最初に、各要素へ固定の幅や高さを一律に指定していないか確認します。内容量が変わると文字が切れたり、ボタンが画面外へ押し出されたりしやすいためです。複数の配置候補から表示に合うものを選ぶ方法が必要な場面では、ViewThatFitsの公式説明も参考になりますが、すべてのページに使う必須機能ではありません。

展開時は、広さではなく作業内容で並べ方を選ぶ

画面が広くなったからといって、すぐにサイドバーを追加する必要はありません。課題一覧から項目を選び、説明や提出状況を見比べる場面なら、一覧と詳細を並べる利点があります。一方、読む順序が大切な解説ページなら、広い画面でも縦に並べた方が迷いにくいことがあります。

Appleの自動レイアウトに関する技術解説も参照し、画面の幅に応じて内容を組み替える考え方を学べます。判断の基準は「広く使えているか」ではなく、「授業の作業が読み取りやすく、迷わず続けられるか」です。

姿勢を切り替えて、同じページを検査する

Xcode 27.1 betaとiPhone Duo向けシミュレーターについては、Appleが開発準備資料で案内しています。betaの対応条件やシミュレーターで選べる姿勢は更新される可能性があるため、利用前にXcodeの対応するシステム要件も確認します。必要なmacOSが手元のMacと合わない場合は、作業環境を先に整えてからレイアウト検証へ進みましょう。

• 授業ページに固定幅・固定高さを指定した要素が残っていないか確認します。
• 外側の画面で、見出し、課題の要点、主要ボタンが読めて操作できるか確かめます。
• 展開時に、縦並びと一覧・詳細の並列表示を比べ、課題内容に合う方を選びます。
• 折りたたみ姿勢で、見出し・入力欄・主要操作が折り目をまたいで読みにくくなっていないか見ます。
• 姿勢ごとに、文字の折り返し、余白、スクロール、操作後の画面を記録します。
• 課題の提出条件に実機確認があるか確かめ、必要な場合はシミュレーターだけで完了としません。

ここでの合格基準は、デザイン画像と完全に同じピクセル配置になることではありません。大切な内容が読めて、主要な操作が使え、姿勢を変えた後もページの目的が保たれていることです。

作業環境を決め、次のレイアウト練習へ進む

手元のWindows PCでコードの考え方を学ぶことはできますが、iPhone Duo向けシミュレーターの実行には、対応するXcode環境が必要です。学校のMacを借りる方法は利用時間やソフトの導入権限に左右され、互換性のない環境での仮想化は、設定に時間がかかるうえ同じ検証結果を得られるとは限りません。

授業で使えるMacがなく、まずシミュレーターで姿勢ごとの配置を確かめたい場合は、VNCMacのリモートMac環境を確認する方法もあります。日本から利用する場合の案内は、日本向けのリモートMac環境でも確認できます。契約前に、必要なXcodeとmacOSが利用できるかを確認し、長期間の常時作業や実機の接続が必要なら、学校のMacや手元のMacの方が適するかも含めて選びましょう。