レスポンシブサイトで AMP との共存は？疑問にお答えします！

blog

ブログ

投稿日：20171115 更新日：20230323 カテゴリー：ブログ

AMP でレスポンシブサイトの共存をお考えの方いるのではないでしょうか？
本格的に実装なされた AMP (Accelerated Mobile Pages)。いわゆるモバイルページ高速化ですが、弊社が推奨しているレスポンシブサイトとの共存について、現状どのような判断をすれば良いのか、疑問を持たれている人も多いでしょう。実は筆者もその一人です。
そこで弊社が考える AMP とレスポンシブサイトのうまい付き合い方をまとめていきます。

なぜサイトの AMP 化が急がれているのか？

この疑問は筆者も思っていました。
レスポンシブWebデザインは、モバイルページでも全てのソース（HTML、CSS、Javascriptなど）を読み込み、さらにPC用で作られた高解像度の画像も読み込みます。するとスペックの良し悪しですが、一部の古いスマートフォンや廉価モデルで表示結果速度に遅延が生じるのです。
スマートフォンでの表示速度を高速化することでユーザーエクスペリエンスの向上を狙っているわけです。

AMP 化すればモバイルサイトは必要ないのか？

ではモバイルサイトではなくて、PCサイトとAMP対応でいいのではないかという疑問がでてきました。
AMPは「検索サイトにキャッシュとしてあらかじめ読み込んでおくことによるサイト表示の高速化」と「スタイルを簡略化しよみやすく」することに特化したプロジェクトです。

AMPではスライダーやカルーセル、パララックスなどのフロントサイドの表現に関わる、独自に用意したJavascriptやjQueryを利用することができません。
またiframeや画像にも厳密なルールがあります。

モバイルサイトがない場合、そういった表現が必要なサイトのユーザーエクスペリエンスを低下させることも考えられます。
また、現時点ではGoogleやTwitter、はてなブックマーク、アメブロの一部（2017年11月現在）でのみAMP対応されております。順次Yahooなどの大手検索サイトなどでも広がっていくことが予想されます。
したがって、モバイルサイトはPCサイトと同時に制作し、AMP化させておくというのが現時点での理想ではないでしょうか。

AMP とレスポンシブWebデザインは共存する

そもそもレスポンシブで制作されたサイトのスマホページは、AMPとして認められるのでしょうか？
はい、大丈夫です。
AMPプロジェクトでは、AMP HTMLで作られたテンプレートを公開しています。

AMP START

AMP start
どのテンプレートでもレスポンシブを採用しており、ワンソースで構成されております。

弊社はレスポンシブWebデザインを強く推奨しています。

ワンソースとしての強み。アクセス流入だけでなく組織を強くする
 スマホとPCで閲覧した時の見た目（デザイン）が同じですか？

レスポンシブWebデザインはすべてに対して万能ではありません。
先にも述べたようにレスポンシブWebデザインは表示速度が遅いです。
それでもレスポンシブにこだわるのは、Googleが推奨しているという理由よりも、運用が楽というのが理由です。

AMP対応は、モバイルサイトあってこそ成立することはご理解いただけたと思います。
ただし、レスポンシブ対応サイトをAMP化させるためにはいくつかの条件があります。

画像の読み込み

AMPでは、タグを使用します。
さらに画像の高さと幅も数値で指定しておきます。レスポンシブの場合、max-width: 100%; max-height: auto;と記載しますが、これはNGとなります。
レスポンシブの場合は、以下のようにlayout=”responsive”属性を使用します。

&amp;amp;lt;amp-img src="画像パスを指定"
    width="500"
    height="350"
    layout="responsive"&amp;amp;gt;
&amp;amp;lt;/amp-img&amp;amp;gt;

スムーズなレンダリングを行うために必須となります。画像サイズを指定しないとバリデーションエラーを起こしてしまいます。

CSSの外部読み込み

レスポンシブでなくとも、外部読み込みは基本で行われていると思いますが、AMPの場合、CSSをlink rel=で読み込みすることができません。そのためhead内にstyle amp-customタグを用いて記述します。

&amp;amp;lt;style amp-custom&amp;amp;gt;
    body { margin:0; padding:10px; }
&amp;amp;lt;/style&amp;amp;gt;

現状どのような判断をすれば良いのか

AMPプロジェクトが始動して2年ほどでしょうか。対応サイトも多く見られるようになってきました。
レスポンシブ対応させた上でAMP対応ともなると手間がかかり工数上乗せとなります。
もし、競合他社のサイトが検索結果上位にあって、対策の甲斐もなく甘んじて現状を受け入れるくらいなら、いっそのことAMP対応を検討してみる良い機会かもしれませんね。