本当に「優れたUX」を目指そう～AI技術やA/Bテストでフロントエンドを改善し続ける方法

　本連載ではクラウドネイティブなWebアプリを手軽に、短時間で作りたい方を対象に、Webアプリ開発の最新事情をひも解きつつ、最適な開発ツール「K5 Playground」の概要と活用法を紹介してきました。前回は、K5 Playgroundでプロトタイピングを高速に行う技術を紹介しました。最終回となる今回は、プロトタイプを発展させていきます。はじめに課題をAI技術などで改善します。その後、「優れたUX」とは何かに触れながら、A/BテストによってUXを継続的に改善する手法を解説します。

課題を解決してUXを継続的に改善する

　さて今回で連載は最後です。アプリケーションは、はじめに考えていた機能を実装したら終わりではなく、そこからがスタートです。ユーザーの声を聞いたり、行動を分析したり、手を加えながら磨き上げていく必要があります。

　今回は、実際のプロジェクトで発生した案件をK5 Playgroundのアプリとして作ってみて、課題を解決してUXを継続的に改善する方法を説明します。今回は「Twitterでの人気の観光スポットに関するツイートを地図上にリアルタイムに表示させて把握したい」といった要件があるとします。「人気の観光スポット」は実際の要件とは全く変えています。

1. これまでのようにK5 Playgroundにアクセスして、Mapテンプレートを選択します。

2. バックエンド編集画面を開いてAPIロジックを編集します。

　SNSのメニューから"Twitter - Search Tweets"をドラッグ＆ドロップします。 query には検索ワードを入力します。

const query = '名所'; //Twitterの検索ワード

　開発スピードのためにまずは任意のHTTPリクエストに対して固定ワードをTwitterで検索するAPIとします。

　そして、Twitterからのレスポンスを整形するために、Customメニューから"Empty Logics"をドラッグ＆ドロップします。Twitterのレスポンスで地理情報 coordinatesキーを持つものだけにフィルタリングします。

 //地理情報(coordinates)付きのTweetオブジェクトにフィルタリング
 const tweets = results.filter(x => x.coordinates).map(x => {
   //Mapテンプレートが扱える形式にする
   return {
     name: x.tweet,
     lng: x.coordinates.coordinates[0],
     lat: x.coordinates.coordinates[1],
     original: x
   }
 });
 next(tweets); //フロントエンドに渡して終了。

　originalキーに元のツイートを付けてフロントエンドに改善の余地を持たせています。最適化は後回しにして、UXを改善する際に利用する可能性のある情報を渡します。K5 Playgroundで必要な手順は以上2点です。

現在の画面の例

3. アプリをダウンロードして解凍したらこれまでと同様に起動します。あらかじめTwitterのTokenを　Twitter Appsから取得しておきます。

Twitterのレスポンスには地理情報がほとんど付いていない

　アプリを起動させると、地図上が寂しいことに気づきます。たいていは何も表示されず、まれに1件表示される程度かと思います。原因を確かめるためにBFFのロジック backend/logics/tweetsGET.js でTwitterのレスポンスをデバッグしてみます。

console.log("ツイート:", results.statuses.length);
console.log("地理情報付きツイート:", results.statuses.filter(x=>x.coordinates).length);

ツイート: 100
地理情報付きツイート: 1

　地理情報付きのツイートの比率は1％以下と極わずかでした。この結果を考慮すると、Twitterのレスポンスの coordinates キーだけから地図系のアプリを作るには、課題があることがわかりました。アプリ開発を中断すべきでしょうか。

　まだ解決策はあります。ツイート本文に注目します。ツイート本文から地理に関係する固有名詞とその緯度・経度を取得できれば解決です。緯度と経度があれば地図上に表示できるだけでなく、地理空間インデックスを持つMongoDBなど、地理情報と親和性の高いデータベースでも扱いやすくなり、データの再利用性も高まります。

　これを実現するのが、富士通のAIサービス「Zinrai」です。