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

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

GoogleのPixel Foldの発表を受けて、折りたたみデバイスに適応するエクスペリエンスのデザインと開発に利用できる技術を再確認するのに適した時期だと考えました。

新しいフォームファクタのデザインを強く望まない意見や、Googleの第一世代デバイスの価格は一旦無視して、現時点で何が可能かに焦点を当てましょう。

折りたたみデバイスをターゲットにするためのメディアクエリは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は左上のセグメントから始まります。

［画像: alt: 各ディスプレイ画面に配置された環境変数と、各ディスプレイの整数］

環境変数はクールです。なぜなら、デバイスによって寸法を計算し、調整を行ってくれるため、世の中に存在するあらゆるユニークなデバイスのデザインを作成する必要がなくなるからです。すでに多くの折りたたみデバイスがあり、それらはすべて異なる画面とヒンジの寸法を持っています。

この環境変数のセットにより、コンテンツを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 の下の実験的なWebプラットフォームフラグを有効にすると、Surface Duo エミュレーターで Chrome でテストできます。

まとめ #

この記事は、折りたたみウェブおよびアプリエクスペリエンスのためにこれらの機能が存在するという概要とリマインダーにすぎません。新しい折りたたみデバイスが出荷されるにつれて、Web（およびネイティブアプリ）でのデザインとレイアウトにおけるイノベーションの余地は十分にありますが、ブラウザとOSのサポートがなければ、企業は開発者やデザイナーに折りたたみエクスペリエンスの構築を真剣に考えてもらうことはできません。

デュアルスクリーンのレイアウトで何が可能かを引き続き探求することに興味がある場合は、Smashing Magazine に、私がWeb用に作成したレシピデモを詳しく解説した記事があります。Microsoft Edge をダウンロードして、ハッピービルディングを。