ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2019年7月15日webcode編集部FacebookTwitterはてブPocketFeedlyあなたのWebサイトにはAMPが導入されているでしょうか?AMPを導入することによって、モバイルページの表示速度を高速化させることができます。AMPを導入すると、モバイルページの表示速度が約4倍になるとも言われています。そこで今回は、「AMPとは何なのか」、「AMPをどうやって導入するのか」といったことをお伝えしていきます。AMPを導入しようか迷っている方には特に読んでもらいたいです。HTML)のことです。HACKSより)簡単に言うと、「モバイル端末でWebページを高速表示できる仕組み」のことです。(「AMP」を日本語に訳すと、「加速化モバイルページ」となります。)AMPは2015年にプロジェクト公開され、2016年10月からはスマホでの検索結果にもAMP対応が始まりました。Chromeのスマホ検索結果では、次のように表示されています。AMPの仕組みAMPは、3つの要素から成り立っています。この3要素を使って、モバイル端末でページを高速で表示しているのです。Cache(取得したAMPのページをキャッシュする)具体的なAMPの仕組みとしては、次のようになります。仕様を限定するAMPでは、JavaScriptを使うことはできません。JS」というAMPが定義しているJavaScriptのライブラリを使う必要があります。JSを使ってJavaScriptの仕様を制限し、動画やアニメーションなどを瞬時にロードできるようにしています。簡単に言うと、高速化する際に無駄なものをできるだけ減らそうとしているのです。このように、仕様を限定することで高速化しているのです。キャッシュを利用するAMPの仕様に沿って作成されたページは、GoogleやTwitterにキャッシュとして保存されています。このキャッシュを利用することにより、読み込みにかかる時間を大幅に減らしているのです。AMP化のメリットとデメリットAMPのメリットコンテンツが高速で表示される先ほどもお伝えしたように、以下のような仕組みで高速表示されます。JS」を使うこれによって読み込み時間が短縮され、モバイルページの高速表示が可能になります。AMPが導入されていないWebサイトはリンクをクリックしてからサーバーに情報を取得しに行くので、どうしても時間がかかってしまいます。通常の検索結果の枠とは別の枠で記事を表示させることができるAMPを導入しているWebサイトは、Googleでのモバイル検索結果で表示されるカルーセル部分で記事を表示させることが可能です。投稿した記事が必ず表示されるとは限りませんが...。カルーセル部分は、「アイキャッチ」と呼ばれる画像とタイトルが一緒に表示されます。そのため、他の上位表示されているWebサイトに比べて、目が届きやすくなり、多くの人がアクセスしてくれる可能性があります。ユーザーのストレスを軽減できるページの表示速度が高速化されることにより、ユーザーが「遅い」と感じることは少なくなります。そのため、ユーザーが読むことへのストレスがなくなり、直帰率や離脱率を下げることができます。AMPのデメリットAMPを導入するまでに時間がかかるAMPを導入するには、細かな設定が必要になるのですぐに導入するのは難しいです。JS」を使うことに加えて、禁止されているタグが多いです。画像を入れる際に使う「imgタグ」は「amp-imgタグ」を利用しなければならないため、HTMLも修正する必要があります。他にもhtml要素に「amp」という属性をつけることが必要になります。AdSenseなどの広告を貼っている場合も多いでしょう。AMPはJavaScriptの使用が制限されるので、このままでは広告は表示されません。広告を表示する場合は「amp-ad」というタグに変更する必要があります。AdSense広告を表示する方法については後ほど詳しく説明します。デザインが崩れてしまうAMPを導入することによって、デザインが崩れてしまうことがあります。バグのように表示されてしまうこともあるので、注意が必要です。AMPを導入した際には、崩れたデザインを修正することも必要になります。WordPressのプラグインでAMP化する方法ここからはプラグインでAMP化する方法をお伝えします。プラグインを使うことで、AMP化させることは可能です。記事本文以外の要素が削られてしまうことがあるので、プラグインを入れるだけでなく、Webサイトのデザインに合わせてカスタマイズすることが必要になります。ここでは、以下の4つのプラグインについて紹介します。AMPこのプラグインは、AMP公式サポートページでも紹介されているプラグインです。プラグインをインストールして有効化するだけで簡単にAMP化することができます。難しい設定は一切ありませんが、機能はWebサイトをAMP化するための機能だけになっています。AMP化されたページは、「http://○○○/amp/」か「http://○○○?amp=1」にすることで表示されます。レイアウトが崩れていた場合はプラグインを構成している「template.php」でレイアウトを編集しましょう。pagefrog先ほど紹介した「AMP」は、AMP化することしかできません。AdSense」などの広告も削除されてしまいます。AdSense」などの広告表示ができるようになります。その他にも「AMP」で生じたエラーを解消して、デザインの調整もしてくれます。SEO」という別のプラグインを入れている場合のみ、必要になります。それ以外の場合にインストールして有効化しても使うことはできませんので注意しましょう。SEO」のアドオンプラグインです。SEOで設定した組織の名称やロゴなどのデータをAMPページのデータに反映してくれるのです。このプラグインは設定が一切ないので、インストールして有効化するだけですぐにAMP化することができます。Pagesこのプラグインは、別のプラグインと併用することなく、AMP化することができます。設定では、以下の項目が設定できます。Analyticsの設定このように細かな設定も可能です。ロゴが設定されていないと、AMPチェックでエラー表示されるので、必ず設定しておきましょう。先ほどはプラグインを使ってAMP化する方法をお伝えしてきました。プラグインなしでAMP化することも可能です。プラグインを使わずにAMP化するためには、以下のような手順で行います。PHPコードで通常のページとAMPページでの振り分け機能を追加するheadタグとmetaタグの振り分けるcanonivalタグを設定するamphtmlを設定するviewportを設定するAMP用のJavaScriptライブラリを読み込むSchema.orgの設定をするCSSの設定をするamp-boilerplateを読み込むこのように9つの手順が必要になります。HTMLやCSSだけでなく、PHPも使っていくことになります。PHPでの条件分岐を行うので、PHPの知識も必要になるので、難易度は非常に高いです。初心者の方でどうしてもAMP化したいという場合は、プラグインを使うことをおすすめします。AMPのカスタマイズ方法AMP化できるプラグインを有効化すれば、あなたもWebサイトもすぐにAMP化できます。簡単にできるのは良いのですが、思い通りのデザインやレイアウトが崩れてしまうことが多いです。それを修正するためにカスタマイズが必要になります。カスタマイズしないと、以下のようなことが起こってしまいます。AdSenseが表示できないこのようなことが起こってしまいます。きれいなデザインに仕上げたWebサイトがスマホなどのモバイル端末では単純なデザインでしか表示されていないのは、非常にもったいないです。手間はかかりますが、カスタマイズすることをおすすめします。ここでは、AMPのカスタマイズをするための流れを簡単に紹介しておきます。手順としては以下のようになります。テーマフォルダの中に「amp」という名前のフォルダを作る「amp」フォルダの中に「header.php(ヘッダー)」、「single.php(個別投稿)」、「footer.php(フッター)」の3つのファイルを作る「amp」フォルダの中に「style.php」を作る(これでオリジナルのCSSが適用できます。)この3つの手順を踏んでいく必要があります。基本的には、レイアウトやデザインに関するカスタマイズは「style.php」に記述しましょう。AdSenseなどのそれぞれの投稿ページに出力する必要があるものは、「single.php」に記述していきます。AMPに対応するテーマ&テンプレートここでは、AMPに対応しているテーマを3つ紹介します。Simp(simpデモページ)「Simp」は、無料で開発されているWordPressのテンプレートになります。あなたがデザインしたページを元にしてAMPページを作成してくれます。画像なども自動で「amp-img」タグに置き換えてくれるなど非常に便利になっていますので、面倒な手間は必要ありません。Sentry(sentryデモページ)「Sentry」は、無料のWordPressのテーマです。WordPressのAMPプラグインをインストールして有効化するだけで、独自のAMPページを生成してくれます。他にも人気記事や、SNSにシェアするためのボタンを自動的に表示してくれます。AdSenseも設置することが可能です。AWESOME(AWESOMEテーマページ)「AWESOME」は、無料のWordPressテーマです。メニュー表示してくれるハンバーガーメニューが実装されていて、使いやすくてきれいなデザインになっています。Analyticsが簡単に導入できるなど便利な機能が多いのも特徴です。AMP化している際によく起こってしまいます。このエラーをそのままにしていると、AMP化されたページが表示されないなどトラブルの原因にもなります。ユーザーが使いにくいようなページになってしまうこともあります。AMP化したページを公開する前には必ずエラーのチェックやエラーの対処をしておきましょう。エラーを発見する方法としては以下の2つの方法があります。自分でWebサイトを作ったことがある方なら「デベロッパーツール」は使ったことがあるでしょう。(デベロッパーツールを出力したいページで右クリック→「検証」)以下のようにエラーの発見をします。Chromeでエラーチェックをしたいページを開く開いたページのURLの後ろに「#development=1」を追記する(例.https://webcodezero.com/#development=1)これでエラーがデベロッパーツールの「Console」に表示されます。successful.」と表示されます。エラーがある場合は、エラーの原因とそのリンクが警告として表示されます。Project」が公式に提供しているサービスです。このサイトにAMP化したURLかソースコードをコピーします。すると、エラーが出力されます。コードをいちいちコピペするのは少し面倒ですが、どこでエラーが起こっているのかわかりやすく表示されます。Status」がPASSと表示されます。StatusがFAILと表示され、該当している部分に原因が表示されます。AMPページにAdSense広告を貼る方法AMP化したページには限られたタグやコードしか使えません。AdSense広告を表示するには、「amp-ad」というタグを使う必要があります。ここでは、AdSense広告を貼る方法について紹介します。AMP化されていて、AdSenseの利用登録が済んでいることを前提として説明していきます。手順としては以下のようになります。AdSenseでレスポンシブの広告ユニットを作成する任意の場所にAMP用の広告コードを設置するAMPにAdSenseを貼るためのライブラリを読み込むAMPにAdSenseを設置する場合はamp-adライブラリを読み込む必要があります。headタグの中に下のようなコードを記述します。name」の下に記述しておけばOKです。AdSenseの「広告の設定」→「広告ユニット」でレスポンシブ広告ユニットをAMP用に作成します。次に広告ユニットのコードを確認します。以下のようなコードが表示されていると思います。この中の「data-ad-client」と「data-ad-slot」の2つの情報を後で使うので、どこかにメモしておきましょう。ちなみに、「data-ad-client」は、Webサイト運営者のIDを示しています。別のWebサイトでも運営者が同じであれば、IDは変わりません。「data-ad-slot」は広告ユニットごとに変わってきますので、間違えないようにしましょう。[]).push({});</script>任意の場所にAMP用の広告コードを設置する自分の好きな場所にAMP用の広告コードを設置していきます。サイズは自由に設定できますが、AdSenseの公式ページでは以下のような記述があります。場合によっては規約違反になることもあるので注意しましょう。ファーストビューのときは高さ100pxにするファーストビューでなければ、300px×250pxがおすすめ高さ100pxにする場合は、layoutに以下のように記述します。</amp-ad>12345678910111213<amp-adlayout="fixed-height"height=100type="adsense"data-ad-client="ca-pub-XXXXXXXXXXXXXXX"data-ad-slot="YYYYYYYYYYY"></amp-ad>300px×250pxにする場合は以下のように記述します。</amp-ad>12345678910111213<amp-adlayout="fixed-height"height=100type="adsense"data-ad-client="ca-pub-XXXXXXXXXXXXXXX"data-ad-slot="YYYYYYYYYYY"></amp-ad>AMPに関するまとめいかがでしたか?今回はWordPressのサイトをAMP対応する方法についてお伝えしました。AMP化することでスマホなどのモバイル端末でも高速で表示してくれます。プラグインを使ってAMP化するにしても設定やカスタマイズは手間がかかります。「表示速度があまりにも遅すぎてどうにかしたい」という方であれば、やってみても良いでしょう。最後まで読んでいただき、ありがとうございました。表示されない?!WordPressウィジェットの作成・編集方法・おすすめまで完全解説2020年2月24日さくらのレンタルサーバとエックスサーバーを比較!おすすめはどんな人?2020年2月24日wordpressでCSSを編集!初心者がレスポンシブデザインを作るための方法まとめWordPressのサイトマップの作成方法!おすすめプラグイン4つも紹介おすすめの記事WordPress(ワードプレス)賢威は初心者にもおすすめ?メリット・デメリットから使い方まで評判を解説ワードプレスには多数のテーマがあり、初心者はどれを使えばよいのか迷ってしまいますよね。「無料テーマだと機能が物足りないし、どうせ有料テーマ...WebデザインWordPressのサイトマップの作成方法!おすすめプラグイン4つも紹介Webサイトを長期間運用していくと、古い記事が埋もれて見つけにくくなってしまいます。それを防ぐために「サイトマップ」があります。サイトマッ...WordPress(ワードプレス)wordpressでjqueryはどこに書く?プラグインの導入方法や注意点まとめグローバルナビにアニメーションを導入したい。パララックスエフェクトのようなエフェクトを加えたい。スクロールに応じてクラスを変更したい。Console)の登録方法を、簡単にお伝えします。Consol...WordPress(ワードプレス)ConohaWingの解約理由を紹介!ワードプレスの始め方も初心者に解説2019年に利用を開始したレンタルサーバーのConohaWingを、半年程度で解約しました。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。