「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が使用されている。
Portalsを使ったデザイン設計のコツ
萩野氏は、Portalsを活用したリッチなウェブページを設計するうえで、「ページ同士のつながりをシームレスにできる」という意識が重要だと話す。iframeタグでは実現できない楽曲再生を例に、萩野氏はこれを説明した。
「たとえばPortalsを使うと、A画面にいながらB画面で楽曲を再生でき、そのままB画面の再生を維持しながらほかの画面に切り替えるといったことが可能です。ネイティブアプリなら当たり前のことではありますが、これがウェブサービスでも実現できる。過渡期における注意点こそあるものの、新しい体験を実現するという意味で、Portalsは多くの可能性を秘めていると言えます」
また萩野氏は「プログレッシブエンハンスメント」と「グレースフルデグラデーション」というふたつのウェブデザイン手法の違いも意識する必要があると紹介。萩野氏自身もPortalsを使うようになりはじめて、その違いを密に意識するようになったという。
前者の手法では、Portalsに対応していないブラウザ向けに基本的なUXを先に考え、リッチなUXは追って整えていくという流れをとる。PayPayモールはこちらのアプローチで開発された。一方、後者はPortalsに対応しているリッチなUXを前提に、そのあとでPortals非対応ブラウザに向けた基本的なUXを整えていくというアプローチであり、「これが難しかった」と振り返る。その理由は「Portalに対応していないブラウザ用に、UIを検討する必要があったから」と萩野氏は言及した。
「作り手としては、リッチなUXにひきずられやすいですが、利用できない環境のユーザーもしっかり意識しなくてはなりません」
Portalsを実装するには
Portalsを実装するうえでは、アニメーションとURLの切り替えがポイントになる。そこで、関氏は基本的な例として、「A.html」と「B.html」というふたつのhtmlを用いた解説をした。
まず、A.htmlのなかでB.htmlを<portal>を使って埋め込む。この際、「対応していないブラウザも考慮し、JavaScriptを使ったコーディングを行うこと」、また「シームレスな体験を作るためにはアニメーションを活用すること」が重要だと関氏は説明する。なお、Portals自体にはアニメーション機能がないので、「CSS transitions」を活用することもポイントだ。
こうして作成されたウェブページの遷移には、URLがA.htmlのまま、埋め込んだB.htmlの画面が全体に表示されるという段階が入り、その後、URLがB.htmlに切り替わる。そのため、ユーザーからは遷移時にギャップが感じられないという仕組みだ。
また、遷移で用いる関数には引数をわたすことも可能。これを利用し、遷移先のB.htmlの中で、A.htmlを<portal>要素として取得して埋め込める。これによりA.htmlへ戻る場合にも、先ほどと同様の過程を経るため、滑らかなに遷移することが可能となる。
Portalsにはメッセージを送るインターフェースも用意されている。<porta>要素経由でメッセージを取得することで、「ページのレンダリングが終わったタイミングで受け取り、そこから画面を切り替える」といったパフォーマンスチューニングのためにも活用できるのだ。PayPayモールの検索ページと商品ページの移動でも、実際にこうした仕組みを用いているという。
Portalsは現在、WICG（Web Platform Incubator Community Group）で仕様について議論されている。「詳細についてはWICGがドラフトレポートで掲載されているので、興味があればご覧になってください」と関氏は補足した。
Portals活用のメリットとデメリット
新技術であるPortalsを活用するうえではとくに、メリット・デメリットの両方が存在することは想像に難くない。まず良い点について関氏は、SPA（シングルページアプリケーション）化が難しい場合でも、MPA（マルチページアプリケーション）のまま画面遷移をシームレスにできることを挙げた。
「Portalsの優れた点は、既存のMPAアーキテクチャ上でも、画面遷移をシームレスにし、ユーザー体験を向上させることができることです。画面遷移をシームレスにするという意味では、SPA化するという選択肢ももちろんあると思います。しかし、開発コストの問題や、規模が大きいサービスで領域ごとに開発組織がわかれている場合などには、SPA化が難しいこともあるでしょう。ヤフーはまさに規模が大きいサービスを多く取り扱っているため、開発組織もわかれていることが多い。MPAのままシームレスな画面遷移を実現できるPortalsは、そういった点においてもとても有効だと感じています」
また、PortalsがシンプルなAPIであるため、エンジニアだけでなくデザイナーでも扱いやすいことも大きな特徴だという。
「たとえば、今回Yahoo!ニュースのPortalsの実装をメインで行ったのはデザイナーでした。デザイナーが理想とするユーザー体験、デザインを、そのままウェブアプリケーションに落とし込むことが可能になるので、ユーザー体験を効率的に向上することができると感じました」（関氏）
一方、先進的であるがゆえに、まだ対応ブラウザが限定的なことには注意が必要だ。2020年2月時点では、利用するにはGoogle ChromeでPortalsのフラグを有効にしておく必要がある。「実際のサービスに導入するためには、何らかのフォールバックを用意しておく必要があります」と関氏は指摘する。
また、インプレッションの計測においては、方法によっては<portal>要素でページを取得した時点でインプレッションが計測されてしまう場合があるとのこと。こういった点には十分留意しなければならないだろう。
だがこうした注意点こそあれ、Portalsの活用が今後の標準になっていくだろうという期待が薄れることはない。萩野氏もPortalsを活用することで「デザイナーとして表現の幅が広がり楽しい」と感想を語る。
「アプリのような体験をデザイナーでも作りやすくなったので、とても取り組む甲斐がありますね。そのうえで良いものを作るために必要なのは、プロトタイピングなどを『ともにつくる』という意識。デザイナーだけでは難しくエンジニアの力を借りるときもありますので、取り組みかたはとても重要です」
最後に関氏はエンジニアの立場からPortalsの魅力について以下のように語り、プレゼンテーションを締めくくった。
「エンジニアの立場からユーザーのストレスを軽減できるのが魅力だと思います。商品ページから検索ページへの遷移に時間がかかるというのは長年課題だったので、そのストレスを解消するためのひとつの方法なるはずです。もちろんほかにも手段はあるかと思いますが、そのひとつを見つけられたことはとても大きいのではないでしょうか」
