PayPayモールのAMP活用とデザインシステム / YJTC19 in Shibuya B-1 #yjtc

413 Views

December 12, 19

スライド概要

PayPayモールでは、ワンランク上のお買い物体験の提供を目指してさまざまな取り組みを行っています。
本セッションでは、その中からAMP (Accelerated Mobile Pages)の活用と、デザインシステムによる統一性あるUIの実現の裏側をお伝えしました。

profile-image

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

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

PayPayモールのAMP活用とデザインシステム ~ ワンランク上のお買い物体験の提供を目指して ~ コマースカンパニー ショッピング統括本部 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 内藤 秀彦

2.

内藤 秀彦 @innovate̲7110 コマースカンパニー ショッピング統括本部 ヤフー株式会社 新卒入社 3年目 PayPayモールのフロントエンド/デザインを担当 AMPを活用したデザイン・フロントエンド領域における PJ進行のマネージメントから実装までを行なっている Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

3.

このセッションについて 独自のデザインシステムの上でどのように AMPコンポーネントを活用しPayPayモールを作っているのか Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

4.

アジェンダ 1. PayPayモール 2. デザインシステム 3. AMPの活用と成果 4. まとめ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. AMPの実現

5.

1. PayPayモール Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

6.

Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

7.

PayPayモール PayPayモールとは 「厳選ストアによる、 ワンランク上のお買い物体験を。」 というコアバリューに基づいた プレミアムなオンライン ショッピングモール Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

8.

PayPayモール PayPayモールとYahoo!ショッピング Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

9.

PayPayモール PayPayモールにZOZOTOWN 初出店予定 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

10.

PayPayモール PayPayモールで100億円相当あげちゃうキャンペーン 開催中 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

11.

PayPayモール コンセプト実現のための取り組み 「ワンランク上のお買い物体験を提供する」という コンセプト実現のための取り組みの中から - AMPキャッシュも見据えたAMPの活用による高速化 - デザインシステム による使いやすいUI 上記の2つについて詳しくご紹介いたします Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

12.

PayPayモール AMPとは ユーザーファーストなサービス開発に適した Webコンポーネントなフレームワーク Accelerated Mobile Pages の略であり ページの高速化で活用されるのはもちろん キャッシュ, ストーリー, メールと活用の幅が広い 多様なコンポーネントが存在 logo: https://amp.dev/ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

13.

PayPayモール デザインシステムとは デザインの統一性や効率性を高める 原則やスタイルガイド, コンポーネントなど デザインのルールや仕組みを定めたもの より優れた体験の提供に役立つ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

14.

PayPayモール 独自のデザインシステムとAMPの相性 AMPの活用とデザインシステムを考える - AMPには様々なルールがある - JavaScriptが自由に書けないなど制限が厳しい - AMPコンポーネント自身に既に粒度がある 独自のデザインシステムとAMPは相性が悪い? PayPayモールでの実現へのブレイクスルー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

15.

2. デザインシステム Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. AMPの実現

16.

デザインシステム i. AMPの実現 スタイルガイド ii. コンポーネント iii. 実現へのブレイクスルー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

17.

スタイルガイド / デザインシステム AMPの実現 PayPayモールのスタイルガイド Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

18.

スタイルガイド / デザインシステム カラー AMPの実現 カラー選定のプロセス 1. 基準色(横軸)を決める 2. バリエーション(縦軸)を決める 3. アクセシビリティを考慮し調整 4. 利用ルールを決める 5. デザインで使っていない色を抜く 『カラーを変数管理したい!』 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

19.

スタイルガイド / デザインシステム フォントサイズ AMPの実現 『フォントサイズを変数管理したい! 』 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

20.

スタイルガイド / デザインシステム システムアイコン AMPの実現 マテリアルアイコンから サービスに必要なものを選定し Webフォント化 『アイコンを簡単に呼び出したい! 』 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. reference: https://material.io/resources/icons/

21.

スタイルガイド / デザインシステム Z軸方向の重なり AMPの実現 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

22.

スタイルガイド / デザインシステム 余白と幅 AMPの実現 PayPayモールでは 4pxを余白と幅の基底に採用 マテリアルデザインの基底である 8pxの半分の値でレスポンシブにも対応 『基底を変数管理で統一したい!』 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

23.

スタイルガイド / デザインシステム AMPの実現 スタイルガイド まとめ 使用例とセットで原則を定めることで 統一性のあるデザインを効率的に作れる Sketchで作成したスタイルガイドをZeplinに載せ デザイン・開発を行う上で守るべき原則を誰もが確認可能に 実現に向けた実装面の課題感 ☑ カラーや余白などをSCSS変数で管理 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

24.

デザインシステム i. AMPの実現 スタイルガイド ii. コンポーネント iii. 実現へのブレイクスルー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

25.

コンポーネント / デザインシステム AMPの実現 PayPayモールのコンポーネント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

26.

コンポーネント / デザインシステム AMPの実現 アトミックデザイン思考なコンポーネント capture: http://atomicdesign.bradfrost.com/ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

27.

コンポーネント / デザインシステム AMPの実現 Atomsコンポーネント 単体で存在できる 最小粒度のUIコンポーネント Image, Button, Textfieldなど 『 AMPコンポーネントをベースに活用したい! 』 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

28.

コンポーネント / デザインシステム AMPの実現 Moleculesコンポーネント Atomsが混ざる中間コンポーネント 受け取るデータに合わせた UIの差異も実現し再利用性を高く実装 『 propsでデータを受け取り再利用性を高くしたい!』 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

29.

コンポーネント / デザインシステム AMPの実現 Organismsコンポーネント AtomsやMoleculesを組み合わせたコンポーネント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

30.

コンポーネント / デザインシステム AMPの実現 コンポーネント まとめ propsでデータを受け取れ、再利用性も高くし ImageなどはAMPコンポーネントをベースに活用 実現に向けた実装面の課題感 ☑ アトミックデザイン思考なコンポーネント ☑ AMPコンポーネントをベースに活用 ☑ propsによるJSONデータの受け取り Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

31.

デザインシステム i. AMPの実現 スタイルガイド ii. コンポーネント iii. 実現へのブレイクスルー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

32.

実現へのブレイクスルー / デザインシステム AMPの実現 実現に向けた課題感の整理 ☑ カラーや余白などをSCSS変数で管理 ☑ アトミックデザイン思考なコンポーネント ☑ AMPコンポーネントをベースに活用 ☑ propsによるJSONデータの受け取り ☑ AMP Validated なページを生成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

33.

実現へのブレイクスルー / デザインシステム AMPの実現 実現に向けた課題感の整理 ☑ カラーや余白などをSCSS変数で管理 ☑ アトミックデザイン思考なコンポーネント 実現へのブレイクスルー ☑ AMPコンポーネントをベースに活用 ☑ propsによるJSONデータの受け取り ☑ AMP Validated なページを生成 logo: https://nuxtjs.org/ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

34.

実現へのブレイクスルー / デザインシステム AMPの実現 Nuxt.jsの活用によるブレイクスルー ✅ カラーや余白などをSCSS変数で管理 ✅ アトミックデザイン思考なコンポーネント ✅ AMPコンポーネントをベースに活用 ✅ propsによるJSONデータの受け取り ☑ AMP Validated なページを生成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. Nuxt.jsにより AMP Validated以外は 標準機能と関連したNode パッケージ活用で実現可能

35.

実現へのブレイクスルー / デザインシステム AMP Validatedとは AMPの実現 AMPのルール検証にパスした状態 AMPキャッシュに対応させるためには必須 必ずしもパスしなければいけない訳ではない(Bento AMP !) ※ 手元での検証も可能 Node package: amphtml-validator Chrome Extensions: AMP Validator Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

36.

実現へのブレイクスルー / デザインシステム AMP Validatedの実現 AMPの実現 Nuxt.js hooks (render:route) によるビルド拡張 Nuxt.jsのビルド処理をフックし AMPのルールに照らし合わせてHTMLを最適化 AMP Validatedなページを生成 reference: https://nuxtjs.org/api/configuration-hooks/ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

37.

nuxt.config.js AMP Validatedにするための処理 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

38.

実現へのブレイクスルー / デザインシステム AMPの実現 hooksで行なっている処理内容 AMP Validatedにするための処理 - HTMLから不要な属性などを削除 - JavaScriptの削除と必要なAMPコンポーネントJSの挿入 - スタイルを1つにまとめて圧縮し最適化 レスポンシブ対応のための処理 - ページに応じてレスポンシブの制御 などを modifyHtml 関数内で行なっている Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

39.

実現へのブレイクスルー / デザインシステム AMPの実現 Nuxt.jsの活用・拡張により実現 Nuxt.jsの活用で ✅ カラーや余白などをSCSS変数で管理 ✅ アトミックデザイン思考なコンポーネント ✅ AMPコンポーネントをベースに活用 ✅ propsによるJSONデータの受け取り hooksによる拡張で ✅ AMP Validated なページを生成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

40.

3. AMPの活用と成果 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

41.

AMPの活用と成果 i. AMPコンポーネントを活用した実装例 ii. パフォーマンスと表示速度 iii. AMPキャッシュ iv. SXGとamp-listで実現したパーソナライズ v. AMPを使う際に気をつけること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

42.

AMPコンポーネントを活用した実装例 / AMPの活用と成果 AMPコンポーネントで実現できる活用例 toggleClass()でExpand amp-lightboxでGallery Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. amp-listでSuggest

43.

AMPコンポーネントを活用した実装例 / AMPの活用と成果 JSONからCSRで生成するカルーセル Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

44.

AMPコンポーネントを活用した実装例 / AMPの活用と成果 CSR生成のカルーセルで活用しているAMPコンポーネント amp-img imgタグのAMP版 amp-carousel 要素をwrapしてcarouselが作れる amp-mustache amp-listと組み合わせて、 JSONからDOMを作れる amp-list 非同期でJSONを取得可能 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

45.

BasicImage.vue propsで必要なデータを受け取る src, alt, width, height, layoutなど Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

46.

TinyItem.vue (mustache構文) BasicImageをインポートして利用 amp-listのtemplateに対応した mustache構文でHTMLを記述 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

47.

CarouselList.vue TinyItemをインポートして利用 BasicTemplate: amp-list用のtemplate生成コンポーネント Carousel: amp-carouselのwrapperコンポーネント Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

48.

pagesでのコンポーネント利用 JSONのエンドポイントを変更するだけで 別のコンテンツでカルーセルを再利用可能 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. CarouselListをインポートして利用

49.

AMPの活用と成果 i. AMPコンポーネントを活用した実装例 ii. パフォーマンスと表示速度 iii. AMPキャッシュ iv. SXGとamp-listで実現したパーソナライズ v. AMPを使う際に気をつけること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

50.

パフォーマンスと表示速度 / AMPの活用と成果 パフォーマンスと表示速度 パフォーマンス ページのパフォーマンスを常に意識 表示速度 実際の表示速度: パフォーマンスの向上などで高速化 体感速度: スケルトンなどで向上 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

51.

パフォーマンスと表示速度 / AMPの活用と成果 主導線ページ パフォーマンス PC トップ 検索結果 ※ PageSpeed Insightsによる本番環境測定(測定日: 19/12/11) Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 製品詳細

52.

パフォーマンスと表示速度 / AMPの活用と成果 主導線ページ パフォーマンス SP トップ 検索結果 製品詳細 SPは基準が厳しいが、国内主要ECの中でトップレベルのパフォーマンス ※ PageSpeed Insightsによる本番環境測定(測定日: 19/12/11) Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

53.

パフォーマンスと表示速度 / AMPの活用と成果 スケルトンで体感速度も高速化 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

54.

パフォーマンスと表示速度 / AMPの活用と成果 placeholder属性によるスケルトン AMPコンポーネントの多くがplaceholder属性に対応し 体感速度向上のためのスケルトンに活用可能 placeholder 子要素に属性として指定することで 親要素のレンダリング準備中に表示する要素を指定 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

55.

placeholder属性 ( & fallback属性) スケルトンに利用 親要素の読み込み失敗時の代替として利用 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

56.

AMPの活用と成果 i. AMPコンポーネントを活用した実装例 ii. パフォーマンスと表示速度 iii. AMPキャッシュ iv. SXGとamp-listで実現したパーソナライズ v. AMPを使う際に気をつけること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

57.

AMPキャッシュ / AMPの活用と成果 AMPキャッシュ AMP Validatedなページをキャッシュサーバーから配信 AMP Validatedなページがクロールされ Yahoo!検索, Google検索の検索結果に⚡マーク付きでインデックス キャッシュサーバーからページコンテンツを配信 キャッシュサーバーのドメインでの表示となるため クロスオリジンとなりCookieの利用が難しい Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

58.

AMPキャッシュ / AMPの活用と成果 AMPキャッシュ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

59.

AMPの活用と成果 i. AMPコンポーネントを活用した実装例 ii. パフォーマンスと表示速度 iii. AMPキャッシュ iv. SXGとamp-listで実現したパーソナライズ v. AMPを使う際に気をつけること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

60.

SXGとamp-listで実現したパーソナライズ / AMPの活用と成果 SXG SXGとはSigned HTTP Exchangesの略 HTTP通信をSXG証明書で署名することで オリジンのURLでキャッシュされたAMPコンテンツを安全に表示可能 サービスドメインでの表示となるため クロスオリジンの問題が解決しCookieの利用が可能 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

61.

SXGとamp-listで実現したパーソナライズ / AMPの活用と成果 SXG amp-listでパーソナライズ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

62.

SXGとamp-listで実現したパーソナライズ / AMPの活用と成果 AMPキャッシュのパーソナライズを実現 SXGでAMPキャッシュをオリジンのURLで表示 Cookieの利用が可能 amp-listでCookieを利用してJSONを取得 パーソナライズされたコンテンツの表示 AMPキャッシュのパーソナライズを実現!! ※ SXG対応ブラウザは現状Android Chromeのみ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

63.

AMPの活用と成果 i. AMPコンポーネントを活用した実装例 ii. パフォーマンスと表示速度 iii. AMPキャッシュ iv. SXGとamp-listで実現したパーソナライズ v. AMPを使う際に気をつけること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

64.

AMPを使う際に気をつけること / AMPの活用と成果 AMPを使う際に気をつけること 高速化・最適化への別の側面として、制限が厳しい - JavaScriptの実行が基本的に出来ない(AMP Validated時) amp-scriptは基本的にユーザーアクションが必要 - 自由度を奪うルール デザイン・実装における自由度を奪ってしまう無数のルール - AMPコンポーネントのJSアップデートがCDN上書きで行われる バグが混入した際のリスクヘッジが必要 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

65.

4. まとめ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

66.

まとめ PayPayモールの立ち上げを通して - スケジュール通りリリースできてよかった!! - デザインシステムで統一性の高いUIを実現出来た - 高速化にも取り組むことが出来ている - AMPの活用からSXGでのパーソナライズまで実現出来た! - Nuxtのhooks拡張によるアプローチもよかった - 優先順位を付けてマイルストーンを敷き、 進捗にも意識を向けることで限られたリソースを最大化し、 AMPを活用した最適化にも挑戦出来たのでとても良い経験になった!! Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

67.

まとめ 今後の展望 サービスとしてやりたいこと - UI最適化とデザインシステムの維持 - 表示速度などパフォーマンスの向上 - ログ、広告などで入れている独自JS解消 - AMPストーリーやAMPメールの活用 個人的にやりたいこと AMPHTMLへのコントリビュート Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

68.

まとめ 最後に デザインシステムとAMPでサービスを磨き上げ まだまだ伸び代しかないので 「ワンランク上のお買い物体験」をユーザーに提供できるよう 日本で最も高速で使いやすく 最も支持されるECサービスに仕上げていきたい Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

69.

Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

70.

Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.