【DevSumi2020】新しいHTML<portal>を利用した画面遷移設計 〜PayPayモールとYahoo!ニュースの事例を添えて〜
新しいHTML
新しいHTML要素の
は、Webの画面遷移体験をよりシームレスにすることが可能です。 ヤフー株式会社が運営するYahoo!ニュースとPayPayモールではPortalsを導入し、先日「新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！CDS2019で紹介されたヤフーの実装例 #UIUX」というブログを公開しました。 ブログでは紹介しきれなかった、Portalsを利用するにあたってのデザイン方法や、Portalsの詳細な技術仕様と実装方法について、ヤフー株式会社のデザイナーとエンジニアからお話させていただきます。
プログラム内容
- Portalsの概要
- ページ体験速度早い方がいい
- a・iframe要素の両方の性質をもっている。指定のページへの遷移と要素の取得
- portalのコツ
- ページの繋がりをシームレスに使えるということを意識して利用する
- facebookの動画再生のように、再生中の動画を維持したまま関連ページの遷移を実現できる
- リッチなUXに引きずられず、非対応環境でもちゃんと使えているか確認すること
- 状態としては、以下のようになっていてテストは大変そう。（他にもあったので後で資料を確認する
- page A（商品一覧）とB（商品詳細)を作成
- 利用可能なブラウザならportalを埋め込む
- pageBを開いて、animationで拡大させて、簡易ページBを表示させる
- activateでpageBのURLに変更する
- ×ボタンを押すと、アニメーションが小さくなる
- activateでページAに戻る
- インプレッションの計測に注意。portalを読み込んだ時点でカウントされる場合がある
- CVRにもつながってきそうな感覚がある
