2019/09/26 Ryoma HOSHINO
User, Developer, Business 3視点から見る
ex) ページスピード, 速さ, UX, パフォーマンス
Point
When: 2015~ Where: いんたーねっと
Cache Story
通常 HTML
AMP HTML
↪︎
普通に書くと4~5倍の記述量 & 遅い
AMP対応はこう進める
◯ 各種ルール策定
- 対応範囲:TOP, Article
- AMPページのURLルール決め
◯ 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
このURLが来たらAMPページを返してね
とCMSに命令するのに使う
◯スタート
<html ⚡️>
boilerplate CSS
Canonical属性に通常ページURL指定
ViewPortをレスポンシブ対応
AMP Script読み込み etc...
◯ JavaScript・img タグ🙅♀️
◯ CSSはHTMLにベタ書き & サイズ制限あり
→ Ads系の実装変更
Tagservices🙅♀️
GAMの記述が全て変わる(簡単になる)
Pass Backなど複雑な処理🙅♀️
◯ テストサイト
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>
https://ohoshi.com
/100
ブラウザ
サーバーサイド
記事2
データ
記事2
ちょうだい
記事2
データ
+
テンプ
レート
記事
テンプ
レート
記事
↓生成
表示
DB
サーバー
ネットワーク
ブラウザ
サーバーサイド
記事2
データ
記事2
ちょうだい
記事2
データ
+
AMP
テンプレート
記事
記事
↓生成
表示
DB
サーバー
ネットワーク
https://ohoshi.com
/100?amp=1
AMP
テンプ
レート
自ドメイン
通常 HTML
キャッシュ
AMP HTML
自ドメイン
AMP HTML
速
遅
>
◯ 対応は記事ページのみ
◯ デザインは通常ページに寄せる
AMPで実現できないところもあった
◯ キャッシュされるのは「続きを読む」ページ
「続きを読む」タップで自ドメインAMPページへ遷移
◯ 約1ヵ月のプロジェクト 8/28公開
- CMSの実装は文春
- AMP周りのQ&Aを星野が回答していく、といった陣形
◯ レコメンドウィジェットのリンクは自ドメインAMPページ
→ SP 通常 記事への遷移は、
外部リンク or TOPページからの遷移のみ
◯ AMP対応した枠は
記事中・記事下・フッターの3枠
◯ 対応してまだ1ヵ月弱
→長期的に見ることはできないが
上記3枠のRevenue・imp・CTRを見てみた
◯ 8月は甲子園バブルのため、7月と比較していただきたい
◯ 「マジで速い」と編集部は大喜び
→モチベーションが上がるのはいいことだよね
◯ モバイルユーザーは約80%
かんがえよう!
Powered By
110以上のすぐに使えるAMP Componentたち
〇〇〜、AMPでサイト速くしようぜ〜
速くした!
AMPでもっとたくさんいろんなことできるし、めっちゃ使いやすい!
〇〇〜、じゃあもっといろんなことやってみようぜ〜
結果...
全ページAMP
通常ページにAMPコンポーネントのみを採用
この動きは
増えそうな予感
ビジネスサイドに活かせるAMP Component
Stories
AMP for Mail
AMP Ads
AMP Web Push etc...
TwitterでのAMPサポート
By AMP公式サイト
Googleのキャッシュ
ハイパフォーマンスな
AMP Component
コンテンツに手を伸ばしやすい
見慣れた・洗練されたUIを享受できる
AMPネイティブな開発の選択肢
AMP Componentでお手軽構築
使うだけで速いAMP Component
Storiesなどの魅力的なリーチが可能
コンテンツ・ブランディングに集中できる
検索流入を増やせる
開発の制約
ルール作り・仕組み理解・運用の工数
似通った構成・UIのサイトが増える
5分後に Stories作り始めましょう!