プログレッシブウェブアプリ開発における14のコツ―UXを完璧に保つために

ウェブアプリケーションの開発には、Webサイト、アプリ、ソフトウェア製品との境界にあるため、独自の課題があります。ブラウザで機能し、豊かなデスクトップソフトウェアを提供しながら、ネイティブアプリのように動作しているように見える必要があります。

 

これらの課題に対処するため、ここでは、ユーザーエクスペリエンスを完璧に保つための14の方法をご紹介します。

 

 

1.独特のアイコンを作成する

ユーザーと対話を開始する前にアプリのテイストを伝えるには、ネイティブアプリの重要なガイドラインに従ったアイコンを作成します。独特で、異なる背景に目立つようにシンプルで、色合いなどのさまざまな要素に簡単に対応できるようにする必要があります。

 

 

2.読み込み時間に注意を払う

一度プログレッシブウェブアプリ（PWA）を開くと、ユーザーはWebサイトを使用していてページが読み込まれるまで待つべきではありません。代わりに、ローカルで実行されるネイティブアプリのように動作するはずです。

 

遅いネットワークは通常、問題を引き起こします。これに対して簡単な修正は、最初のネットワークではなくキャッシュファーストのアプローチを行い、最小限の要素をロードすることです。

 

 

3.パフォーマンスを向上させる

Googleのアドバイスに従って、重要なリソースをプッシュし、初期ルートをレンダリングし、ルートをプリキャッシュし、残りの部分を遅延ロードするPRPLパターンを実装する必要があります。これはキャッシュ効率を向上させます。

 

 

4.スピードの優先順位付け

サーバーとネットワークだけではありません。あなたはアプリの設計段階からのスピードを考えなければなりません。ページ、写真、必要なログイン情報などに表示される大量の情報を最適化することから始まります。アプリをテストして2秒以内に目標を設定するか、ユーザーが待機している間にエンターテインメントを構築します。

 

 

5.コンテンツをレスポンシブにする

ネイティブアプリはデフォルトでレスポンシブであり、利用可能なスペースを最大限に活用します。これは、可能な限り最高のUXを提供するためにPWAが学ぶ必要のあるレッスンです。プレースホルダを使用して、コンテンツが読み込まれている間にユーザーに次に何が起こるか予測させ、あらかじめサイズが正しく設定されておらず、イメージのサイズが動的に変更されていない場合に表示される「ジャンプイメージ効果」を最小限に抑えます。

 

 

6.ユーザーとのコミュニケーション

技術革新のスピードは、ユーザーがデバイスとやり取りする方法や期待に変化をもたらしました。彼らは即時のフィードバックと満足感を求めています。可能な場合は、実行可能なタップを強調表示するか、デバイスを振動させるなど、すべてのコマンドが何らかの方法で確認されていることを確認してください。

 

 

7.望ましくない相互作用を避ける

モバイルデバイスのスペース制限のため、欠陥のあるデザインは、リストをスクロールしながらアイテムを開くなどの望ましくない動作に変換される可能性があります。また、フィードバックは歓迎されますが、システムからの返信を要求する問題のために排他的に予約する必要があります。

 

ボタンやその他のインタラクティブなアイテムをプレーンなコンテンツとして選択することも望ましくありません。これは、CSSに正しく記載されています。

 

 

8.キーボードを離しておく

効率を最大限に高めるために、キーボードはユーザーが書き込んだメッセージを隠すべきではありません。このバグは、通常、ランドスケープモードで表示されるため、要素をスクロールして表示することは避けてください。

 

 

9.タッチ入力に配慮する

PWAの場合、主な入力方法はデバイスのタッチスクリーンになる可能性があります。アプリのナビゲーションにはタッチオプションが表示され、アイコンにはその機能が表示されます。対応しているウェブサイトの主流となった「ハンバーガーメニュー」には一般的な合意がありますが、PWAでは避けるべきです。

 

 

10.派手なフォントを避ける

フォントはメッセージを配信するためのチャネルに過ぎず、オペレーティングシステムのネイティブ環境設定とメッセージを一致させることをお勧めします。これにより、ユーザーは視覚的な気を散らすことなく快適に感じられ、自然にやりとりすることができます。

 

11.ウェブデザイン標準に従わない

あなたがウェブデザインのバックグラウンドを持っているなら、あなたが知っているものをすべて忘れて、きれいなスレートで始めましょう。ミニマルなデザインに慣れ、ページ要素の最小限を維持し、aboutセクションのすべてのメタ情報を破棄します。リンクやボタンは慎重に使用し、タップやスワイプなどのよりダイナミックな操作を追加できます。

 

 

12.ユーザー中心にする

プログレッシブウェブアプリの肝はすべて、ユーザーができるだけ早く便利に目的を達成できるよう支援することです。ここでは「less is more」アプローチは常に勝者になるので、各アイテムの重要性を再確認してください。

 

 

13.シンプルに保つ

あなたは複雑なデザインやレイアウトでユーザーを感動させたいかもしれませんが、その目標はここで達成すべきではありません。実際、従来の基準からあまりにも遠すぎるアプローチを使用すると、反対の効果があり、ユーザーの注意をそらすだけでなく、不満を募らせます。デザインを機能的に保ち、意図した目的に合うようにしてください。

 

 

14.オフラインを考える

グリッドを数分から数日間はずすことは、私たちのモビリティの強化の一環であり、ウェブアプリの設計者は自社の製品を通じてそのことを認めるべきです。主な機能をオフラインで使用できるようにして、キャッシュオプションを含めてPWAを最大限に活用してください。

 

 

 

 

▼こちらの記事もおすすめです！

 

 

 

 

 

※本記事は14 Ways to Take UX to the Next Level for Progressive Web Appsを翻訳・再構成したものです。