CSSによるデュアルスクリーンおよび折りたたみデバイスのデザイン

CSSによるデュアルスクリーンおよび折りたたみデバイスのデザイン 2023年5月11日に公開 GoogleのPixel Foldの発表を受けて、折りたたみデバイスに適応する体験のデザインと開発に利用できるテクノロジーを再検討するのに適した時期だと考えました。新しいフォームファクターのデザインを強く望まない否定的な意見や、Googleの第一世代デバイスの価格は一旦無視して、現時点で何が可能かに焦点を当てましょう。 ビューポートセグメントのためのCSSメディアクエリ 折りたたみデバイスをターゲットにするためのメディアクエリは2つあります。 @media (horizontal-viewport-segments: <count>) { } @media (vertical-viewport-segments: <count>) { } horizontal-viewport-segmentsクエリは、デバイスが本のように持たれ、2つの画面が横並びになっている場合にターゲットとします。vertical-viewport-segmentsは、デバイスがラップトップのように画面が上下に積み重ねられて折りたたまれている場合にターゲットとします。私はこのモードをSurface DuoでPowerPointを使用する際に便利だと感じました。下画面でスピーカーノートにアクセスでき、プレゼンテーションは上画面に表示されます。かなりスマートです。 CSS環境変数 各ディスプレイのジオメトリを取得するために、デュアルスクリーンデバイス用にいくつかの環境変数が作成されました。 env(viewport-segment-width <x> <y>); env(viewport-segment-height <x> <y>); env(viewport-segment-top <x> <y>); env(viewport-segment-left <x> <y>); env(viewport-segment-bottom <x> <y>); env(viewport-segment-right <x> <y>); xとyの位置は、各ビューポートセグメントを分離するハードウェア機能によって作成される2次元グリッドを表し、座標0,0は左上のセグメントから始まります。 環境変数はクールです。なぜなら、それらはデバイスによって寸法を計算し、調整を行ってくれるからです。つまり、あらゆるユニークなデバイスのためにデザインを作成する必要がなくなります。すでに多くの折りたたみデバイスが存在し、それらはすべて異なる画面とヒンジの寸法を持っています。この環境変数のセットにより、コンテンツを2つの画面に配置することもできます。私のデモでは、デュアルスクリーンデバイスで2カラムレイアウトに変化するレシピページを作成しました。CSS Gridを使用しており、環境変数をグリッドカラムまたはロウの値として使用できます。 @media (horizontal-viewport-segments: 2) { .container { grid-template-columns: env(viewport-segment-width 0 0), 1fr; } } このコード行は、デバイスが縦位置（本のような状態）で持たれている場合、最初のグリッドカラムが左側のディスプレイ全体を占め、2番目のグリッドカラムがディスプレイ領域の残りの幅、つまり右側のディスプレイを占めることを意味します。より明示的にしたい場合は、次のように書くこともできます。 @media (horizontal-viewport-segments: 2) { .container { grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width: 1 0); } } これもまた、各カラムがディスプレイを1つずつ占めることを意味します。非常に良いですね。 製品にデュアルスクリーンモードを含めるべきなのはいつか？ 否定的な意見に戻りましょう。私がデュアルスクリーンデザインについて話し始めたとき、多くの人々が否定的な反応を示しました。正直なところ、ウェブサイトやアプリを2つのディスプレイにまたがって適応するように強制されているわけではありません。Surface Duoでは、一方のディスプレイペインでブラウザを利用でき、通常のレスポンシブウェブサイトのように表示されます。すべてのサイトやアプリがデュアルスクリーンモードを必要とするわけではありませんが、顧客がどのようなデバイスを使用しているか、そしてデュアルスクリーンモードが投資に見合うかどうかを調べるのが最善です。いつものように、データに基づいて意思決定を行ってください。2023年に出荷される折りたたみデバイスの予測は2100万台以上（出典）と予想されています。モバイルデバイス市場と比較すると、ほんのわずかですが、それでも何百万台もの折りたたみデバイスが使用されています。私が折りたたみデバイス向けにアプリやウェブサイトを作成するもう一つの理由は、目立ちたいからです。Pixel Foldは、折りたたみデバイスが定着していることを強化しています。なぜユーザーを喜ばせないのでしょうか？ ブラウザサポート メディアクエリと環境変数は、現在Microsoft Edge Stableでサポートされています。残念ながら、Chrome Stableにはまだ同じサポートがないようです。これはPixel FoldとChromeチームにとって大きな機会損失のように思えます。chrome://flagsの下にある実験的なウェブプラットフォームフラグを有効にすると、Surface DuoエミュレーターでChromeでテストできます。 まとめ この記事は、折りたたみウェブおよびアプリ体験のためにこれらの機能が存在することの概要とリマインダーにすぎません。新しい折りたたみデバイスが出荷されるにつれて、ウェブ（およびネイティブアプリ）のデザインとレイアウトにおけるイノベーションの余地はありますが、ブラウザとOSのサポートがなければ、企業は開発者やデザイナーに折りたたみ体験の構築を真剣に考えさせることができません。もしデュアルスクリーンレイアウトで何が可能かを探求することにまだ興味があるなら、Smashing Magazineには私がウェブ用に作成したレシピデモを詳しく説明した記事があります。Microsoft Edgeをダウンロードして、ハッピービルディングを！ ← ホーム