注目キーワード

AMP対応サービス

スマホで検索をした時に出る⚡マークが付いたページこのようなリンクはAMP HTMLで構築されたWebページに遷移します。リンクをタップして見てみると、非常にシンプルな見た目のコンテンツが表示されます。
これらは「AMP(Accelerated Mobile Pages)」という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。

AMP(Accelerated Mobile Pages)とはひとことで言うならば「モバイルページを高速に表示させるための手法」のことです。

 

2018年現在ではAMPに対応したメディアが増え、検索キーワードによってはAMPページが上位１０ページのほとんどを占めているなんていう状況も珍しくなくなってきました。

AMPページは、AMP HTML　AMP JS　AMP Cacheと、大きく分けて3つの要素から構成されています。AMPページの仕様はかなり限定的で、非同期のJava Scriptのみを許容していたり、全てのコンテンツのリソースサイズを静的に規定するなど「読み込みに時間がかかることはさせない」という方針で仕様が策定されています。

AMP がパフォーマンスを改善する仕組み

AMPの仕様に従って作成されたページはAMP CacheというAMPページを配信するためのコンテンツ配信ネットワーク（CDN）によってキャッシュされます。
ユーザーが検索画面やSNSにシェアされたURLからAMPページのリンクをタップすると、AMP Cacheに保存されているキャッシュからコンテンツを返します。

来のページがあるウェブサイトへのアクセスが発生せず、いちいちサイトを読み込まなくても済むようになっているため、コンテンツを高速で表示することが可能になっているのです。
AMP ページのキャッシュの仕組み

AMP ページの基本のテンプレート

以下のソースは必要最小限のAMPに必要なタグや機能を記述したHTMLコードです。
AMPページは先述したように記述に制限があり、タグ内にある要素などはほぼコピペで済んでしまいます。

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html amp lang="ja">
  <head>
    <meta charset="utf-8">
    <title>【ここにタイトルがはいります】</title>
    <link rel="canonical" href="【オリジナルページのURL】">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22%40context%22%3A%20%22http%3A%2F%2Fschema.org%22%2C%0A%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22NewsArticle%22%2C%0A%20%20%20%20%20%20%20%20%22headline%22%3A%20%22Open-source%20framework%20for%20publishing%20content%22%2C%0A%20%20%20%20%20%20%20%20%22datePublished%22%3A%20%222015-10-07T12%3A02%3A41Z%22%2C%0A%20%20%20%20%20%20%20%20%22image%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%22logo.jpg%22%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20amp-boilerplate%3Ebody%7B-webkit-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3B-moz-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3B-ms-animation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%3Banimation%3A-amp-start%208s%20steps(1%2Cend)%200s%201%20normal%20both%7D%40-webkit-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-moz-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-ms-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40-o-keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%40keyframes%20-amp-start%7Bfrom%7Bvisibility%3Ahidden%7Dto%7Bvisibility%3Avisible%7D%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
<noscript>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20amp-boilerplate%3Ebody%7B-webkit-animation%3Anone%3B-moz-animation%3Anone%3B-ms-animation%3Anone%3Banimation%3Anone%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</noscript>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%20src%3D%22https%3A%2F%2Fcdn.ampproject.org%2Fv0.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  </head>
  <body>
<h1>【ここにページの大見出しがはいります】</h1>
  </body>
</html>
AMPとは、モバイルページを高速に表示させるための手法(フレームワーク)である
AMPに対応させるためには、AMP用のHTMLファイルが必要である
AMP HTMLの記述はシンプル！ルールを確認してきっちり記述すればOK

 

サービス概要

AMP対応の設計・構築

HTML版コンテンツからAMP版コンテンツへの組み換えを行います。

AMPの仕様（AMP HTML）に準拠

schema.orgを用いた構造化データの実装

コンテンツのメタデータ実装

サービス詳細

Webサイトのボリュームやカテゴリーなどを考慮し、AMP対応が必要なコンテンツの選別、AMPの制約を踏まえたビジュアルデザイン、既存コンテンツのAMP対応。Webサイトの構成とAMPの制約を考慮した、デザイン設計。

AMPでは、フレームワークの持つ独自ルールに従うことで表示を高速化させるため、厳密に仕様に沿った設計と実装が必要です。また、インラインで記述することのできるCSSの容量に上限があります。

サービスフロー

  1. 要件定義
  2. 対応範囲
  3. HTML版コンテンツからAMP版コンテンツへの変換方法
  4. AMP版コンテンツのURL設計
  5. 検品方法
  6. ビジュアルデザイン
  7. AMP版コンテンツの制作およびHTML版コンテンツからのリンク設定
  8. 検品
  9. 公開