2026年9月9日、Appleのイベント「Surprise and Shine」で、ついに**初の折りたたみiPhone「iPhone Duo」**が発表されました。発売は10月23日（予約開始は10月16日）、価格は米国で1,999ドル（256GB）からです。

「折りたたみかあ、高いし当分関係ないな」——そう思ったWeb制作者・アプリ開発者の方、ちょっと待ってください。

iPhone Duoが突きつけているのは、「iPhoneの画面はだいたい幅390ptくらい」という、この10年の大前提の崩壊です。1台のiPhoneが、閉じれば従来のiPhone、開けばiPad mini級のタブレットに変身する。あなたのアプリやサイトは、その「変身の瞬間」に耐えられるでしょうか。

この記事では、この1本を読めばiPhone Duoのデザイン対応のおおよそ全体像がわかることをゴールに、次の順で解説します。

  1. iPhone Duoを1分でおさらい
  2. デザイン視点での本質：「2つの画面」と「開閉の連続性」
  3. アプリ対応の新常識 5箇条
  4. Webサイトへの影響——UA判定の時代が終わる
  5. 今すぐやるべきチェックリスト
  6. 一次情報リソース集

1. iPhone Duoを1分でおさらい

まずはデザイン対応に関係するポイントだけ、ぎゅっと要約します。

  • 本のように横方向へ開く折りたたみ構造。Apple初のフレキシブルディスプレイ採用製品
  • アウターディスプレイ：5.4型——閉じた状態で使う、従来のiPhone的な画面
  • インナーディスプレイ：7.6型——開くと現れる大画面。iPad miniに近いサイズ感で、iPhone 18 Pro Maxより表示領域が約50%広い
  • 開いた状態の厚さは5.2mmで「iPhone史上最薄」
  • インナーには画面下埋め込み型（アンダーディスプレイ）のFaceTimeカメラを初搭載
  • Apple Pencil入力に対応
  • チップはAI処理に特化したA20 Pro、OSはiOS 27.1を搭載

つまりiPhone Duoは「大きいiPhone」ではなく、**「iPhoneとiPad miniを行き来するデバイス」**です。ここがデザイン対応のすべての出発点になります。

2. デザイン視点での本質：「2つの画面」と「開閉の連続性」

2つの画面は「別物」として扱われる

Appleの開発者向け資料によれば、2つの画面はUI設計上こう扱われます。

  • アウター（5.4型）：これまでのiPhoneと同じ振る舞い。サイズクラスは「コンパクト幅」。App Store Connectのスクリーンショット仕様では1398×2034ピクセル（3xで466×678pt相当）
  • インナー（7.6型）：縦・横ともに「レギュラー」サイズクラス。これはiPadと同じ扱いで、サイドバーの表示やiPadOS方式のSplit View（マルチウィンドウ）まで動きます。同仕様では2007×2853ピクセル（3x換算で約669×951pt相当とみられます）

ポイントは、iPadに最適化済みのアプリなら、Duo対応の大部分がすでに終わっていること。逆に「iPhone用の1カラム画面をiPadでも引き伸ばして表示」で済ませてきたアプリは、インナー画面で間延びが目立ちます。

開閉は「連続」している——ポーズという考え方

iPhone Duoの体験の核心は、開閉の瞬間にあります。

  • 動画を再生しながら本体を開くと、再生を途切れさせずに大画面へ拡大
  • 半分だけ折った状態では、コンテンツが本のように左右へ分かれて配置される
  • ソフトウェアが開き角度（ポーズ）に応じてレイアウトを調整する

つまりアプリは「閉じた画面用」「開いた画面用」の2枚の静止画ではなく、その間を連続的に行き来する1つの生きたレイアウトとして設計する必要があります。

3. アプリ対応の新常識 5箇条

Appleは発表当日から開発者向け特設ページ（developer.apple.com/iphone-duo）を公開し、HIGに新章「Designing for iPhone Duo」を追加、「Design for iPhone Duo」「Prepare your app for iPhone Duo」などのTech Talk動画を一挙公開しました。そこから読み取れる新常識をまとめます。

① 「画面サイズ固定」の前提を捨てる

UIScreen.main のような「メインスクリーン」参照は、2画面デバイスでは意味が曖昧になるため非推奨の方向です。画面情報はウィンドウシーン経由で動的に取得し、レイアウトは利用可能なスペースに応じて組みます。

// NG: 2画面デバイスでは曖昧
let size = UIScreen.main.bounds

// OK: シーンから動的に取得
let screen = window?.windowScene?.screen

② 「画面の向き」ではなく「サイズクラス」で分岐する

インナーディスプレイはアプリが指定した対応画面向き（orientation）を尊重しません。「横向きなら2カラム」のような向きベースの分岐は破綻します。SwiftUIなら環境値、UIKitならtraitCollectionのサイズクラスで判断するのが公式の推奨です。

@Environment(\.horizontalSizeClass) private var horizontalSizeClass

③ 非対称セーフエリアとReservedRegionに対応する

Duoではセーフエリアが左右で非対称になり得ます（縦積みのナビゲーションボタンが左右どちらかの端に出るため）。上下左右をまとめて処理せず、辺ごとに独立して扱いましょう。さらにiOS 27.1では、ステータスバーやカメラなどシステムUIと衝突せずに画面を最大限使うための ReservedRegion / UIViewReservedRegion APIが追加されています。角の処理も、新しいConcentricity系API（SwiftUIの ConcentricRectangle 等）で画面の丸みに同心円状に沿わせるのが作法です。

④ 標準の適応コンポーネントに乗る

NavigationSplitView（UIKitでは UISplitViewController）や TabView は、開閉のあらゆるポーズに自動で適応します——閉じればカラムが畳まれ、開けばサイドバーが展開する。独自ナビゲーションを自作するほど対応コストが跳ね上がるので、標準コンポーネントへの乗り換えを真剣に検討する価値があります。

⑤ SDKバージョンで見え方が変わることを知る

既存アプリは再ビルドしなくてもDuo上で動作します。ただし段階があります。

  • 旧SDKのまま：開いた状態では従来のiPhoneサイズ相当で表示（周囲に余白）
  • iOS 27 SDKでビルド：インナーディスプレイの縁近くまで拡張
  • iOS 27.1 SDKでビルド：画面端まで完全なフルスクリーン表示に対応

「動く」と「Duoで映える」の間には距離があります。Xcode 27.1（ベータ）にはDuoの開閉ポーズを再現できるDevice Hubシミュレータが入っているので、実機がなくても検証を始められます。

4. Webサイトへの影響——「UA判定」の時代が終わる

アプリ開発者だけの話ではありません。Webデザインにも地殻変動が来ます。

iPhoneなのにタブレット幅でやってくる

これまで「iPhoneからのアクセス＝モバイル幅」はほぼ成立していました。しかしDuoのインナーディスプレイはタブレット級のビューポートです。ユーザーエージェントで「iPhoneだからスマホ用レイアウト」と決め打ちするサイトは、大画面に間延びした1カラムを表示することになります。

対応の原則はひとつ：デバイス名ではなく、ビューポート幅に応答する。 メディアクエリとコンテナクエリで組まれた正しいレスポンシブデザインなら、Duoは「新しい1つの幅」にすぎません。

「閲覧中にビューポートが変わる」が日常になる

Duoのユーザーは、ページを見ている最中に本体を開閉します。つまり、

  • リサイズ時にレイアウトが再計算されても崩れないこと（画像・埋め込み・グリッド）
  • JSで初回ロード時に画面幅を1度だけ判定して固定する実装をやめること
  • ビューポート単位は伸縮に追従する dvh / svh を使うこと

といった「リサイズ耐性」が、これまで以上に本番品質の条件になります。

動画・メディアのアスペクト比問題

インナーディスプレイは16:9より縦に深い比率のため、横開きで16:9動画を再生すると上下に太い帯が残ることが指摘されています。動画を主役にするページでは、レターボックスを前提にした背景処理や、縦横比の異なる素材の出し分けを検討しましょう。

5. 今すぐやるべきチェックリスト

アプリ開発者向け

  1. コード内の固定画面サイズ・UIScreen.main 参照を洗い出す
  2. 画面向きベースの分岐をサイズクラスベースに書き換える
  3. セーフエリアを辺ごとに独立処理し、ReservedRegionを検討する
  4. ナビゲーションを標準の適応コンポーネントに寄せる
  5. Xcode 27.1のDevice Hubで開閉ポーズをテストする

Web制作者向け

  1. UA判定によるレイアウト分岐を廃止し、ビューポート応答に統一する
  2. タブレット幅のブレークポイントで2カラム表示が意図通りか確認する
  3. ウィンドウリサイズ（開閉）でレイアウトが崩れないかテストする
  4. 100vh を 100dvh に置き換える
  5. 動画・ヒーロー画像のアスペクト比戦略を見直す

6. 一次情報リソース集

情報が日々更新されている時期なので、必ず一次情報をブックマークしておきましょう。

まとめ：Duo対応の合言葉は「サイズを決めつけない」

最後に、この記事の要点を凝縮します。

  1. Duoは「iPhone＋iPad miniの行き来」——インナーはregular×regular、iPadと同じ扱い
  2. 固定サイズと向き分岐を卒業——サイズクラスとシーン基準へ
  3. セーフエリアは非対称——辺ごとに処理し、ReservedRegionを活用
  4. 標準コンポーネントが最短ルート——NavigationSplitView / TabViewは開閉に自動適応
  5. WebはUA判定の終焉——ビューポート応答＋リサイズ耐性が新しい合格ライン

折りたたみ対応は「Duoのための特別対応」ではなく、どんな画面サイズにも適応できる正しい設計への回帰です。いま手を入れておけば、次にどんな形のデバイスが来ても慌てずに済みます。

Four Youのご紹介

株式会社Fouryou（Four You）は、生成AI基盤の構築からWebサイト・業務システムのAI駆動開発まで、企業のAI・DXを伴走支援しています。

「自社アプリのiPhone Duo対応、何から手をつければいい？」「レスポンシブ改修をAI駆動開発で高速に進めたい」——そんなご相談も、現状調査から実装・検証まで一気通貫でお手伝いします。数千万円規模の開発を2ヶ月で完遂した実績など、AI駆動開発ならではのスピードが強みです。

お気軽にお問い合わせください。
🔗 https://fouryou.co.jp

#iPhoneDuo #iPhone #折りたたみスマホ #UIデザイン #UXデザイン #レスポンシブデザイン #アプリ開発 #iOS #Web制作 #FourYou