新しいHTML<portal>を利用した画面遷移設計 〜PayPayモールとYahoo!ニュースの事例を添えて〜 #devsumi

>100 Views

February 14, 20

スライド概要

Developers Summit 2020の登壇資料です。
新しいHTML要素の<portal>を利用するにあたってのデザイン方法や、詳細な技術仕様と実装方法について説明しました。

profile-image

エンジニア・デザイナー向けのヤフー公式アカウント。イベント/登壇情報/ブログ記事など、ヤフーの技術・デザインに関わる情報を発信します。

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

新しいHTML<portal>を 利用した画面遷移設計 〜PayPayモールとYahoo!ニュースの事例を添えて〜 ヤフー株式会社 萩野・関 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

3.

1. サービス紹介 2. Portalsの概要 3. Portalsの導入事例 4. Portalsのデザインの考え方 5. Portalsの実装方法 6. Portalsの良い点・注意点 お話すること Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

4.

サービス紹介 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

5.

1. サービス紹介 トピックス コメント Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. アプリ

6.

1. サービス紹介 月間PV数 パートナー数 一日の記事配信数 約150億 約370社 570媒体 約6,000本 1996年7月〜 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

7.

1. サービス紹介 大事にしていること ニュースを伝えることで 社会や個人の課題を解決する Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

8.

1.サービス紹介 サービス紹介 記事媒体社 つなぐ ユーザー 配信いただいたニュースを、正しくわかりやすく理解いただく デザインやテクノロジー、ユーザー体験設計が果たす役割は大きい Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

13.

Portalsの概要 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

14.

結果 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2. Portalsの概要

15.

2. Portalsの概要 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 動画:In which we make loading disappear with ʻportalʼ and friends(YouTube)

16.

2. Portalsの概要 遅い... 速い! ページの体感速度、速いほうがいいよね Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

17.

2. Portalsの概要 インストールしにおいで〜 ø 999 É€  ҞÓæxz.gpVfl⁄pU M ネイティブアプリは、体験できるまでが遠い Copyright YahooJapan Japan Corporation. All Rights Copyright (C) 2020 ©Yahoo Corporation. AllReserved. Rights Reserved. 写真:アフロ

18.

2. Portalsの概要 <a> <iframe> <portal> 指定のページに ナビゲート ○ ✕ ○ 指定のページの 要素を取得して 表示 ✕ ○ ○ <portal>で、できること Copyright YahooJapan Japan Corporation. All Rights Copyright (C) 2020©Yahoo Corporation. All Reserved. Rights Reserved.

19.

2. Portalsの概要 <a> <iframe> <portal> 指定のページに ナビゲート ○ ✕ ○ 指定のページの 要素を取得して 表示 ✕ ○ ○ 指定のページの要素をあらかじめ取得して表示し 直接ナビゲートできるのが<portal> <portal>で、できること Copyright YahooJapan Japan Corporation. All Rights Copyright (C) 2020©Yahoo Corporation. All Reserved. Rights Reserved.

20.

Portalsの導入事例 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

22.

3. Portalsの導入事例 Detail to Detail Copyright Copyright (C) (C) 2020 2020 Yahoo Yahoo Japan Japan Corporation. Corporation. All All Rights Rights Reserved. Reserved.

23.

Portalsのデザインの考え方 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

24.

4. Portalsのデザイン List to Detail 2つの遷移設計に活かせる Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. Detail to Detail 写真:アフロ

25.

4. Portalsのデザイン B A C E D 「ページの繋がりをシームレスにできる」という意識 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 写真:アフロ

26.

4. Portalsのデザイン B A C E D 維持すらも可能になる Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 写真:アフロ

27.

4. Portalsのデザイン Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 動画:Portals Embed Demo (WICG/portals/demos/portal-embed-demo)(YouTube) 解説:Hands-on with Portals: seamless navigation on the Web(web.dev)

28.

4. Portalsのデザイン Webよりアプリの体験(表現)を参考にしやすい Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 写真:アフロ

29.

4. Portalsのデザイン アプリのようなリッチな体験を実現 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 写真:アフロ

30.

4. Portalsのデザイン プログレッシブエンハンスメント グレースフルデグラデーション 2つの考え方 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

31.

4. Portalsのデザイン 基本的なUX リッチなUX 非対応 ブラウザ 対応 ブラウザ プログレッシブエンハンスメント グレースフルデグラデーション Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

32.

4. Portalsのデザイン そのまま? ボタンを明示する? 思い切って変える? 非対応ブラウザ用にUIを検討する必要性 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

33.

4. Portalsのデザイン ちゃんと、みんなが使えることが大事 リッチなUXに引きずられすぎない Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

34.

4. Portalsのデザイン ①:デザインする時、意識するのは → ページの繋がりを、シームレスに、維持もできる Portalsのデザイン まとめ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

35.

4. Portalsのデザイン ①:デザインする時、意識するのは → ページの繋がりを、シームレスに、維持できる ②:デザインする時、参考にしやすいのは → Webよりアプリの体験 Portalsのデザイン まとめ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

36.

4. Portalsのデザイン ①:デザインする時、意識するのは → ページの繋がりを、シームレスに、維持できる ②:デザインする時、参考にしやすいのは → Webよりアプリの体験 ③:デザインする時、注意するのは → みんなが使えるようにすること プログレッシブエンハンスメント / グレースフルデグラデーション Portalsのデザイン まとめ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

77.

1. サービス紹介 2. Portalsの概要 3. Portalsの導入事例 4. Portalsのデザインの考え方 5. Portalsの実装方法 6. Portalsの良い点・注意点 お話したこと Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

78.

萩野(デザイナー) 表現の幅が拡がって楽しい! 良いものを作るために「プロ トタイピング」と「ともにつ くる」気持ちが重要 感想 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

79.

萩野(デザイナー) 関(エンジニア) 表現の幅が拡がって楽しい! ユーザーのストレスを軽減でき るのが魅力 良いものを作るために「プロ トタイピング」と「ともにつ くる」気持ちが重要 使いどころはまだまだありそう なので試していきたい 感想 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.