強固な基盤
強固な基盤は、優れた PWA を構築するための基本要件です。この基盤を実装するには、次の原則に沿って、ウェブの制約に合わせて設計とコーディングを行う必要があります。
- モバイルを制約の対象にする。デザインの各ビューが重要なコンテンツとインタラクションのみに焦点を当てるようにしてください。
- デザイン プロセスでコンテンツとコア機能を強調します。
- 必要に応じて段階的に拡張する。まず、最もシンプルで広範に利用できるツールを使用して、コンポーネントのコア コンテンツと機能を構築します。アクセスしやすくします。使用したい高度な機能をテストしてコンポーネントを強化します。
- ユーザー中心のウェブ パフォーマンス指標に重点を置いた高速で優れたユーザー エクスペリエンスを提供し、実際のユーザーに関する指標を取得し、ネットワーク接続、入力タイプ、CPU、GPU パワーに関係なく、すべてのユーザーのパフォーマンスを活用できます。
これらの原則に従い、最新のパターンやウェブ機能で機能を強化することで、本質的なデザインで優れたエクスペリエンスを創出できます。 ピクセルの代わりに制約を取り入れたデザイン。これにより、すべてのユーザーがそれぞれのブラウジング環境に適した方法でコンテンツとコア機能にアクセスできるようになります。
レスポンシブ ウェブ デザイン
Ethan Marcotte の 2010 年の記事「A List Apart」レスポンシブ ウェブ デザイン以降、デザイナーとデベロッパーは柔軟なエクスペリエンスを作成し、さまざまな画面サイズやデバイスで動作するユーザー インターフェースを作成することが奨励されてきました。
しかし、その後どこかでモバイル、タブレット、PC のサイズに縮小され、幅は iOS の画面サイズに大きく影響されます。最新の CSS とレスポンシブ デザインの本来の意図に改めて焦点を当てることで、スクイーズなサイトに再びアクセスできるようになります。
レスポンシブ ウェブ デザインには、次の 3 つの技術的要素があります。
- 流体グリッド
- フレキシブル メディア
- メディアクエリ
イーサンは 技術要件だけでは不十分で 新たな考え方も必要としています
モバイル ユーザーに関する誤解
レスポンシブ デザインの初期には、サイトのデザインを容易にすることを目的に、いくつかの前提が作られていました。たとえば、「スモール」エクスペリエンスはスマートフォン向け、「中」エクスペリエンスはタブレット向け、 「中」レベルはタブレット向け、幅は 1,024 ピクセル、デスクトップ向けはそれよりも大きなサイズでした。 小画面にはタップ機能がありましたが、大画面にはできませんでした。ユーザーは急いでいて気が散ってしまうため、「軽い」エクスペリエンスが必要でした。
これはどれも当てはまりません。これは、単に画面サイズやデバイスの種類によってユーザーのニーズが根本的に異なるという仮説に根差した、モバイルの都市伝説です。 これは精査に耐えられません。
たとえば、今すぐモバイルとパソコンにインストールできるソーシャル ネットワーク PWA を考えてみます。 パソコンの場合、多くのユーザーは画面片側にフィードを狭くして作業している間、モバイル デバイスを使用していると想定して利用可能な幅が不正確になります。
ブラウザのタブから切り離される PWA は、ミニモードや折りたたみ式デバイスへの対応など、レスポンシブ デザインの世界に新たな課題をもたらしています。
ミニモード
PWA をデスクトップ デバイスにインストールすると、ウィンドウが非常に小さくなる場合があります。つまり、ブラウザのウィンドウよりも小さく、モバイルのビューポートよりも小さくなります。これはウェブで新しく、200x100 CSS ピクセルのミニモード ウィンドウに対応しています。
最近 PWA を作成する際は、音楽プレーヤーのコントロールボタン、ダッシュボード情報、クイック操作など、レスポンシブ ウェブ デザインにより、ミニモードで何を提供するかを検討することをおすすめします。
パソコンでは、PWA はブラウザ用にデザインした最小ウィンドウよりも小さいウィンドウでレンダリングされることがあります。レスポンシブ ウェブ デザイン用の新しいブレークポイントであるミニモードが追加されます。
折りたたみ式デバイスとハイブリッド
最近では、折りたたみ式デバイスやハイブリッド デバイスも一般的です。
- 小型のクラムシェル スマートフォン。
- スマートフォンやタブレットとして使用できる折りたたみ式デバイス。
- タブレットとしても使えるノートパソコン。
- キーボードとトラックパッドを備えたノートパソコンとして機能できるタブレット。
- ハブを備えたスマートフォンもデスクトップに変えることができます。
この課題はすべてのウェブサイトにありますが、プログレッシブ ウェブアプリでは、アプリのインストール時にウィンドウを自分で管理し、責任を負います。したがって、あらゆる状況で反応し、最高のエクスペリエンスを提供できるデザインにする必要があります。
すべてを優先
では、どこから手をつければよいでしょうか。モバイル ファースト、コンテンツ ファースト、オフラインファーストウェブの柔軟性を考慮した設計とは何でしょうか。答えはイエスです。すべてまずです。「モバイル ファースト」という用語は、2009 年に Luke Wroblewski が初めて考案して以来、さまざまな意味で解釈されてきました。たとえば、ウェブ上でプラットフォーム固有の UI や UX パターンをエミュレートすることから、ウェブアプリを構築する前にモバイルアプリを構築することから、最小幅のメディアクエリを使用するだけで日常生活を送ることまで、多岐にわたります。しかし、本来の意図は「モバイルは集中力を高める」ということです。Luke が次のように述べています。
モバイル デバイスの場合、ソフトウェア開発チームは、アプリケーションで最も重要なデータとアクションのみに集中する必要があります。320 x 480 ピクセルの画面には無関係な不要な要素を入れるスペースがありません。優先順位を付ける必要があります。 したがって、チームがモバイル ファーストを設計すれば、ユーザーが達成したい重要なタスクに集中して取り組むことができ、PC からアクセスする今日のウェブサイトに散在する迂回路やインターフェースのゴミがなくなります。これは優れたユーザー エクスペリエンスであり、ビジネスにとってもメリットとなります。
Luke Wroblewski
ウェブサイトの各ビューは、ユーザーがそこで達成したい重要なタスクのみに集中するようにします。画面スペースが広いからといって、アイデアに余計なものを加えないでください。
2 つ目の原則は、レスポンシブ ウェブ デザインにある「さまざまなエクスペリエンスのグラデーション」をほのめかしています。 ユーザー 1 人につき 1 つの同じピクセル完璧な体験を提供することは、仕事の目標ではありません。そうすることは不可能です。
ウェブ エクスペリエンスは決まったものとして考えるのではなく、ユーザーのデバイスが現在の状況に最適なエクスペリエンスを構築するために使用する一連の推奨事項ととらえてください。そのためには、プログレッシブ エンハンスメントを採用する必要があります。
プログレッシブ エンハンスメント
プログレッシブ エンハンスメントは、あらゆる場所で実行されるコードを記述できるパターンです。標準の HTML、CSS、JavaScript に始まり、さらに機能レイヤを追加して、API が利用できない場合の適切なフォールバックを提供します。
どのように強化すればよいでしょうか。機能検出は、サポートに関するテストを実行し、そのテスト結果に基づいて対応するパターンです。そのための組み込みのウェブ プラットフォーム ツールとプラクティスがいくつかあります。
@supports を使用して、ブラウザによる CSS 機能のサポートを確認し、その結果に基づいてルールを適用します。
これは CSS のプロパティと値の両方に当てはまります。あるプロパティがサポートされているのに値がサポートされていない場合は、失敗し、サポートされていないプロパティも失敗します。JavaScript コードは、CSSSupportsRule を介してこれにアクセスできます。
ウェブ プラットフォームの新しい機能のほとんどは、既存のオブジェクトにアタッチされているため、オブジェクト スタイル検出の「feature」は JavaScript でも適切に機能します。要素のプロパティやメソッドのチェックなど、他の同様のルックアップを行う場合も同様です。
最新の JavaScript を提供するには、module/nomodule パターンを使用して、最新のブラウザには小さなペイロードで、古いブラウザにはフォールバック エクスペリエンスで、より堅牢な機能を提供できます。これにより、Promise、クラス、アロー関数、const や let などの JavaScript 機能の新しいベースラインが、ES モジュールをサポートするブラウザで使用できるようになります。
複数の形式の特徴検出を組み合わせて、強化されたベースラインを作成することもできます。BBC News チームが考案した「Cutting the Massard」と呼ばれるこのアプリでは、主要なエクスペリエンスをすべてのユーザーに提供し、機能によって検出される特定の基準値に到達した後にのみ、エクスペリエンスの強化を開始できます。
デバイス検出を回避する
ユーザー エージェント文字列に基づいてサポートを前提にするのではなく、機能のサポートを直接テストする必要があります。
これまでユーザー エージェント文字列の信頼性は高くありませんでした。 「正しく推測」するには、存在するすべてのブラウザ、オペレーティング システム、デバイスの組み合わせに関するほぼ完全な知識を持っている必要があります。その場合でも、ユーザーのなりすましには耐えられます。たとえば、モバイル ブラウザでのパソコン向けサイトのリダイレクトは、多くの場合、パソコンのユーザー エージェント文字列を偽装するのと同じくらい簡単です。
さらに、ブラウザはユーザー エージェント文字列を凍結する作業を進めており、機能検出用のユーザー エージェント文字列は非推奨となっています。この文字列は、ユーザーとデバイスを識別する際の信頼性が以前よりもさらに低下しています。
コンテンツを最優先する
ウェブ向けのデザインのもう 1 つの原則は、まずは自分のコンテンツから始めることです。たとえば、株価のグラフを含むリアルタイムの株価ティッカーは、基本的には一定期間の株価を示す株価の表です。サイトを更新するためのリンクが含まれている場合もあります。
さらに、タイマーでテーブルの値を更新する JavaScript と fetch リクエストで拡張することも、リアルタイムの push ベースの更新を提供するためにソケットで拡張することもできます。これもまた、CSS、SVG、Canvas などを使用して、結果をグラフ化できます。しかし、核心はコンテンツから始まります。
本質的な設計
- モバイルは、ユーザー エクスペリエンスの制約となる制約です。
- デザイン プロセスでコンテンツとコア機能を強調する。
- 可能な場合は高度な機能で段階的に強化。
これらの原則を組み合わせることで、新しいもの、すなわち本質的な設計が実現しています。講演の Designing Intrinsic Layouts で、Jen Simmons は、グリッド、Flexbox、フロー レイアウト、書き込みモードなどの最新の CSS ツールを使用して、ユーザー インターフェースを設計および構築する方法について説明しています。これらのツールを使って、彼女は次のように話します。
実際に、既存のコンテンツや意図するデザインに組み込まれたレイアウトにすることができます。
Jen Simmons
この新しい CSS により、デザイナーはレイアウトをある程度制御できるようになりますが、これは最新のウェブデザイン原則に沿った方法で行われます。固定の画面サイズに基づく固定フォームを作成する代わりに、コンテンツ ベースのルールを定義します。コンテンツ ベースのルールでは、コンテンツの本来備わっているプロパティ（コンテンツの大きさ、テキストのサイズ、利用可能なスペースなど）を利用してレイアウトを作成します。これにより、ピクセルの配置を個別に制御することなく、コンテンツと連動してデザインを実現できます。
組み込みレイアウトにより、ウェブでの制御に関する会話が定義を与えるものとなります。ウェブでの管理とは、サイトにアクセスするユーザーごとに、デバイス、画面サイズ、色、フォント、レイアウト、機能を指定することではありません。ウェブでのコントロールとは、ブラウザでユーザー エクスペリエンスを構築するために使用するルールを記述し、プログレッシブ ウェブアプリでユーザーごとに独自に構築することです。
ウェブ パフォーマンス
最後に、この PWA の最も重要な基盤はウェブ パフォーマンスです。ユーザーの利便性を高めることは あらゆる面でコンバージョンの増加につながります
ウェブ パフォーマンスにはいくつかのステップがあります。
- 利用可能なユーザー中心の主要な指標を理解する。
- すべての指標に目標を設定します。
- PWA を測定します。
- 手法やベスト プラクティスをコードやサーバーに静的に適用することで、指標を改善します。
- もう一度測定してください。
- ユーザーのコンテキストに基づいて、ライブで各ユーザー エクスペリエンスを改善します。
今日のウェブ パフォーマンス指標では、コンテンツが画面に表示される速度だけでなく、ウェブサイトのインタラクティブ性やユーザーが目にしたエクスペリエンスの程度も測定されます。
ウェブに関する指標
この 10 年間、Google はウェブ パフォーマンスの成果を測定するために、さまざまな指標を扱ってきました。 現在、推奨される一連の指標は、プロジェクト「ウェブに関する指標」にまとめられています。 ウェブに関する指標では、ウェブのパフォーマンスと認識に影響する 3 つの主な領域の指標に重点を置いています。
- 読み込み中
- インタラクティブ
- 視覚的な安定性
Core Web Vitals を使用すると、PWA のウェブ パフォーマンスやユーザー エクスペリエンスがどの程度良好か、悪いかを一目で確認できます。
PWA の基礎
PWA は、レスポンシブ デザイン、モバイルなどのすべて、本質的なデザイン、すべてのユーザーに優れたエクスペリエンスを提供するためのウェブ パフォーマンスの強固な基盤を持つことが重要です。