折りたたみ式デバイスがメインストリームに
Appleが発表した1,999ドルのiPhone Duoは、ウェブ開発にとって極めて重要な瞬間を意味します。2026年10月23日に発売されるこのデバイスは、5.4インチの外側ディスプレイと7.6インチの内側ディスプレイを備えており、折りたたみ式スマートフォンをニッチな好奇心の対象から、すべてのウェブ開発者にとってのメインストリームの現実へと押し上げます。これらの適応可能なフォームファクタを無視することは、もはや選択肢ではありません。
幸いなことに、ブラウザエンジニアはこの変化を予見していました。現在、私たちはこれらのデバイス専用に設計された強力なCSSメディアクエリ、@media (device-posture: folded)を利用できます。このクエリは、デバイスがcontinuous（フラット）な状態ではなく、本や小型ノートパソコンのようなfolded（折りたたみ）状態にあるかどうかを検出します。これにより、開発者はさまざまな物理的構成に合わせて最適なユーザー体験を提供するためのターゲットスタイルを適用できるようになります。
ブログ記事を想像してみてください。フラットなcontinuousスクリーンでは、1カラムのレイアウトが完璧に機能し、読みやすさを最大化します。しかし、ユーザーがiPhone Duoを本のように折りたたむと、その1カラムは折り目にかかって読みにくくなる可能性があります。device-postureを使用すれば、簡単に2カラムレイアウトに切り替え、各スクリーンセグメントにコンテンツをエレガントに配置することで、ユーザビリティとインタラクションを即座に向上させることができます。
この単純な適応は、device-postureメディアクエリの即効性を示しています。開発者は、画面サイズだけでなく、デバイス自体の物理的なインタラクションモデルにも流動的に適応するレスポンシブデザインを作成できるようになりました。Chromeはすでにこれらの機能をサポートしており、SafariのiPhone Duoシミュレーターにも（フラグ設定が必要ですが）含まれており、近い将来の広範な利用可能性を示唆しています。
サイトを「折りたたみ対応」にする
静的なCSSルールを超えて、折りたたみ式デバイス向けのウェブ体験は、動的なインタラクションによって真価を発揮します。JavaScript用のDevice Posture APIを使用すると、ユーザーがiPhone Duoやその他の折りたたみ式デバイスをどのように保持しているかにサイトが反応し、よりリッチで直感的な体験を提供できます。これは単にフラットまたは折りたたみ状態のスタイル設定にとどまらず、リアルタイムの反応を可能にします。
アプリケーションはデバイスの姿勢に関するchangeイベントをリッスンし、電話の状態がcontinuous（フラット）とfolded（折りたたみ）の間で遷移するたびにアクションをトリガーできます。つまり、ユーザーが電話を閉じ始めたときにビデオを自動的に一時停止したり、姿勢を変える瞬間にフォームの進行状況を即座に保存したりすることが可能です。レシピアプリで、片方の画面に材料を、もう片方に手順を表示し、デバイスを折りたたむと動的にコンテンツを分割する様子を想像してみてください。
JavaScriptでこれらの折りたたみ状態の変化を検出するのは簡単です。以下は基本的なスニペットです：
if ('ondeviceposturechange' in window) { window.addEventListener('deviceposturechange', (event) => { const currentPosture = event.target.devicePosture.type; console.log(`Device posture changed to: ${currentPosture}`); // ここにcurrentPosture ('continuous' または 'folded') に基づく動的なアクションを実装します });
}このイベントリスナーはdevicePosture.typeを提供し、よりインタラクティブで直感的な折りたたみ式ウェブ体験を構築できるようにします。ChromeとSamsung InternetはすでにこのAPIを完全にサポートしており、SafariのiPhone Duoシミュレーターにも機能フラグの背後に含まれているため、Appleの1,999ドルのデバイスに対する将来のサポートが示されています。
一度に2つの画面をデザインする
折りたたみ式デバイスは、「viewport segments（ビューポートセグメント）」という魅力的なコンセプトを導入します。iPhone Duoを折りたたむと、それぞれ独立して制御可能な2つの異なる表示領域が現れます。これは単に折りたたみに反応するだけでなく、各セグメントを独自のキャンバスとして扱う、真のデュアルスクリーン体験を設計できることを意味します。
コンテンツを正確に配置するために、開発者はCSSのenvironment variables（環境変数）を使用します。例えば、env(viewport-segment-width)やenv(viewport-segment-height)は、各セグメントの寸法を提供します。これにより、物理的なヒンジや隙間の周囲に要素を完璧に配置し、強力で適応性の高いレイアウトを作成できます。
デュアルスクリーンで真価を発揮するadvanced use cases（高度なユースケース）を検討してみましょう。ビデオプレーヤーを一方のセグメントに配置し、もう一方のセグメントにトランスクリプト、チャプター、または関連するコメントをインタラクティブに表示させることができます。同様に、メールクライアントでは、一方のセグメントに受信トレイのリストを表示し、もう一方のセグメントに選択したメッセージの全文を同時に表示することで、生産性を向上させることができます。
Chromeはすでにこれらの機能をサポートしており、Chrome 138からViewport Segments APIが利用可能です。Samsung Internetは、折りたたみ式スマートフォン向けに長年この機能を提供してきました。Xcode 27.1でリリースされたSafariのiPhone Duoシミュレーターには、これらのAPIが機能フラグの背後に含まれています。また、device-posture CSS media feature - MDN Web Docsで、device-postureのような関連するCSS機能についてさらに詳しく調べることができます。
この記事が気に入ったら、毎朝同じようなものをメールで受け取れます。
1日1通 · 2クリックで解除 · サードパーティのトラッキングなし
ブラウザの戦場：誰が準備できているか？
折りたたみ対応デザインの「理由」を探ってきましたが、次は「どこで」実現できるかを見ていきましょう。朗報です。多くのツールがすでに準備万端です！Chromeは、device-postureメディアクエリとJavaScript API（Chrome 138から利用可能なViewport Segments APIを含む）に対して安定したサポートを提供しています。つまり、Androidの折りたたみ式市場の大部分で、すでに強化されたレイアウトを体験できるということです。Samsung Internetは長年にわたりこれらの機能を推進しており、膨大な数の折りたたみ式デバイスで堅牢な体験を保証しています。
Safariの旅はまだ始まったばかりです。Xcode 27.1でリリースされた新しいiPhone Duoシミュレーターには、device-postureとviewport segments APIの両方が含まれています。これは、Appleがこれらの機能をサポートする明確な意図を示しています。しかし、これらの機能は現在feature flag（機能フラグ）の背後に隠されており、Appleは1,999ドルのiPhone Duoの2026年10月23日の発売に向けて準備を進めていますが、発売時に完全なサポートが有効になるとは限りません。
では、開発者は何をすべきでしょうか？progressive enhancement（プログレッシブ・エンハンスメント）を取り入れましょう！Firefoxのように折りたたみ式APIを持たないブラウザを含め、すべてのブラウザでベースラインとなる体験が堅牢でアクセス可能であるように設計します。その上で、高度なdevice-postureやviewport segments機能を拡張機能として重ねます。この戦略により、ビデオとメモの分割画面のように、対応する折りたたみ式デバイスのユーザーには優れた調整済みの体験を提供しつつ、他のユーザーの機能を損なうことはありません。重要なのは、壊すことではなく、優雅に適応することです。
よくある質問
CSSのdevice-postureメディアクエリとは何ですか？
これは、Webページがデバイスの物理的な状態に基づいてレイアウトを適応させることを可能にする新しいCSSメディア機能です。フラットな画面用のcontinuousと、画面が曲がったりヒンジで折れたりしている状態用のfoldedという2つの主要な値があります。
折りたたまれた画面の両側のコンテンツを制御するにはどうすればよいですか？
Viewport Segments APIを使用できます。viewport-segment-widthやviewport-segment-heightのようなCSS環境変数を使用すると、折り目の両側にある個別の画面領域をスタイル設定し、デュアルスクリーン体験を作成できます。
現在、どのブラウザが折りたたみ式CSS機能をサポートしていますか？
ChromeおよびSamsung Internetは、device-postureメディアクエリとViewport Segments APIを完全にサポートしています。SafariのサポートはiPhone Duoシミュレーターで利用可能ですが、現在は機能フラグの背後に隠されています。Firefoxはまだサポートしていません。
折りたたみデバイス向けのCSSメディアクエリとJavaScript APIの違いは何ですか？
CSSのdevice-postureメディアクエリは宣言的であり、デバイスの状態に基づいてレイアウトをスタイリングするために使用されます。JavaScriptのDevice Posture APIは命令的であり、動画の一時停止やデータの保存など、折りたたみイベントに応じてコードを実行することができます。