【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

Googleなどが立ち上げたAMPが静的ページを超高速化する!

Googleなどが立ち上げたAMPが静的ページを超高速化する!

Accelerated Mobile Pages Project

先日、Googleから「AMPプロジェクト(Accelerated Mobile Pages Project)」が紹介されました。

Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web

このAMPプロジェクが作ったAMP HTMLというフレームワークに沿ってページを実装することで、速いページを作れるだけでなく、GoogleやTwitterからアクセスしたときにキャッシュを利用してまるで、ネイティブアプリのような高速表示を行うことができるようになります。

AMP プロジェクトとは

AMP(ACCELERATED MOBILE PAGES)はモバイルでのWebページの表示を高速化することを目的に作られたプロジェクトです。

Accelerated Mobile Pages Project

GoogleやTwitter、WordPress.comなどのIT系企業と、ニュースメディアなどが参加しています。今回は、特にニュースコンテンツなどの静的ページを高速化することに焦点を絞った動きとなっています。

AMP HTML フレームワーク

AMPではAMP HTMLというフレームワークを定めています。

AMP HTMLは既存のHTML/CSS/JavaScriptに制限を加えたもので、サーバー側での特別な設定は必要ありません。ページの読み込みに影響するJavaScriptやiframe、画像などの利用が大きく制限されており、この仕様に沿ってページを作れば速いページを実現することが可能とされています。

さらに、AMPで作られたページはGoogleやTwitterのサーバーにキャッシュされます。

Google検索結果やTwitterからAMP HTMLで作られたページにアクセスする場合は、ページを読み込むのではなく、GoogleやTwitterのサーバーのキャッシュを表示するようになります。

そのため、ネイティブアプリのようなスムーズな表示ができるようになります。どのような動きをするのかは、AMPの公式サイトの動画を見れば分かりやすいです。

Accelerated Mobile Pages Project

AMPを実装するには

AMPの仕様が公開されています。
ampproject/amphtml · GitHub

AMPではまずhead内で AMP JS libraryを読み込みます。これによって、外部リソースの読込が制限され、AMP独自の要素が利用できるようになります。

そして、HTML/CSS/JavaScriptのルールにしたがってマークアップを行います。例えば現状以下のようなルールがあります。

  • 使用できるhtml要素に制限がある
  • JavaScriptがほぼ使えない
  • CSSはすべてインラインで記述、セレクタにも一部制限
  • head内の書き方やdoctype宣言にも指定がある

AMP HTMLで使える要素や必要なマークアップ
=>amphtml/amp-html-format.md at master · ampproject/amphtml · GitHub

JavaScriptが利用できない代わりに、独自の要素(”amp-img”、”amp-youtube”、”amp-image-lightbox”)が用意されており、SNSやYoutubeを埋め込んだり、カルーセルやライトボックスなどある程度の動きのあるページを作ることも可能なようです。

AMPの独自要素
=>amphtml/README.md at master · ampproject/amphtml · GitHub
=>amphtml/README.md at master · ampproject/amphtml · GitHub

正しく実装されているかはデベロッパーツールで確認可能

また、AMPの規格に沿ったソースコードになっているかどうかはChromeのディベロッパーツールの「console」で確認可能です。ディベロッパーツールを開き、URLの末尾に”#development=1″を付けて更新してみましょう。

ディベロッパーツールでAMPに沿っているか確認

今後の動きに注目

AMPを実装することができれば、Google検索やTwitterなどから、ユーザーが全くストレスなくアクセスすることができるようになります。

今回のAMP HTMLではECサイトは射程に含まれていませんが、ECサイト内のブログコンテンツや、キャンペーンページではAMP HTMLが利用できる可能性があります。

AMPの仕様はアップデートされていくようですので、今後に動きに注目していきたいと思います。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+