強固な基盤
強固な基盤は、優れた PWA を構築するための基本要件です。この基盤を実装するには、次の原則に沿って、ウェブの制約に合わせて設計とコーディングを行う必要があります。
- モバイルを制約の対象にする。デザインの各ビューが重要なコンテンツとインタラクションのみに焦点を当てるようにしてください。
- デザイン プロセスでコンテンツとコア機能を強調します。
- 必要に応じて段階的に拡張する。まず、最もシンプルで広範に利用できるツールを使用して、コンポーネントのコア コンテンツと機能を構築します。アクセスしやすくします。使用したい高度な機能をテストしてコンポーネントを強化します。
- ユーザー中心のウェブ パフォーマンス指標に重点を置いた高速で優れたユーザー エクスペリエンスを提供し、実際のユーザーに関する指標を取得し、ネットワーク接続、入力タイプ、CPU、GPU パワーに関係なく、すべてのユーザーのパフォーマンスを活用できます。
これらの原則に従い、最新のパターンやウェブ機能で機能を強化することで、本質的なデザインで優れたエクスペリエンスを創出できます。ピクセルではなく制約を使用したデザイン。これにより、すべてのユーザーが、それぞれのブラウジング環境に適した方法でコンテンツとコア機能にアクセスできるようになります。
レスポンシブ ウェブ デザイン
Ethan Marcotte が 2010 年に投稿した A List Apart の記事、レスポンシブ ウェブ デザイン以降、デザイナーとデベロッパーは柔軟なエクスペリエンスを創出し、さまざまな画面サイズとデバイスで動作するユーザー インターフェースを実現することが奨励されてきました。
しかし、その後どこかでモバイル、タブレット、パソコンのサイズに縮小され、幅は iOS の画面サイズに大きく影響されます。最新の CSS とレスポンシブ デザインの本来の意図に改めて焦点を当てることで、スクイーズなサイトに再びアクセスできるようになります。
レスポンシブ ウェブ デザインには、次の 3 つの技術的要素があります。
- 流体グリッド
- フレキシブル メディア
- メディアクエリ
Ethan は、これらの技術的要件では十分ではなく、別の考え方も必要と結論付けています。
モバイル ユーザーに関する誤解
レスポンシブ デザインの初期には、サイトのデザインを容易にすることを目的に、いくつかの前提が作られていました。たとえば、スモール エクスペリエンスはスマートフォン向けで、幅は 320 ピクセル、ミディアム エクスペリエンスはタブレット、幅は 1,024 ピクセルで、パソコン向けはそれより大きいサイズです。小画面にはタップ機能がありましたが、大画面にはできませんでした。ユーザーは急いでいて気が散ってしまうため、「軽い」エクスペリエンスが必要でした。
これはどれも当てはまりません。これは、単に画面サイズやデバイスの種類によってユーザーのニーズが根本的に異なるという仮説に根ざした、モバイルの都市伝説です。これは精査に耐えられません。
たとえば、今すぐモバイルとパソコンにインストールできるソーシャル ネットワーク PWA があるとします。パソコンの場合、多くのユーザーは、作業中は画面の片側にフィードを狭いウィンドウのままにして、モバイル デバイスを使用していると想定して、使用可能な幅が不正確になります。
ブラウザのタブから切り離される PWA は、ミニモードや折りたたみ式デバイスへの対応など、レスポンシブ デザインの世界に新たな課題をもたらしています。
ミニモード
PWA をデスクトップ デバイスにインストールすると、ウィンドウが非常に小さくなることがあります。つまり、ブラウザのウィンドウよりも小さく、モバイルのビューポートよりも小さくなる場合があります。これはウェブで新しく、200x100 CSS ピクセルのミニモード ウィンドウに対応しています。
最近 PWA を作成する際には、音楽プレーヤーのコントロール ボタン、ダッシュボード情報、クイック アクションなど、レスポンシブ ウェブ デザインにより、ミニモードで何を提供するかを検討することをおすすめします。
パソコンでは、PWA はブラウザ用にデザインした最小ウィンドウよりも小さいウィンドウでレンダリングされることがあります。レスポンシブ ウェブ デザイン用の新しいブレークポイントであるミニモードが追加されます。
折りたたみ式デバイスとハイブリッド
最近では、折りたたみ式デバイスやハイブリッド デバイスも一般的です。
- 小型のクラムシェル スマートフォン。
- スマートフォンやタブレットとして使用できる折りたたみ式デバイス。
- タブレットとしても使えるノートパソコン。
- キーボードとトラックパッドを備えたノートパソコンとして機能できるタブレット。
- ハブを備えたスマートフォンもデスクトップに変えることができます。
この課題はすべてのウェブサイトにありますが、プログレッシブ ウェブアプリでは、アプリのインストール時にウィンドウを自分で管理し、責任を負います。したがって、あらゆる状況で反応し、最高のエクスペリエンスを提供できるデザインにする必要があります。
すべてを優先
では、どこから手をつければよいでしょうか。モバイル ファースト、コンテンツ ファースト、オフラインファーストウェブの柔軟性を考慮した設計とは何でしょうか。答えはイエスです。すべてまずです。「モバイル ファースト」という用語は、2009 年に Luke Wroblewski が初めて考案して以来、さまざまな意味で解釈されてきました。たとえば、ウェブ上でプラットフォーム固有の UI や UX パターンをエミュレートすることから、ウェブアプリを構築する前にモバイルアプリを構築することから、最小幅のメディアクエリを使用するだけで日常生活を送ることまで、多岐にわたります。しかし、本来の意図は「モバイルは集中力を高める」ということです。Luke が次のように述べています。
モバイル デバイスの場合、ソフトウェア開発チームは、アプリケーションで最も重要なデータとアクションのみに集中する必要があります。320 x 480 ピクセルの画面には無関係な不要な要素を入れるスペースがありません。優先順位を付ける必要があります。 したがって、チームがモバイル ファーストを設計すれば、ユーザーが達成したい重要なタスクに集中して取り組むことができ、PC からアクセスする今日のウェブサイトに散在する迂回路やインターフェースのゴミがなくなります。これは優れたユーザー エクスペリエンスであり、ビジネスにとってもメリットとなります。
Luke Wroblewski
ウェブサイトの各ビューは、ユーザーがそこで達成したい重要なタスクのみに集中するようにします。画面スペースが広いからといって、アイデアにこれ以上のものを加えないでください。
2 つ目の原則は、レスポンシブ ウェブ デザインにある「さまざまなエクスペリエンスのグラデーション」をほのめかしています。あらゆるユーザーに同じピクセル パーフェクトなエクスペリエンスを 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 を測定します。
- 手法やベスト プラクティスをコードやサーバーに静的に適用することで、指標を改善します。
- もう一度測定してください。
- ユーザーのコンテキストに基づいて、ライブで各ユーザー エクスペリエンスを改善します。
今日のウェブ パフォーマンス指標では、コンテンツが画面に表示される速度だけでなく、ウェブサイトのインタラクティブ性やユーザーがエクスペリエンスをどのように認識しているかも測定されます。
Core Web Vitals
この 10 年間、Google はウェブ パフォーマンスの成果を測定するために、さまざまな指標を扱ってきました。現在、ウェブに関する主な指標と呼ばれる一連の推奨指標は、パフォーマンスとユーザー エクスペリエンスに影響する次の 3 つの主要分野に重点を置いています。
- 読み込み - Largest Contentful Paint(LCP)で表されます。
- インタラクティビティ - Interaction to Next Paint(INP)で表されます。
- 視覚的な安定性 - Cumulative Layout Shift(CLS)で表します。
Core Web Vitals を使用すると、パフォーマンスやユーザー エクスペリエンスに関して PWA のパフォーマンスを一目で確認できます。
PWA の基礎
PWA は、レスポンシブ デザイン、モバイルなどのすべて、本質的なデザイン、すべてのユーザーに優れたエクスペリエンスを提供するためのウェブ パフォーマンスの強固な基盤を持つことが重要です。