「Yahoo!ニュース」は、1996年7月からサービスを開始しているインターネットニュースサービスの老舗だ。月間150億PVを誇り、約370社のパートナーから570媒体、1日約6,000本の記事を掲載している。また、「PayPayモール」は、ヤフーが運営する2019年10月に開店したオンラインショッピングモール。「厳選ストアによる、ワンランク上のお買い物体験を。」をコンセプトとし、「探す・比べるが簡単」「お得に買える」「14日間まで返品OK」などの特徴を備える。
こうしたウェブサービスにおいて、ヤフーではHTMLの新しいタグである「Portals」を一部テスト的に導入しており、同講演では萩野氏がUXデザインにおいて重要なことを、関氏が実装における注意点などについて解説した。
Portalsの概要と特徴
Portalsとは、HTMLの新しい文体のことだ。2019年11月にアメリカ・サンフランシスコで開催された「Chrome Deb Summit 2019」で発表された新要素である。実は同カンファレンスにおいても、Yahoo!ニュ―スとPayPayモールの事例が紹介されていた。
Portalsを活用するメリットは、ウェブサービスの体験向上にあると、萩野氏は語る。一般的にブラウジングよりもネイティブアプリの方が表示速度が早いという背景をふまえ、次のように説明した。
「ウェブでもアプリでもサービスを利用するユーザーにとって、表示速度の向上はとても重要です。しかし、ネイティブアプリをダウンロードするのは、敷居が高く感じることもある。そんなときにPortalsを使えば、ウェブでの画面遷移速度を向上させ、ネイティブアプリと同じような体験をウェブ上で実現することができます」
具体的に、＜portal＞というHTMLタグについて、＜a＞や＜iframe＞との違いを考えてみる。そもそも＜a＞要素は、指定のページにナビゲートすることが可能だが、指定のページの要素を取得して表示することはできない。一方で、＜iframe＞要素では、ナビゲートは不可で要素取得は可能という逆の関係になるが、＜portal＞タブではこれがどちらも可能になる。
PayPayモ―ルではプロトタイプとして、検索ページから商品ページへの遷移にPortalsを使用している。商品をタップするとPortalsで商品ページを取得し、ページの情報を取得している間は、検索ページに埋め込まれた簡易的な商品ページ（スケルトン）を表示するという仕組みだ。ユーザー視点では、通常の画面遷移と比べて、画面の切り替わり時に白紙になるタイミングがないため、スムーズな体験に感じられる。
なお、PayPayモールでは「List to Detail」、Yahoo!ニュースでは「Detail to Detail」という導線設計を用いており、ここでPortalsが使用されている。
