AMP大勉強会
2019/09/26 Ryoma HOSHINO
-
AMPがどうして早いのか
-
AMPの対応方法
-
AMPがもたらすビジネスメリット
-
AMP導入事例
勉強会のゴール
を理解して、
AMP導入判断のサポートができるようになる
-
はじめに
-
AMPとは
-
どうしてAMPは速い？
-
AMP Cooking
-
NumberでのAMP対応
-
UXフレームワークとしてのAMP
-
(希望者いたら) AMP Storiesを作ってみよう
アジェンダ
User, Developer, Business 3視点から見る
はじめに
ユーザーは
Webページの ◯◯ に
不満を持っている
ユーザーは
Webページの 速度 に
不満を持っている
ex) ページスピード, 速さ, UX, パフォーマンス
「コンテンツがすぐに手に入る」
は当たり前な時代
What is AMP ?
AMP
◯ Why ?
◯ Who ?
◯ How ?
What is AMP ?
モバイルユーザーのページ閲覧を快適に
Google x Twitter (オープンソース)
つぎのページ⇨
Point
When: 2015~ Where: いんたーねっと
1. AMP HTMLの策定・開発
ルール「こうしないとキャッシュしないぞ！」
部品「これを使えば速くなるよ！」
3. How ?
3. Engagement
- AMPページの優先的な表示
- AMPページの機能拡張
2. キャッシュ
ルールを守ったページは
最強キャッシュサーバーにキャッシュされる
モバイルページ高速化
プロジェクト・プロダクト・思想
ひとことで
AMP HTMLを使って
ユーザー体験をよくしていこう！
あんたが作るページ遅い。
これ使いな
AMPは
とにかく速い！
AMPは
どうして速い？
どうして速い？ 1. キャッシュ
◯Googleの最強キャッシュサーバーによる配信
◯検索結果画面で既にページを事前描画
Cache Story
どうして速い？ 2. 画像処理
◯サイズ指定により、画面描画コストを削減
◯自動で遅延ロードしてくれる
通常 HTML
AMP HTML
どうして速い？ 3. JavaScript
使わない → 使えない
= 負荷がかかる処理を一掃
広告リクエスト = 負荷大
⇨<amp-ad>を使って表示する
↪︎
どうして速い？ 4. AMP コンポーネント
ページ描画速度に特化した部品を使用する
ex) amp-social-share, amp-carousel
普通に書くと4~5倍の記述量 & 遅い
AMP Cooking
AMP対応はこう進める
◯ 各種ルール策定
- 対応範囲：TOP, Article
- AMPページのURLルール決め
AMP 対応タスク
◯ AMP HTMLの作成
- 定められたAMPのルールに従ってHTML作成
◯ CMSの対応
- AMPフラグの受け皿
- 通常 or AMPページの出し分け処理
◯ 広告関連
- 配信事業者との調整
- AMPタグの発行・テスト
◯ Analytics周り
- AMPページも正しく集計できるようにする。GTMも同様
わかりやすければなんでもOK
◯ WordPress
https://www.ohoshi-tech.io?amp=1
◯ JBPress
https://number.bunshun.jp/articles/amp/830000
◯ 朝日新聞
https://www.asahi.com/amp/articles/ASM9N64GXM9NUTIL03X.html
◯ 西日本新聞
https://www.nishinippon.co.jp/item/n/542744.amp
AMPページのURLルール
このURLが来たらAMPページを返してね
とCMSに命令するのに使う
AMP HTMLの作成ルール
◯スタート
<html ⚡️>
boilerplate CSS
Canonical属性に通常ページURL指定
ViewPortをレスポンシブ対応
AMP Script読み込み etc...
◯ JavaScript・img タグ🙅♀️
◯ CSSはHTMLにベタ書き & サイズ制限あり
→ Ads系の実装変更
Tagservices🙅♀️
GAMの記述が全て変わる（簡単になる）
Pass Backなど複雑な処理🙅♀️
AMP広告の表示テスト
◯ テストサイト
https://playground.amp.dev
◯ amp-adのJavaScript読み込み
<script async
custom-element="amp-ad"
src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
></script>◯ amp-adタグ挿入
<amp-ad
width=300
height=250
type="doubleclick"
data-slot="/83555300/fourmtagservice-test/in-article">
</amp-ad>CMSの対応
https://ohoshi.com
/100
ブラウザ
サーバーサイド
記事2
データ
記事2
ちょうだい
記事2
データ
+
テンプ
レート
記事
テンプ
レート
記事
↓生成
表示
DB
サーバー
ネットワーク
CMSの対応
ブラウザ
サーバーサイド
記事2
データ
記事2
ちょうだい
記事2
データ
+
AMP
テンプレート
記事
記事
↓生成
表示
DB
サーバー
ネットワーク
https://ohoshi.com
/100?amp=1
AMP
テンプ
レート
AMPは閲覧の入口が3つ
自ドメイン
通常 HTML
キャッシュ
AMP HTML
自ドメイン
AMP HTML
速
遅
＞
NumberでのAMP対応
◯ 対応は記事ページのみ
◯ デザインは通常ページに寄せる
AMPで実現できないところもあった
◯ キャッシュされるのは「続きを読む」ページ
「続きを読む」タップで自ドメインAMPページへ遷移
◯ 約1ヵ月のプロジェクト 8/28公開
- CMSの実装は文春
- AMP周りのQ&Aを星野が回答していく、といった陣形
方針
◯ レコメンドウィジェットのリンクは自ドメインAMPページ
→ SP 通常 記事への遷移は、
外部リンク or TOPページからの遷移のみ
◯ AMP対応した枠は
記事中・記事下・フッターの3枠
結果の前に
◯ 対応してまだ1ヵ月弱
→長期的に見ることはできないが
上記3枠のRevenue・imp・CTRを見てみた
◯ 8月は甲子園バブルのため、7月と比較していただきたい
◯ 「マジで速い」と編集部は大喜び
→モチベーションが上がるのはいいことだよね
◯ モバイルユーザーは約80%
参照元の割合
→約3割がAMPの閲覧対象
Revenue
imp
CTR
Page Speed Insight
オーガニック検索
直帰率 & 離脱率
かんがえよう！
わかったこと
.
.
.a
.
AMPはもはや
モバイルフレームワークではない
UXフレームワークである
速い = 大正義
a
速さ以外のメリット
開発者体験 = DX
"Create Websites Easy"
Powered By
110以上のすぐに使えるAMP Componentたち
〇〇〜、AMPでサイト速くしようぜ〜
速くした！
AMPでもっとたくさんいろんなことできるし、めっちゃ使いやすい！
〇〇〜、じゃあもっといろんなことやってみようぜ〜
結果...
AMP Native
全ページAMP
AMP As Component
通常ページにAMPコンポーネントのみを採用
GAMの広告タグ
の中身
この動きは
増えそうな予感
AMPで新たな
ユーザー体験も
AMP As Business
ビジネスサイドに活かせるAMP Component
Stories
AMP for Mail
AMP Ads
AMP Web Push etc...
TwitterでのAMPサポート
AMPでスピードアップ
「こんなこともできるよ！」
「Stories使いたいよね」
「AMPコンポーネント使いやすいね」
同じようなサイトが増えていく
(同一構成、似たようなUIが増える)
ユーザーにとって
使いやすくなる
より一層
ブランド・コンテンツ
を試される
AMPは
Speed Upを切り口に
UXを変えにきている
By AMP公式サイト
まとめ
AMPは速い
Googleのキャッシュ
ハイパフォーマンスな
AMP Component
メリット
コンテンツに手を伸ばしやすい
見慣れた・洗練されたUIを享受できる
AMPネイティブな開発の選択肢
AMP Componentでお手軽構築
使うだけで速いAMP Component
Storiesなどの魅力的なリーチが可能
コンテンツ・ブランディングに集中できる
検索流入を増やせる
デメリット
開発の制約
ルール作り・仕組み理解・運用の工数
似通った構成・UIのサイトが増える
以上です(＾ω＾)
5分後に Stories作り始めましょう！
AMP勉強会
By ohoshi
