愛知県名古屋市のブランディングで育てる
ECコンサルティング会社|アイヴィクス株式会社

アイヴィクス株式会社
  • お問い合わせ
  • 09026861091
  • twitter
  • twitter
  • facebook

ブランディングで育てるECコンサルティング会社|アイヴィクス株式会社

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

Blog

ブログ

投稿日:20171115 更新日:20171218 カテゴリー: ブログ

レスポンシブサイトで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

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

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

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

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

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

画像の読み込み

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

<amp-img src="画像パスを指定"
    width="500"
    height="350"
    layout="responsive">
</amp-img>

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

CSSの外部読み込み

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

<style amp-custom>
    body { margin:0; padding:10px; }
</style>

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

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

まとめ

以上がレスポンシブWebデザインでAMP対応させる方法となります。
その他、ルールがありますが、別の機会でご紹介したいと思います。

愛知県名古屋市のブランディングで育てるECサイト構築専門Web制作会社|アイヴィクス株式会社

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

この記事が気に入ったらいいね!しよう

アイヴィクス株式会社の最新記事をお届けします

無料レポート