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

450 Views

February 14, 20

devsumi

スライド概要

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

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

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

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 133.8K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 75.3K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 64.7K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 52.5K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 28.1K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 25.8K
各ページのテキスト
1.

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

2.

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.

9.

10.

11.

12.

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.

21.

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のデザイン プログレッシブエンハンスメント グレースフルデグラデーション ２つの考え方 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.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

55.

56.

57.

58.

59.

60.

61.

62.

63.

64.

65.

66.

67.

68.

69.

70.

71.

72.

73.

74.

75.

76.

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.

80.