デザイナーとエンジニアがそれぞれの視点で語る新HTML<portal>とは ヤフーが事例とともに紹介

デザイナーとエンジニアがそれぞれの視点で語る新HTML<portal>とは ヤフーが事例とともに紹介
  • X
  • Facebook
  • note
  • hatena
  • Pocket
2020/04/09 11:00

 ヤフーは2月14日、都内で開催された「Developers Summit 2020」において「新しいHTML<portal>を利用した画面遷移設計 ~PayPayモールとYahoo!ニュースの事例を添えて~」と題した講演を行った。同講演では、同社でUXデザイナーを務める萩野誠一氏とフロントエンドエンジニアの関真由美氏が登壇。UX設計に携わる「Portals」の活用事例について解説した。

 「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を使えば、ウェブでの画面遷移速度を向上させ、ネイティブアプリと同じような体験をウェブ上で実現することができます」

ヤフー株式会社 メディアカンパニー メディア統括本部 UXデザイナー 萩野誠一氏
ヤフー株式会社 メディアカンパニー メディア統括本部 UXデザイナー 萩野誠一氏

 具体的に、<portal>というHTMLタグについて、<a>や<iframe>との違いを考えてみる。そもそも<a>要素は、指定のページにナビゲートすることが可能だが、指定のページの要素を取得して表示することはできない。一方で、<iframe>要素では、ナビゲートは不可で要素取得は可能という逆の関係になるが、<portal>タブではこれがどちらも可能になる。

 PayPayモ―ルではプロトタイプとして、検索ページから商品ページへの遷移にPortalsを使用している。商品をタップするとPortalsで商品ページを取得し、ページの情報を取得している間は、検索ページに埋め込まれた簡易的な商品ページ(スケルトン)を表示するという仕組みだ。ユーザー視点では、通常の画面遷移と比べて、画面の切り替わり時に白紙になるタイミングがないため、スムーズな体験に感じられる。

 なお、PayPayモールでは「List to Detail」、Yahoo!ニュースでは「Detail to Detail」という導線設計を用いており、ここでPortalsが使用されている。