これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki Pro テーマを AMP 対応する方法

ところで、自分が運営しているウェブサイトにアクセスしたとき、「ページが表示されるまでの時間」はどれくらいなのか、意識していますか。

通信速度が遅かったり、制限されている環境でも、ウェブサイトを可能な限り快適にページが閲覧できるよう、Google が主体で AMP(Accelerated Mobile Pages)という仕組みを提供しています(AMP は「アンプ」と読みます)。

Nishiki Pro は、その AMP に対応しています。

Nishiki Pro テーマの AMP ページの仕様について

AMP ページと非 AMP ページの比較

下の画像を見てください。Nishiki Pro では、680 px 以下の画面サイズで表示した場合、AMP ページと非 AMP ページのデザインの差異をなるべく少なくしています。

閲覧者にとっては通常、「今開いているのは AMP ページなんだな」と意識する必要はないですもんね。

そして非 AMP ページの操作性を、できるだけ AMP ページでも体験できるように対応しています。

グローバルナビ

メニューボタン(ハンバーガーアイコン)をタップすると、グローバルナビが表示されます。

目次の開閉

スムーススクロール

目次の見出しをタップすると、スルスルっとスクロールします。

このスムーススクロールは一点注意がありまして、ヘッダーを固定している場合だと少しスクロール位置がずれてしまうようです(ヘッダーを固定にしなくてもいいかな・・・とも思い始めてます)。

これは AMP のプラグイン側で細かく調整できる余地が今のところないため致し方ないのですが(僕が見つけられないだけかも)、今後対応できそうならやります。

ブロックエディター

本記事公開時点でのワードプレスに標準で搭載されているブロックと、Nishiki Blocks Pro 全てのブロックに対応しています。

※ Nishiki Blocks Pro の「セクション」ブロックの区切り線は現在未対応です。

サンプル

デモサイト で試すことができます。

というわけで、以下に Nishiki Pro テーマを AMP 対応する方法について手順を解説しています。

Nishiki Pro テーマを AMP 対応する方法

AMP プラグインをインストール&有効化

ワードプレスの管理画面から「プラグイン」→「新規追加」を選択し「AMP」と入力してプラグインを検索してください。

下の画像のように「AMP」プラグインが見つかりますので「今すぐインストール」「有効化」ボタンを押しましょう。

※ 似たような名前のプラグインがあるので
間違えないように注意してください。

また、プラグインは最新版であることを確認してください。

AMP プラグインの設定を「Reader」モードにする

次に、AMP プラグインの設定をしましょう。

ワードプレスの管理画面から「AMP」→「General」を選択します。

Experiences の設定(表示されてる場合)

もし Experiences の設定項目が表示されている場合、「Website」にチェックを入れてください(Stories は対応そもそもの前に、あまり試していないので、チェックは外しておいてください)。

Template Mode の設定

「Reader」を選択してください。

Supported Templates の設定

Template Mode を「Reader」に選択すると、AMP 対応する投稿タイプを指定できます。

有効にしたい投稿タイプにチェックを入れてください。

よくわからない場合は、上の画像のように「投稿」「固定ページ」の 2 つにチェックを入れてください。

カスタマイザーでデザインを適用する

次に、Nishiki Pro 専用の AMP デザインを適用しましょう。

ワードプレスの管理画面から「外観」→「カスタマイズ」を選択します。

「[Nishiki Pro] オプション」→「AMP」パネルを開くと、下の画像のように設定項目が表示されます。

「テンプレート適用」にチェックを入れて「公開」ボタンを押してください。Nishiki Pro 専用の AMP デザインが適用されます。

チェックを外している場合は、AMP プラグイン側が用意しているデフォルトのデザインが適用されます。

つまり、カスタマイザーの設定で Nishiki Pro 専用デザインにもできるし、デフォルトのデザインにもできます。

ただし、デフォルトのデザインの場合、ブロックエディターのスタイルを適用していません。

Nishiki Pro 専用デザインを適用されることをおすすめします。

ページを AMP 対応してみよう

次に、ワードプレスの管理画面から、投稿ページ または 固定ページの編集画面を開いてください。

「Enable AMP」を ON にして保存(更新)すると、AMP ページにアクセスできるようになります。

AMP ページにアクセスするには?

非 AMP ページの URL の末尾に「?amp」または「amp」をつけてアクセスしましょう。

AMP ページの URL(例)

https://support.animagate.com/wp-nishiki-mokumoku-migration-online/?amp
https://support.animagate.com/wp-nishiki-mokumoku-migration-online/amp/

AMP ページが有効かどうか確認しよう

AMP ページが有効かどうか確認してみましょう。2 通りの方法があります。

1.Google Chrome で確認する方法

AMP ページの URL に「#development=1」をつけて再度読み込んでください。

https://support.animagate.com/wp-nishiki-mokumoku-migration-online/amp/#development=1

読み込んだあと、Chrome のデベロッパーツールのコンソールを開いて「AMP validation successful.」と表示されていれば有効です。

2.テストツールで確認する方法

Google 検索で「amp validator」と入力して「AMP ページのテストとプレビュー」の入力欄に AMP ページの URL を入力して「テストを実行」ボタンを押してください。

AMP ページが有効かどうか、テストできます。

下の画像のように、テスト結果が「有効な AMP ページです」と表示されれば OK です。

AMP ページに広告を入れてみよう

以下のページで解説しましたので、ご参考ください。

まとめ

Nishiki Pro テーマの AMP 対応方法についてささっと解説しました。

実はウェブサイトを AMP 対応することは、ただ単純に「ページの表示速度を高速化する」だけではなく、様々な恩恵を得ることができるとテーマ開発者の僕は考えています。

需要があれば、勉強会や記事などでも話題として触れようとも思っていますので、興味がある方はぜひ教えてください。

ちなみにですが、以下は 2019 年に開催された Google for WordPress Publishers に参加した時のツイートです。

会場内で「5G の環境が整備されれば AMP って必要なくない?」という質問がありました。

その質問に対する回答と、回答を聞いて僕なりに今後の開発方針について考えていました。

今後の対応予定

今のところは、以下の対応予定を立てています。

  • 構造化データ対応

その他、僕自身が AMP の仕様を全て把握し切れていないので、未対応の箇所は随時改善を行う予定です。

不明点、要望などがありましたら、ユーザーコミュニティ までお寄せください。

このページが役に立ちましたら、ぜひシェアしてください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。