2018年3月8日

デザイン

AMPの概要や対応ポイントのまとめ

目次

  1. はじめに
  2. AMPとは
  3. AMP対応のポイント
  4. まとめ

はじめに

今回はGoogleやTwitterなどを中心として進められているプロジェクト、Accelerated Mobile Pages(AMP)Projectについて解説していきます。
WebサイトをAMP化することで、表示速度が圧倒的に高速化され、ユーザの体験を高めることができます。
また、現在はトップニュースへの反映などサイト集客についてはメリットが限定されますが、今後はサイト表示のランキングなどにも影響していくのではないかなど噂され、AMP化していくメリットが強くなるものと思われます。

今回はAMPについて解説するのと併せ、実際にAMPに対応していく為のポイントもご紹介していきます。

AMPとは

AMPはモバイル端末において、ウェブページの表示を高速化させる為の技術です。
スマホなどのモバイル端末がWebサイト訪問の主流となった今、サイト表示速度が1秒遅くなるだけでユーザーの満足度は10%以上下がると言われています。

そんななか、GoogleやTwitterが中心となり、モバイル端末のユーザー体験を最適化する為の高速化プロジェクトが立ち上がりました。
それがAccelerated Mobile Pages(AMP)Projectです。

AMPは以下の3つで構成されます。

AMP HTML

AMPを実現するのは、通常のHTMLではなくAMP HTMLと呼ばれる特殊なHTMLを使用します。
例えばhtmlタグについて、通常このようにしているものを
<html lang="ja">
このように変える必要があります。
<html ⚡> (または<html amp>

また、imgタグは使えず、amp-img を使用します。
更にamp-img ではwidthheightが必須となります。

他にもformamp-formstylestyle amp-custom とし更にサイズの制限があるなど多くのルールがあります。
詳しくは公式リファレンスをご覧ください。

AMP JS

AMPでは通常のJavaScriptが使えません。
レンダリングパフォーマンスを安定させ、後述のCacheを実現する為にも通常のJavaScriptは使えず、代替のパーツを使う形となります。
例えばサイトのアクセス数を計測するGoogle Analyticsのコードですが、このような形で埋め込むことができます。

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "pageview": "https://bagelee.com",
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

詳しくは公式リファレンスをご覧ください。

AMP Cache

AMPによって作られたページを高速化させる為、GoogleやTwitterはレンダリングされるページをキャッシュ化します。
その為、都度Webサーバにアクセスすることがなく、高速化を実現しているのです。
ですが、このキャッシュ化してもらう為には、前述のルールを全てクリアしなければなりません。
そのための検証ツールも後ほどご紹介します。

AMP対応のポイント

特に動的なサイトなどにとって、AMP化は簡単なものではありません。
AMP対応をするにあたって、いくつかポイントをご紹介します。

検証ツールを必ず使う

AMPの対応が正しくできているか、検証ツールを使用することができます。
これはURLの後ろに#development=1 をつけるだけです。
するとGoogle Chromeの検証ツールのConsoleに、Powered by AMP ⚡ HTML と表示されるはずです。
そしてその後にAMP validation successful. とメッセージが出てくれば成功です。正しくAMP化されています。

正しくできていない場合には赤文字でエラーが出ますので、確認するようにしてください。

CSSの容量をとにかく削る!

先述の通り、スタイルは<style amp-custom>で囲むことが必要となります。
また、CSSは最大50KBまでしか記載できません。
そして!important が使えないなど制約も多いです。
この制約を守りながら見かけを整えるのは本当に難しく、特にbootstrapなどの外部ライブラリを使用している場合には一発で50KBを超えてしまうこともあります。

ポイントとしては、CSSはminify(最小化)すること、また不要なスタイルは削除するなどです。

画像の縦横幅を把握しておく

amp-img タグには必ずwidthheightが必要です。
予めサイズは抑えておくようにしましょう。

POINT!!

AMPはトップニュースへの反映などのメリットもある為、CMSなどのシステムを使用したメディアサイト、またECサイトなどにAMPは多く用いられます。ですが、こういったシステムで意外と厄介なのがシステムで画像を入れる為に横幅、縦幅がわからないというケースがあることです。
その為、システム内で画像サイズを揃える、アップロード時にサイズをDBに保存する、レンダリング時にImageMagick などを使用しwidth、heightを取得しサイズを設定する必要があります。

URLを分けても同一にしても構わない

所謂レスポンシブサイトのように、1つのページでAMP対応と通常のHTML対応を兼ね備えるケースもありますし、ページを分けるケースもあります。
経験上、ページを分けるほうが作りやすいと感じていますが、どちらでもAMP化は可能です。

また、その場合にはcanonical属性を指定する必要があります。
canonical属性とは、優先して見て欲しいページを検索エンジンに伝える為の属性です。

PC版とSP版を分ける場合には、PC版のページにこのように「AMPの場合はこちらのページを見てね」と指定してあげます。
`

そしてAMPページには、通常のHTMLページをこのように指定します。
<link rel="canonical" href="https://bagelee.com/test.html">

当然、1つのページで兼ね備える場合には、canonical属性で自分自身のページを指定する必要があります。
<link rel="canonical" href="https://bagelee.com/test.html">

まとめ

AMP化することで高速化が実現可能であり、また今後もメリットが多く出てくると言われています。
ですが、特にシステムが入るサイトや動的なサイトなどではAMP化が非常に大変です。
いわゆるハマりどころも多くある為、今後細かい使い方も解説していきます。
また、とにかく公式ページをチェックすることで、新しいパーツなどの情報を得ることができるので、ぜひ確認するようにしてみてください。
AMP公式サイト

1

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP