2016.03.16 Web制作

AMP対応はじめました！

 

Google先生が始めた最新規格――AMP(Accelerated Mobile Pages)。モバイルページを超高速にするという触れ込みですが、その正体はどのようなものでしょうか。簡単な用語でご説明します。

Google-AMP

AMPとは。

はい、またまた出てきましたね新しい用語が。私たちWeb業界人にとってはある種の脅威でもあり、ビジネスチャンスでもあります。
AMPを大づかみに説明すると、モバイル（つまりスマホ）の表示速度を速めるために工夫されたHTML規格の一種です。ポイントは、以下のようなものです。

  • 既存ページのソース(例えばHTML5)を置き換えてページを作るのではなく、別の専用ページ（AMPページ）を用意するイメージ。
  • ソースは独特で、<html ⚡>の宣言句などがある。イナズマの環境依存文字ですよ！（<html amp>の宣言でもよい）。
  • インラインスタイルや、<amp-img>などの独自タグ利用が推奨される。

AMP HTMLのサンプルソース。

ここまででイメージはつきましたでしょうか。
百聞は一見にしかず。三度の飯よりソースコードが好きな貴殿に、サンプルソースをご紹介します。
Google AMP公式サイトより引用。

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body {
-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
animation:-amp-start 8s steps(1,end) 0s 1 normal both

@-webkit-keyframes -amp-start{
from{visibility:hidden}to{visibility:visible}}

@-moz-keyframes -amp-star{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>

<noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>

<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>

いかがでしょう。これまでは外部CSSファイルが正義の気がしていましたが、まさかのインラインスタイル。。そして、うーん。なかなか複雑な見栄えです。
やはり見どころは<html ⚡>。このイナズママークは美しいですね。
さて、ソースを拝見して思ったこと。これは、通常のコーディング業務の流れで行うレベルではない！ということ。何か自動変換ツールを使ってできないものでしょうか。
ええ、あります。それは後述します。その前に、AMPに対応するとどのようなメリットがあるのかご紹介します。

AMP ページのメリット。

ページの表示速度がイナズマのように速くなることは既に述べました。さらに実はAMPページには、検索結果に思いがけないメリットが現れるのです。

以下はニュース系サイトのページをスマホ表示したところです。
産経新聞や朝日新聞サイトなどは、すでにAMP対応しています。

IMG_0720

いかがでしょう。イナズママークの目印と共に、各ページが画像付き（サムネイル）で表示されています。
しかもこれは、カルーセルの横スライドで次のコンテンツを表示できます。

IMG_0721

メリットを享受できるサイトの筆頭は、ニュースサイトということになります。
その応用で、ブログ記事ページもAMP対応に向いているといえるでしょう。

で、どうするの？

AMPページのお得感は分かりました。GoogleAnalyticsページでもアナウンスされているので、実装した方が何かと有利になりそうです。

さて、自動変換の解決策です。
WordPressを使っているのであれば、その名もズバリ「AMP」というプラグインが提供されています。

amp

インストールの所要時間は数分。それだけで、投稿記事を自動でAMPページ対応してくれます。
たとえば、以下の記事であれば/amp/を付与したAMPページが自動生成されます。

【今回のまとめ】

Googleが提唱するAMPは凄そう（Webページが早くなる）。特にニュースページに最適。でも別ページを作るのは手間。WordPressのプラグインなら簡単。オーイエ―♪

この記事を読んで、私たちに興味を持ったお客様は、気軽にお問い合わせください！

★お問い合わせ

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら

フライング・ハイ・ワークスの紹介

フライング・ハイ・ワークスは、東京のホームページ制作・Web制作会社・システム開発会社です。東京都及びその近郊（首都圏）を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース（レスポンシブ対応）で制作します。

実績

デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステム開発を始め、WordPressのカスタマイズを得意としております。

また、SEOやランディングページ（LP）、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください！

東京のホームページ制作・Web制作のお問い合わせ、お見積り依頼、相談、質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら