iPhone DuoでWebサイト制作はどう変わる？折りたたみスマホのUI設計とCSS対応
Appleから初の折りたたみスマートフォンであるiPhone Duoが2026年10月23日に発売されます。
Web制作で確認すべき画面幅は、閉じた状態の466px、開いた状態の626pxと890pxの3つです。
この記事では、この3つの幅で既存サイトのどこが崩れるかを整理し、その上でこれまでのiPhoneよりも広くなった画面に合わせてナビゲーションや地図、一覧表示をどう作り変えるかを紹介します。
1｜Web制作で押さえる折りたたみスマホ3つの画面幅
iPhone Duoへ向けたWebサイトの設計を検討する際は、折りたたみスマホの画面状態と、想定される表示領域を確認する必要があります。
| 状態 | CSS想定幅 × 高さ |
|---|---|
| 閉じた状態 | 466 × 678px |
| 開いた状態・横（標準） | 890 × 626px |
| 開いた状態・縦 | 626 × 890px |
iPhone Duoは開くと画面が横長に広がるため、開いた状態の標準的な表示幅は890px（横幅）となります。
これらの数値は、Appleが公表している物理解像度（外側1,398 × 2,034px、内側1,878 × 2,670px）を、従来のiPhoneと同じくデバイスピクセル比の3倍で割って算出した想定値です。
現在のところAppleから正式なpxの寸法が公表されていないため、実装時の目安として扱います。実際のSafariの画面では、アドレスバーやツールバーがあるため、自由に使用できるサイズは表の数値よりさらに減少することも予想されます。
また、インナーディスプレイとアウターディスプレイでは、「閉じた状態」と「開いた状態・横（標準）」の高さが違うので注意が必要です。
iPhone Duoのためだけにブレークポイントを用意する必要はありません。 既存の検証幅へ今回の想定幅を加え、どの画面サイズであってもレイアウトが破綻なく伸縮するかを確認するのが大切です。
2｜既存サイトを3つの幅で確認する
新しいUIの設計に入る前に、まずは既存のWebサイトがiPhone Duoの3つの画面幅でどのように表示されるかを確認し、問題箇所を特定します。
2-1｜閉じた状態466 × 678pxは幅より高さが問題
閉じた状態の想定幅である466pxは、近年のPro Maxクラスの440pxと比較して26pxほど広くなります。26pxなのでさほど影響は出ないと思います。
ただ、ここで問題になりやすいのは幅ではなく「高さ」です。 閉じた状態の想定高さ678pxは、Pro Maxの956pxと比較すると約7割しかありません。縦に短い画面では、次のような実装が表示崩れしやすいので注意が必要となります。
100vhを使って画面いっぱいに要素を広げたファーストビュー- 固定ヘッダーと画面下部固定ボタン（CTA）を追従させ、本文の閲覧領域が極端に狭くなる状態
- 画面を覆い隠すモーダルウィンドウやCookie同意バナー
- ソフトウェアキーボードが表示された際に入力欄や送信ボタンが隠れてしまうフォーム
Appleは、閉じた状態の画面が縦に短く横に広い特性を踏まえ、自社アプリの操作UIを画面下部から右端へ移動させる設計を取り入れています。 ChromeやFirefoxなどの社外アプリが今後どう対応するのか分かりませんが、Webサイト側では、高さが狭くても情報が適切に閲覧できるかという視点で対応するのが最善と思われます。
2-2｜開いた状態・横890 × 626pxを特に注意したい
Webサイトの表示において最も注意が必要になるのが、開いた状態の標準的な持ち方である890pxの幅です。
これは私の経験ですが、レスポンシブコーディングで890px辺りは、コンテンツに応じてタブレットやPCのレイアウトの間として調整していることが多いです。特に縦向きにしたタブレットを想定してコーディングしていることが多い。
タブレットの縦向きを想定していたコーディングの場合、iPhone Duoの縦幅626pxでトップページのファーストビューに全画面のビジュアルとコンテンツを表示させると、コンテンツが見切れたり、指定方法によっては文章が重なる可能性があります。
そのため、ファーストビューのレイアウト調整が必要になるサイトが出てくる場合があるので注意が必要です。
その他、以下の対応も想定されます。
- グローバルナビゲーションの崩れ。890pxではハンバーガーメニューに収納された状態にする
- ナビゲーションの切り替え点と、コンテンツレイアウトの切り替え基準を別々に管理
- 画面幅全体ではなく、コンポーネント自身の幅を基準にレイアウトを変えるコンテナクエリ（
@container）へ寄せる - 画面の高さいっぱいに要素を広げる場合は、アドレスバーなどの変動を考慮して
vhではなくdvhを使用する
2-3｜開いた状態・縦626 × 890pxはSPレイアウトのまま
端末を開いて縦に回転させた状態の横626pxは、比較的採用されているブレークポイントである768px未満に収まるため、スマートフォン向けのレイアウトで表示されると思います。レイアウトが大きく崩れる心配は少ない幅です。
ただし、626pxという幅に対してすべての要素を1カラムのままで配置すると、両端の余白が間延びして見えたり、ボタンが不自然に横長になったりします。 カード型の記事一覧や商品一覧などは、2列表示にする調整が有効です。
また、文章を表示する領域は max-width や clamp() を用いて一行の長さを調整し、ユーザーが快適に読み進められる文字数を保ちます。
2-4｜3つの幅に共通する確認項目
iPhone Duoのどの状態でも操作性を損なわないために、既存サイトで以下の項目がクリアできているかを確認します。
- 意図しない横スクロールが発生していないか
- 追従する固定要素がコンテンツの閲覧領域を不当に圧迫していないか
- 端末名やUser-Agentなどの環境情報を用いてレイアウトを分岐させていないか
- 端末の開閉や回転を行ったあとも、スクロール位置、フォームの入力値、タブなどの選択状態がリセットされず保たれているか
- マウスの
hover操作に依存し、タッチ端末では情報や操作が隠れてしまう実装になっていないか
3｜広いスマホ画面でUIをどう作り変えるか
画面が広くなったので、このサイズを活かしたUIを検討してみます。
3-1｜フルスクリーンメニューで充実させる
これまでスマートフォンの画面横幅が狭かったために一列のリンク一覧になっていたナビゲーションメニューは、890pxの画面幅を持つことでフルスクリーンメニューのミニ版が採用できます。
| 状態 | ナビゲーションの形 |
|---|---|
| 閉じた状態（466px） | 従来どおり1列に並んだメニュー |
| 開いた状態（890px） | 左側にカテゴリー、右側に新着記事・制作実績・検索結果・問い合わせへの導線を配置 |
| 本のように折った状態 | 片側に主要メニュー、もう片側に選択中カテゴリーの説明や記事一覧を表示 |
これまでは1列メニューのみが主流でしたが、2セクション設けてそれぞれにメニューと記事一覧を表示することも可能になると思います。
記事一覧以外にも、ブランドイメージを表現したスライドショーも効果的かもしれません。
しかし、ここで注意したいのがアクセシビリティ。
情報を追加して2列に分ける場合、スマホ開閉の操作によってメニュー項目の位置が大きく動くと使いづらさが出てしまいます。
また、見た目上の配置を変えることで、HTMLのDOM順、スクリーンリーダーの読み上げ順、キーボードによるフォーカス順などが変わることがないようにしなければいけません。
メニューを開いた瞬間に大量の記事データや画像をすべて読み込むと動作が重くなるため、必要な情報だけを遅延読み込みするなどのパフォーマンス対策もあわせておこなう必要があります。
3-2｜Google マップと店舗情報を同じ画面で見せる
実店舗を持つビジネスの場合、これまでのスマートフォンでは地図を小さく埋め込み、詳細は地図アプリを開いて確認してもらう作りが一般的だったかと思います。 しかし、890pxの幅があれば地図を大きく表示させることが可能です。
| 状態 | 地図の見せ方 |
|---|---|
| 閉じた状態（466px） | 住所、営業時間、小さな地図、「Google マップで開く」ボタン |
| 開いた状態（890px） | 地図スペースを広く取り、店舗情報・最寄り駅・駐車場・店舗一覧も合わせて表示 |
| 本のように折った状態 | 片側に地図を表示し、もう片側に店舗情報を表示 |
| ノートPCのように折った状態 | 上画面に地図を表示し、下画面に店舗情報を表示 |
ただし、Webサイト内で周辺情報の確認まで完結できるように情報を配置しますが、実際に歩行中や運転中に道案内を利用する場合は、専用の地図アプリが適しています。 「Google マップで開く」という補助導線は残しておくのが便利です。
また、埋め込みの地図はモバイルブラウザへの表示負荷が大きい要素です。ページを開いたときに読み込むのではなく、地図の領域が画面内に入ったときや、ユーザーが「地図を見る」ボタンを押したときに初めて読み込む設計を採用するとユーザーに優しいページになります。
3-3｜一覧と詳細を同時に表示する
Webサイトの目的に応じて、一覧情報と詳細情報を分割して表示できます。
| 場面 | 閉じた状態（466px） | 開いた状態（890px）・折った状態 |
|---|---|---|
| ブログ記事 | 本文または記事一覧を1列表示 | 記事本文＋目次・関連記事、一覧リスト＋本文プレビュー |
| 制作実績 | 写真と説明文を縦に表示 | 選択した実績の画像＋制作情報、一覧リスト＋実績詳細 |
| EC・商品紹介 | 商品画像の下に仕様と購入操作 | 商品画像＋仕様・選択項目・カート操作領域 |
| 予約・見積もり | 1列に並んだ入力フォーム | 入力フォーム＋料金のシミュレーションや入力内容の確認 |
| 動画・ライブ配信 | 動画エリアの下に操作とコメント | 左右分割で動画＋コメント、折った状態では上下分割 |
| サイト内検索 | 検索入力欄の下に結果を表示 | 絞り込み条件パネル＋検索結果一覧 |
画面を2ペイン（左右分割）にする場合は、左右に置く2つの情報に明確な関係がある状態にした方がいいです。
例えば、実績詳細ページで「実績画像＋実績コンテンツ」の場合。実績画像を追従表示させて、実績コンテンツをスクロールさせる仕様だと、常に実績画像が表示された状態になるので効果的です。
ステップ形式の問い合わせフォームページで「現在のステップ＋問い合わせフォーム」の場合。現在のステップ状態を固定で状態を表示させ、ページ遷移でフォームが切り替わる仕様は使いやすくなります。
3-4｜レイアウトを変えない方がよい場面
広い画面を活かす一方で、無理にレイアウトを変えない方がいいケースもあります。
文章の領域は画面いっぱいに広げず、視線移動が自然におこなえる読みやすい行長を保ちます。
写真や動画の中心となる被写体、見出しのテキスト、送信や購入といった重要なボタンは、画面全幅で配置することを避けた方がいい場合があります。
端末を途中まで折った状態のときに中央の折り目と重なり、操作しづらくなったり見えにくくなったりするためです。
CSSで視覚的な左右の配置を入れ替えたとしても、HTML構造上の読み上げ順序が意味を保つようにマークアップをおこなうことも大切です。
4｜折りたたみスマホに対応するCSSについて
折りたたみ端末の特性に合わせたCSSはすでに一部のブラウザで対応されています。
4-1｜折りたたみスマホに向けた2つの対応
現在、折りたたみ端末に向けて策定が進められている主要な仕様は次の2つです。
device-posture- 端末が平らな状態か、途中で折られている状態かを判定します
- Viewport Segments API
- 折り目によって分割された各画面領域の位置と大きさをCSSから参照します
device-posture が返す値は、全開に開いた状態を示す continuous と、折られた状態を示す folded の2つがあります。この2つでレイアウト切り替えが可能です。
しかし、具体的な角度は分かりません。
全開に開いた状態の折りたたみ端末も、一般的なスマートフォンやPCも、同じ continuous に含まれます。そのため continuous という値だけを使って「開いたiPhone Duoである」と特定することはできません。
使い分けとしては、device-posture で「折られているかどうか」を判定してナビゲーションの出し分けなどを切り替え、Viewport Segments APIで「折り目がどこにあるか」を取得して配置を決めます。
device-posture をCSSで使う場合は、メディアクエリに次のように記述します。
.menu-detail {
display: none;
}
@media (device-posture: folded) {
.menu-detail {
display: block;
}
}上記のコードでおこなっている各指定は以下のとおりです。
1. 通常時の表示を決める
.menu-detail は、ナビゲーションメニューの中で選択中カテゴリーの説明や記事一覧を表示する補助的な領域として想定しています。通常時は display: none; で非表示にします。
2. 折られた状態のときだけ表示する
@media (device-posture: folded) は、端末が本やノートPCのように途中まで折られているときだけ適用される条件式です。この状態のときだけ .menu-detail を display: block; で表示します。
全開に開いた状態や閉じた状態は continuous になるため、この条件に当てはまりません。未対応のブラウザでも条件が成り立たず、通常時の表示のままです。
device-posture で分かるのは折られているかどうかだけで、折り目の向きや位置は分かりません。表示した領域を折り目の左右どちらに置くかは、4-2のViewport Segments APIで指定します。
4-2｜折り目を避けて左右に分けるCSS
デバイスの中央にある「折り目（ヒンジ）」部分を避け、コンテンツを左右に分割して配置する実装例です。
この例では、Viewport Segments APIの「セグメント（画面の分割）数」のみで折り目を判定するため、device-posture メディアクエリは使用していません。
.fold-layout {
display: block;
}
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
.fold-layout {
display: grid;
grid-template-columns:
env(viewport-segment-width 0 0)
calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0))
env(viewport-segment-width 1 0);
}
.fold-layout__primary { grid-column: 1; }
.fold-layout__secondary { grid-column: 3; }
}上記のコードで行っている各指定は以下のとおりです。
1. 画面の分割状態を判定する
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) これは「画面が横に2つ、縦に1つの領域に分割されている状態」、つまり本のように縦の折り目で左右に分かれている場合にのみ適用される条件式です。
未対応のブラウザではこの条件が無視され、通常のレイアウトが維持されます。
2. 3列のグリッドレイアウトを作成し、中央を折り目幅にする
.fold-layout を display: grid; とし、grid-template-columns で以下の3列を定義しています。
- 1列目（左画面）
env(viewport-segment-width 0 0)
- 2列目（折り目）
calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0))
- 3列目（右画面）
env(viewport-segment-width 1 0)
env() は、ブラウザが取得したデバイスの環境変数をCSSに読み込むための関数です。括弧内の末尾の数字（例：0 0）は「横方向 縦方向」のインデックス番号（0からカウント）を表しており、0 0 は左側の領域、1 0 は右側の領域を指します。
2列目の calc() では、「右画面の左端（left 1 0）」から「左画面の右端（right 0 0）」を引くことで、折り目部分の正確な物理幅を算出しています。
3. コンテンツを左右に振り分ける
.fold-layout__primary を1列目（左画面）、.fold-layout__secondary を3列目（右画面）に配置しています。 あえて2列目（折り目部分）には何も配置しないことで、テキストやボタンがヒンジに隠れるのを防ぎます。
実装時の注意点
このCSSを使用する際は、以下の2点に気をつけてください。
- コンテナの幅と余白
- この指定は、ビューポートの全幅を占めるコンテナ要素への適用を前提としています。左右画面内の細かな余白（パディング）は、内側に配置する要素で調整してください。
- フォールバック（代替）設計
- 未対応のブラウザや、デバイスを折りたたんだ状態でも問題なく閲覧できるよう、このCSSがなくても成立するベースのレイアウト（スマートフォンの1カラムなど）を必ず用意しておきましょう。
4-3｜iPhone DuoのSafariで使えるのか
これらの仕様に2026年9月の時点で対応しているのは、Chromiumを採用した一部のブラウザに限られます。SafariとFirefoxは未対応です。
iPhone Duoの標準ブラウザとなるSafariでは、現時点でこれらの機能が使えません。本番サイトの実装に組み込む段階ではないため、今は仕様の存在を把握しておくだけで十分だと思います。
5｜実装の進め方
ここまでの内容を踏まえ、Webサイトを多様な画面幅に対応させていく手順を3つの段階に分けて整理します。
- 1列でもすべての情報と操作へ到達できるHTMLを作る
- 画面が狭くても、すべてのコンテンツが利用可能で論理的な構造を持つ基本設計を固めます。
- 幅またはコンテナクエリで、890pxに適した2列表示へ切り替える
- 余白やレイアウトの切り替えを行い、開いた状態の広い画面で情報を並べて見せるUIへ強化します。
- 対応ブラウザが揃った段階で、折り目を避ける指定を追加する
- SafariなどがViewport Segments APIに対応した際、中央の折り目への配慮を追加します。
これらの対応をおこなう際、特定の端末名やUser-Agentの文字列でiPhone Duoかどうかを判定する方法は使わないことをおすすめします。
未知の画面幅や、他社の多様な折りたたみ端末でアクセスされた場合でも崩れない実装をすることが大切です。
まとめ
iPhone Duoに向けてWebサイトを見直す際、検証すべき基準となる幅は466px、626px、そして開いた状態の890pxの3つです。
中でも890pxの表示は、従来のPCやタブレット向けのレイアウトが適用されて窮屈になりやすいため、特に気をつけて確認します。
広く使える画面は、ナビゲーションを拡張したり、地図と店舗情報を併記したり、一覧と詳細の見せ方を変えられるセクションとして使える可能性があります。
一方で、専用CSSを今すぐ導入する必要はないと思われます。 それよりも先に必要なのは、端末を開いても閉じても、どの画面幅でアクセスされてもコンテンツが崩れず、ユーザーが目的を果たせるレイアウトです。
新しい端末の登場に向けた既存サイトの検証や、多様な画面サイズに適応するWebサイトの設計でお悩みの際は、cortoのWebサイト制作までぜひご相談ください。 状況に応じたUI設計と実装方針をご提案いたします。
