新しい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に引きずられがちだが、それが利用できない環境にあるユーザーのことをしっかりとケアする必要があることを、大いに実感したという。
