新しいHTML要素「Portals」とは？
Yahoo!ニュースを担当するリードデザイナーの萩野氏は、ニュースサービス内における最適なユーザー体験の設計企画、デザインを行っている。一日の記事配信数は約6,000本を超え、月間約150億PVを誇るYahoo!ニュースを支える萩野氏らが大切にしているのは、「ニュースを伝えることで、社会や個人の課題を解決する」ことだという。
「記事媒体社から配信されたニュースを正しく・分かりやすくユーザーに届けるべく、デザインやテクノロジー、ユーザー体験設計が果たす役割は非常に大きいと考え、日々改善に取り組んでいる」と冒頭に述べ、Portalsの概要について解説を始めた。
Webやアプリのサービスを利用するユーザーに良い体験を提供するためには、表示速度の向上が欠かせない。Portalsの機能を活用することで、Webブラウザ上でもネイティブアプリのように、画面遷移の体感速度を向上させることが可能となる。
このアプリのような遷移体験を実現するPortalsについて、萩野氏はHTML要素で説明した。a要素はクリックで指定のページに遷移することはできるが、指定のページの要素を取得して表示することはできない。
逆にiframe要素は、指定のページを取得して表示することはできるが、指定のページに直接ナビゲートする機能を持っていない。だがPortalsを使えば、a要素とiframe要素ができることを同時に実現できる。
Portalsを使った遷移体験の設計事例
まず、実例として紹介されたのは、厳選された商品・ストアを提供するECサイト「PayPayモール」だ。PayPayモールでは、検索ページから商品ページへの「list to detail」の遷移時にPortalsを導入している。
商品がタップされ、商品ページが表示されるまでの体感時間を減らすために、簡易的な商品ページを表示。portal要素でシームレスな画面遷移が実現できる設計を行った。
Yahooニュースでは、記事から記事に上下にスワイプすることで、シームレスな画面遷移体験を実現した。以下の動画を見ていただけると分かりやすいが、通常のWeb遷移（左）に比べ、Portalsを利用したページ遷移（右）の方が、明らかにページ遷移がスムーズだ。
Portalsを利用したデザインの考え方
続いて萩野氏は、Portalsを利用したデザインを行う際に必要な3つの考え方を紹介した。1つ目は「ページの繋がりを、シームレスに、維持もできる」という意識を持ってデザインすること。
例えばPayPayモールでは、一覧ページから詳細ページに遷移する「list to detail」を活かした遷移設計を実装している。Portalsを利用することで、通常遷移における体験をよりリッチに、ストレスなくページを閲覧することが可能になったという。
Yahoo!ニュースで実装したのは、1つのコンテンツをより強調してユーザーに届けることが可能になる動線設計「detail to detail」だ。1ページ1コンテンツのページを、アニメーションでライトに、ストレスなくユーザーに提供することができる。
通常のiframe挿入の動画では、ページ遷移のタイミングで音声の再生がストップしてしまうことがある。だがPortalsを利用することで、画面が白くなったり、動画が止まることなく、スムーズな画面遷移が実現できる。
2つ目は、「Webよりもアプリの体験の方が参考にしやすい」こと。Portalsを活用することで、アプリのようなリッチな体験をWebでも実現できるようなったことで、設計のしがいが出てくると萩野氏。PayPayモールは、まさにアプリのようなリッチな体験をWebでも再現している。
だが、このようなリッチな表現をWebで実現するにあたり、注意点もあるという。3つ目に挙げられたのは、「みんなが使えるようにすること」。Portalsは非常に優秀だが、リッチなUXに引きずられすぎてしまうこともある。その際に指針となったのは「プログレッシブエンハンスメント」と「グレースフルデグラデーション」だった。
以下の図では、プログレッシブエンハンスメントの考え方は青い線、グレースフルデグラデーションの考え方は赤い線で示されている。
プログレッシブエンハンスメントは、Portals非対応ブラウザ用の基本的なUXを先に考えてから、対応ブラウザ用のリッチなUXを考えていく手法。グレースフルデグラデーションは、Portalsに対応しているブラウザにリッチなUXを先に考えて、Portals非対応ブラウザ用の体験を追って設計する考え方である。
グレースフルデグラデーションの場合、リッチなUXをストレートに考えられるため、良いものができるそうだが、「実際には非常に難しいものでした」と、萩野氏。Portalsに対応していないブラウザ用に、別途UIを検討する必要性が出てきたからだ。
「目的によっては、UIを別途検討しなければいけない。Portalsは非常に優秀な機能ですが、非対応ブラウザを利用している人が満足に使えなくなっては元も子もありません」（萩野氏）
作り手はリッチなUXに引きずられがちだが、それが利用できない環境にあるユーザーのことをしっかりとケアする必要があることを、大いに実感したという。
Portalsの実装方法を実例で解説
続いては、PayPayモールとYahoo!ショッピングを担当するフロントエンドエンジニアの関氏から、Portalsの実装方法が解説された。関氏はPayPayモールではVue.jsやAMP、Yahoo!ショッピングではReactやTypeScriptなどの技術を使って、開発を行っている。
まず関氏は、A.htmlとB.htmlという2つのページを例に使い、実装の流れを説明した。
windowにHTMLPortalElementがあるかチェックした上でcreateElement()でportal要素を生成。srcにはportal要素で表示したいページのURL（B.html）を指定し、portal要素をDOMに追加する。
portal要素を埋め込んだら、アニメーションをして、portal要素を画面全体に表示します。
「アニメーションを使わなくてもPortalsの機能を利用することはできますが、シームレスな画面遷移を実現するためにはアニメーションは不可欠です」（関氏）
Portalsにはアニメーションの機能はないため、CSS Transitionなどで各自実装する。
「CSS Transitionを使う場合、可能な限りtransformもしくはopacityを使うことをお勧めします。transformとopacityはアニメーションする要素を別レイヤーに切り分けて、他の要素に影響することなくアニメーションするため、よりネイティブアプリに近い体験を実現することができます」（関氏）
この時点では画面全体にB.htmlが表示されているが、URLはA.htmlのままである。続いて、activate()という関数を実行すると、B.htmlに直接ナビゲートすることができる。通常の画面遷移のように一瞬画面が真っ白になったりすることがなく、シームレスな画面遷移を実現できるという仕組みだ。
activate()関数には引数でデータを渡す実装方法についてもコード例が示された。
Portalsを使って、2つのページを行き来する方法
続いては、2つのページを行き来する方法について。Portalsを使えば、それぞれのページのJavaScriptや、UIの状態を保持して行き来したり、アニメーションを挟んだりすることも可能となる。
2つのページを行き来するためにはPortalActivateEventを利用する。A.htmlでactivate()を実行する際に引数で渡したデータは、event.dataで取得することができる。
また、PortalActivateEventはevent.adoptPredecessor()で、A.htmlをportal要素として取得。それをDOMに追加すれば、逆にB.htmlにA.htmlを埋め込むことができる。
Portalsには、PortalHostというインターフェースがあり、window.portalHostで自身がportal要素として、利用されているか判定することができる。portal要素として利用されている場合のみ、UIを変更したり追加したりすることが可能だ。
「この例では、B.htmlに×ボタンを追加しています。このボタンのクリックでactivate()を実行するように実装すれば、モーダルのようなコンテンツが作れます」（関氏）
メッセージをやり取りする機能
Portalsにはメッセージを送るインターフェースが用意されている。以下のソースコードの区切り線は、それぞれが別々のページで実行されているJavaScript。区切り線より上がportal要素で別ページを表示しているページのソースコード、下がportal要素として利用されているページのソースコードとなっている。
window.portalHostに対してメッセージを送るソースコードも紹介された。上がportalとして利用されているページのソースコード、下がportal要素で別ページを表示しているページのソースコードである。
PayPayモールの検索ページと商品ページは、これらを組み合わせることによって、2つのページをシームレスな画面遷移を実現しているのだという。
Portalsの良い点と注意点
続いて、Portalsを使ってみて感じた、良い点と注意点について紹介された。
良い点の一つ目に挙げられたのは、既存のMPA（マルチページアプリケーション）アーキテクチャ上でも画面遷移をシームレスにし、ユーザー体験を向上できるということ。
ヤフーは規模が大きいサービスが多く、開発組織も領域ごとに分かれているため、MPAのままシームレスな画面遷移が実現できるPortalsがとても有効だったという。
2つ目は、PortalsはシンプルなAPIなので、エンジニアだけでなくデザイナーも使えるということ。今回まさに、Yahoo!ニュースのPortalsページの実装をメインで行ったのはデザイナーだったことが、それを証明している。
注意点として挙げられたのは、対応ブラウザが限られていること。Portalsは2020年2月現在、Google ChromeでPortalsのフラグを有効にした場合のみ利用可能な技術。実際のサービスに導入する際には、何らかのフォールバックを用意しておく必要がある。
インプレッションの計測に関しても注意が必要だという。インプレッションの計測方法によっては、portal要素でページを取得した時点でインプレッションが計測されてしまう場合があるためだ。ログ計測や、特にインプレッション課金制の広告などは注意が必要だ。
最後に、萩野氏と関氏がPortalsを使ってみた感想が述べられた。
「デザイナーとしては、表現の幅が拡がって楽しい。アプリのようなリッチな体験を、どんどんWebでも気軽に実現できるようになってきたのは、エンジニア・デザイナー問わず、作りがいがあります。どんどん作って試す『プロトタイピング』と、エンジニアとデザイナーが協業する『ともにつくる』という気持ちが重要だと改めて感じました」（萩野氏）
「ユーザーのストレスを軽減できるのがPortalsの魅力。検索ページから商品ページへの遷移に時間がかかることには以前から課題を感じていたし、自分自身もユーザーとしてストレスを感じていました。その課題を解決する方法の一つを見つけることができたことが大きい。いろいろ試して導入を検討していきたいと考えています」（関氏）
両氏は今後もこうした新しい技術に積極的にトライし、「ユーザー体験向上のための最適な方法は何なのか」と常に問いながら、Yahoo! JAPANサービス運営を続けていきたいと語り、セッションを締めた。
関連リンク
ヤフー株式会社
