【UIデザイナーのためのWeb技術入門】気持ちいいUIの縁の下の力持ち、非同期通信 | willstyle.U

こんにちは。willstyle.Uでディレクターをしている藤田です。

今年は本格的な夏が始まるのが遅く、5~7月と比較的心地良い気候が続きましたね。8月になってようやく夏が来たなとニッコリしていたのもつかの間、秋の過ごしやすい季節が待ち遠しい今日このごろ。人間とは愚かなものです。私が愚かなだけかもしれませんが。

さて、今回は、前回からはじまりましたシリーズ、【UIデザイナーのためのWeb技術入門】の第2弾です。

前回はリクエストとレスポンスの基本を学びました。今回は、現代の洗練されたWebアプリケーションの肝である、「ページを切り替えずに、その場で画面の一部だけを書き換える仕組み、非同期通信」について深掘りします。

非同期通信とは

前回の記事で、Web通信とは、ユーザー側≒クライアントがサーバーに対して「この情報ください」とリクエスト。それに対してサーバーからレスポンスとしてデータが届くと説明しました。このように、クライアントとサーバーが交互に処理を行い、同調して通信をすることを「同期通信」と呼びます。

同期通信だと、サーバーがクライアントに返すデータの処理を行っている間、クライアントは待つことしかできません（出来るとしたら、スケルトンスクリーンを表示して、ユーザーをなだめる程度でしょうか）。この通信では、送受信するデータも多くなるため、全体としてページの更新に時間がかかるほか、サーバーへの負担も大きくなります。

この同期通信の欠点を補うために登場したのが非同期通信です。この通信を可能にする技術をAjax（エイジャックス）と呼びます。Ajaxでは、クライアント側であるブラウザ上で、JavaScriptが動き、サーバーと通信。それによって得られたデータを元に、ブラウザにデータを表示します。

結局、同期通信と何がちがうの

平たく言えば、同期通信だと、何かアクションを起こすたびに、画面全体が真っ白になり、ヘッダーもフッターも全部丸ごと新しく読み直すことになります。一方Ajaxを使用した非同期通信であれば、画面はそのままで、必要なデータだけを裏側でこっそり取ってきて、画面の一部だけを書き換えることができます。

非同期通信であれば、スピーディにアクションを起こすことができるほか、ページ遷移がないので、並行して他の操作ができるわけですね。

非同期通信によるUX向上の3つの視点

非同期通信を前提としたUI設計により、使い心地のいいインタラクションを実現することで、UXを向上させることができます。

① ユーザーの文脈が途切れない

例えば画像のようなUIで、削除のアクションが同期通信であれば、画面全体がリロードされ、削除モーダルが閉じてしまい、ユーザーは「今どこにいたっけ？」と迷ってしまいます。非同期通信にすることで、モーダルを開いたまま「削除完了」のメッセージを出し、ユーザーを安心させることができます。

② スクロール位置や入力内容を保持できる

例えば大量の製品リストを上から見ていて、途中でフィルターをかけるとき、同期通信だとページがリロードされて一番上までスクロールが戻ってしまいます。非同期なら、ユーザーがスクロールした位置をキープしたまま、コンテンツだけをサッと切り替えられます。

③ 部分的なエラーハンドリングができる（全体が壊れない）

画面に実装されている一部のパーツ（例：サイドバーの天気予報情報）の通信が失敗しても、メインのコンテンツは問題なく表示し続けることができます。

非同期通信が使われるUI事例

デザイナー・ディレクター視点では、非同期通信について知っておくと、機能要件を考える時、あるアクションを実行するときに、ページをリロードするかどうかを決定するのに役立ちます。ここでは、非同期通信が用いられる代表的なUIについて紹介します。

その場で完結させたいアクション（いいね！・お気に入り）

いいねボタンを押すたびに画面全体がリロードされたらユーザーは興ざめしてしまいますよね。非同期通信を前提にすることで、ボタンの色が変わる・カウントが増える、といった、その場での気持ちいいインタラクションが設計できます。

検索サジェスト

ユーザーの操作に合わせてその場で結果が変わる検索サジェスト（インクリメンタルサーチ）も非同期通信の代表格ですね。

例えばSpotifyで曲名を検索窓に打ち込むと、1文字入力するごとに裏で非同期通信が走り、曲のリストがリアルタイムで絞り込まれます。

無限スクロール

SNSや動画アプリ、Pinterestなどで定番となっている無限スクロールも非同期通信で成り立っています。次のページへボタンを押して画面遷移させるのではなく、ユーザーが画面の最下部に近づいたタイミングで、裏でこっそり次の10件のデータをリクエスト・取得して画面の下に継ぎ足します。ユーザーの閲覧体験を途切れさせない設計です。