強固な基盤
優れた PWA を構築するための基本要件は、堅固な基盤です。この基盤を実装するには、次の原則を使用して、ウェブの制約に合わせて設計とコーディングを行う必要があります。
- モバイルをフォーカス制約として使用します。デザインの各ビューで、重要なコンテンツとインタラクションのみに焦点を当てるようにします。
- デザイン プロセスでコンテンツとコア機能を重視します。
- 必要に応じて段階的に拡張します。まず、最も簡単で広く利用可能なツールを使用して、コンポーネントのコア コンテンツと機能を構築します。アクセス性を確保します。次に、使用する高度な機能をテストし、それらを使用してコンポーネントを強化します。
- ユーザー中心のウェブ パフォーマンス指標に重点を置いた高速で優れたユーザー エクスペリエンスを提供します。実際のユーザー指標を取得し、ネットワーク接続、入力タイプ、CPU、GPU の処理能力に関係なく、すべてのユーザーに対してパフォーマンスを向上させます。
これらの原則に沿って、最新のパターンとウェブ機能を活用することで、真に本質的なデザインで優れた高速なエクスペリエンスを実現できます。ピクセルではなく制約に基づくデザインにより、すべてのユーザーが、それぞれのブラウジング コンテキストに最適な方法でコンテンツとコア機能にアクセスできます。
レスポンシブ ウェブ デザイン
2010 年に Ethan Marcotte が A List Apart に投稿した記事「レスポンシブ ウェブデザイン」以降、デザイナーとデベロッパーは、さまざまな画面サイズとデバイスで動作するユーザー インターフェースを作成するために、フレキシブルなエクスペリエンスを作成するよう推奨されています。
しかし、そのうちに、モバイル、タブレット、パソコンのサイズに短縮され、幅は iOS の画面サイズの影響を強く受けるようになりました。最新の CSS とレスポンシブ デザインの本来の意図に再び焦点を当てることで、柔軟なサイトに柔軟性を取り戻すことができます。
レスポンシブ ウェブデザインでは、次の 3 つの技術的な要素が導入されています。
- フルイド グリッド
- 柔軟なメディア
- メディアクエリ
Ethan は、これらの技術的要件だけでは不十分であり、今後の方向性として別の考え方が必要であると結論付けています。
モバイル ユーザーに関する神話
レスポンシブ デザインの初期段階では、サイトの設計を容易にするという名目で、さまざまな前提が立てられていました。たとえば、小規模なエクスペリエンスはスマートフォン向けで幅は 320 px、中規模のエクスペリエンスはタブレット向けで幅は 1,024 px、それ以上はパソコン向けでした。小画面にはタッチ機能があり、大画面にはありませんでした。スマートフォンのユーザーは急いでいて気が散っているため、「軽い」エクスペリエンスが必要でした。
ただし、この説明は誤りです。ユーザーのニーズは画面サイズやデバイスの種類だけでは根本的に異なるという思い込みから、モバイルの誤解が根付いています。これは精査に耐えません。
たとえば、モバイルとパソコンにインストールできるソーシャル ネットワークの PWA を例に挙げてみましょう。パソコンでは、多くのユーザーが作業中にフィードを画面の片側に表示した狭いウィンドウを開いています。そのため、利用可能な幅が狭いためモバイル デバイスを使用していると想定するのは誤りです。
ブラウザのタブから離れている PWA の環境では、ミニモードや折りたたみ式デバイスでの作業など、レスポンシブ デザインの世界に新たな課題も加わっています。
ミニモード
デスクトップ デバイスに PWA をインストールすると、ウィンドウが非常に小さくなることがあります。ブラウザのウィンドウやモバイル ビューポートよりも小さくなることもあります。これはウェブでは新しい機能です。200 x 100 CSS ピクセルという小さなウィンドウをサポートできるミニモードをサポートできます。
レスポンシブ ウェブ デザインのおかげで、音楽プレーヤーのコントロール ボタン、ダッシュボード情報、クイック アクションなど、ミニモードで何を提供するかを検討することをおすすめします。
PC では、ブラウザ用に設計した最小のウィンドウよりも小さいウィンドウで PWA をレンダリングできます。レスポンシブ ウェブ デザインの新しいブレークポイント、ミニモードを追加します。
折りたたみ式デバイスとハイブリッド
折りたたみ式デバイスやハイブリッド デバイスも一般的になっています。
- 小型のクラムシェル スマートフォン。
- スマートフォンやタブレットとして使用できる折りたたみ式デバイス。
- タブレットに変形できるノートパソコン。
- キーボードとトラックパッドを使用してノートパソコンとして使用できるタブレット。
- スマートフォンは、ハブを使用してデスクトップに変換できます。
課題はどのウェブサイトにも存在しますが、プログレッシブ ウェブアプリでは、アプリがインストールされるときのウィンドウの管理はお客様自身で行えます。そのため、あらゆるコンテキストで最適なエクスペリエンスを提供できるように、デザインを適応させる必要があります。
すべてを優先
では、どこから始めればよいでしょうか。モバイル ファースト、コンテンツ ファースト、オフライン ファースト？ウェブの柔軟性を考慮した設計では、次のうちどれが重要ですか。答えはイエスです。すべてを優先します。モバイル ファーストという用語は、Luke Wroblewski が 2009 年に初めて造作して以来、さまざまな形で解釈されてきました。たとえば、ウェブでのプラットフォーム固有の UI や UX パターンをエミュレートする、ウェブアプリを構築する前にモバイルアプリを構築する、最小幅のメディアクエリを使用して 1 日で呼び出すなど、多岐にわたります。ただし、この機能の元々の目的は、モバイルでは集中力が高まることです。Luke が言ったとおり、
モバイル デバイスの場合、ソフトウェア開発チームは、アプリケーション内の最も重要なデータやアクションだけに集中する必要があります。320 x 480 ピクセルの画面には、不要な要素を入れる余裕がありません。優先順位を付ける必要があります。そのため、モバイルファーストで設計すると、ユーザーが達成したい主要なタスクに焦点を当てたエクスペリエンスが実現します。デスクトップからアクセスするウェブサイトに散在する回り道やインターフェースの不要な要素は排除されます。これはユーザー エクスペリエンスの向上とビジネスの拡大につながります。
Luke Wroblewski
ウェブサイトの各ビューでは、ユーザーがそこで達成したい重要なタスクのみに焦点を当て、画面領域が広いことを理由にアイデアに余分なものを追加しないでください。
2 つ目の原則は、レスポンシブ ウェブ デザインで示唆されている「さまざまなエクスペリエンスのグラデーション」です。すべてのユーザーに同じピクセル単位のエクスペリエンスを提供することは、ほぼ不可能であるため、目標にすべきではありません。
ウェブ エクスペリエンスを固定的なものとして考えるのではなく、ユーザーのデバイスが現在のコンテキストに最適なエクスペリエンスを構築するために使用する一連の推奨事項として考えましょう。そのためには、段階的な機能強化の採用が必要です。
プログレッシブ エンハンスメント
プログレッシブ エンハンスメントは、標準 HTML、CSS、JavaScript をはじめ、あらゆる場所で実行できるコードを記述し、API が利用できない場合は適切な代替手段を使用して機能のレイヤを追加できるパターンです。
どのように改善しますか？機能検出とは、サポートのためのテストを実施し、そのテスト結果に基づいて対応するパターンです。そのためのウェブ プラットフォームの組み込みツールや手法はいくつかあります。
@supports を使用して、ブラウザが CSS 機能をサポートしているかどうかを確認し、その結果に基づいてルールを適用します。
これは CSS のプロパティと値の両方に適用されます。プロパティがサポートされていても値がサポートされていない場合、サポートされていないプロパティと同様に失敗します。JavaScript コードは CSSSupportsRule を介してこれにアクセスできます。
新しいウェブ プラットフォーム機能のほとんどは既存のオブジェクトに関連付けられているため、オブジェクト スタイル検出の「feature」は JavaScript で適切に機能します。要素のプロパティやメソッドのチェックなど、他の同様の検索も同様です。
最新の JavaScript を配信するには、module / nomodule パターンを使用して、最新のブラウザにはペイロードが小さく堅牢な機能を提供しながら、古いブラウザにはフォールバック エクスペリエンスを提供できます。これにより、Promise、クラス、アロー関数、const、let などの JavaScript 機能の新しいベースラインが保証され、ES モジュールをサポートするブラウザで使用できるようになります。
複数の特徴検出を組み合わせて、拡張ベースラインを作成することもできます。BBC ニュースチームが提唱したこの方法は、Cutting the Mustard と呼ばれ、コア機能はすべてのユーザーにリリースし、特定の機能検出バーに達した後にのみ機能の拡張を開始できます。
デバイスの検出を回避する
User-Agent 文字列に基づいてサポートを推測するのではなく、機能のサポート状況を直接テストしてください。
ユーザー エージェント文字列は、かつてないほど信頼できるものとなっています。存在するすべてのブラウザ、オペレーティング システム、デバイスの組み合わせについてほぼ完璧な知識を持ち、「正しく推測」する能力に依存しています。それでも、ユーザーのなりすましの対象になりやすくなります。たとえば、モバイル ブラウザでパソコン用サイトにリダイレクトする方法は、パソコンのユーザー エージェント文字列のなりすましと同じくらい簡単なものです。
さらに、ブラウザはユーザー エージェント文字列の固定に取り組んでおり、機能検出用のユーザー エージェント文字列は非推奨の理由として明記されています。これにより、ユーザーとデバイスの識別において、以前よりも信頼性が低下します。
コンテンツ ファースト
ウェブ向けの設計のもう 1 つの原則は、コンテンツから始めることです。たとえば、株価のグラフを用いたリアルタイムの株価ティッカーの核となるのは、一定期間の価格が記載された株式のテーブルで、サイトを更新するリンクが含まれていることもあります。
これを JavaScript やフェッチ リクエストによって拡張し、タイマーでテーブルの値を更新したり、ソケットを使用してリアルタイムで push ベースの更新を提供したりすることができます。また、CSS、SVG、Canvas などを使用して、結果をグラフ化する機能も再度拡張できます。しかし、その根幹はコンテンツから始まります。
本質的な設計
- モバイルをユーザー エクスペリエンスの制約として重視する。
- デザイン プロセスでコンテンツとコア機能を重視します。
- 可能な場合は高度な機能を使用して段階的に機能を強化します。
これらの原則を組み合わせることで、新しい「本質的な設計」が生まれます。Designing Intrinsic Layouts という講演で、Jen Simmons は、Grid、Flexbox、フロー レイアウト、書き込みモードなどの最新の CSS ツールを使用してユーザー インターフェースを設計、構築する方法について説明します。これらのツールを使用すると、次のことを行えます。
レイアウトを、持っているコンテンツと実現したいデザインに固有のものにすることができます。
Jen Simmons
この新しい CSS により、デザイナーはレイアウトをある程度制御できるようになりますが、最新のウェブデザインの原則に沿った方法で制御できます。固定の画面サイズに基づいて固定のフォームを作成するのではなく、コンテンツの固有のプロパティ（サイズの制限、テキストのサイズ、使用可能なスペースなど）をすべて一度に利用して、レイアウトを決定するコンテンツベースのルールを定義します。コンテンツと連動したデザインを実現でき、ピクセルの配置をすべて制御する必要はありません。
イントリンシック レイアウトは、ウェブ上の制御に関する議論を完結させ、定義を与えます。ウェブでの制御とは、サイトにアクセスする各ユーザーのデバイス、画面サイズ、色、フォント、レイアウト、機能を指示することではありません。ウェブのコントロールとは、ブラウザがエクスペリエンスを組み立てるために使用するルールを記述し、プログレッシブ ウェブアプリのユーザーごとに独自のルールを構築することです。
ウェブ パフォーマンス
最後に、PWA の重要な基盤としてウェブ パフォーマンスがあります。優れたユーザー エクスペリエンスを提供することは必須条件です。あらゆる面でコンバージョンの増加につながります。
ウェブのパフォーマンスには、次のステップが含まれます。
- 利用可能なユーザー本位の主要な指標を理解する。
- すべての指標に目標を設定する。
- PWA を測定する。
- コードまたはサーバーでテクニックとベスト プラクティスを静的に適用して、指標を改善します。
- もう一度測定しましょう。
- ユーザーのコンテキストに基づいて、各ユーザーのエクスペリエンスをリアルタイムで改善します。
現在のウェブ パフォーマンス指標は、コンテンツが画面に表示されるまでの速さだけでなく、ウェブサイトのインタラクティビティやユーザーがエクスペリエンスをどのように認識しているかについても測定します。
Core Web Vitals
過去 10 年間、Google はウェブ パフォーマンスの成功を測定するためにさまざまな指標を扱ってきました。現在、Core Web Vitals と呼ばれる一連の推奨指標は、パフォーマンスとユーザー エクスペリエンスに影響する 3 つの主要領域に重点を置いています。
- 読み込み - Largest Contentful Paint（LCP）
- インタラクティビティ - Interaction to Next Paint（INP） で表されます。
- 視覚的な安定性 - Cumulative Layout Shift（CLS）で表されます。
Core Web Vitals を使用すると、パフォーマンスとユーザー エクスペリエンスの観点から PWA の状態をひと目で把握できます。
PWA の基礎
すべてのユーザーに優れたエクスペリエンスを提供するための基盤として、PWA にはレスポンシブ デザイン、モバイル ファースト、本質的なデザイン、ウェブ パフォーマンスの確固たる基盤が必要です。