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サイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

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

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

フライング・ハイ・ワークスは、東京都渋谷区にある2000年3月創業のシステム開発にも対応できるデザインも強いWeb制作・ホームページ制作会社です。東京都及びその近郊（首都圏）を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース（レスポンシブ対応）で制作します。

実績

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

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

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

採用

FHWでWebディレクター、Webデザイナー、Webプログラマーやシステム開発者として働いてみたいと思っていただける方は、下記にて定期的に募集をしておりますので、ぜひ、ご応募ください。

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

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