WordPressで無料のAMP対応テーマ5選と便利なChrome拡張

公開日: : 最終更新日:2017/05/12 WordPress , , , , ,


LINE facebook twitter URLコピー
B! pocket note 楽天


AMP対応WordPressテーマ
AMP関連の情報も増えてきましたね。これがAMPか!と思わせるようなデザインも増えてきました。

こんにちは、WordPress大好きカグア!です。

先日AMPまわりをいろいろと検証する機会がありましたので、AMP関連のフリーのWordPressテーマを調べてみました。

関連記事
>>WordBench東京で登壇してきました+スライドとプラグイン10選と裏話
>>WordPressでSEOとソーシャルでタイトルを変える簡単な方法
>>平均ページ滞在時間を218%増やしたWordPressプラグインTable of Contents Plus

WordPressのAMP対応テーマとは

WordPressのAMP化の方法

WordPressをAMP対応させるには、いくつかの方法があります。PCブラウザ用のテーマと切り替えるのか、フル対応させるのかなど様々です。

AMPプラグインを入れる

AMP

Automattic社からリリースされていますプラグインです。導入するだけで簡単にAMP対応してくれます。
>>AMP — WordPress Plugins

このAMPプラグインにきれいにカスタムしちゃおうという記事も登場。
>>WordPress AMPプラグインをいろいろ改造してみる – ねんでぶろぐ

オートマティック社のGithubはこちら。
>>GitHub – Automattic/amp-wp: WordPress plugin for adding AMP support

AMP対応のテーマを導入

そもそもテーマ自体がAMP対応しているものも、一部で出始めています。

AMPプラグインのデザインテーマを導入

前述のAMPプラグインを綺麗にデザインするAMPデザインテーマも登場しています。

100%Google AMP対応WordPressテーマ

なんと、フルAMP対応のPCブラウザでもAMP出力するテーマも出始めています。

フルスクラッチで実装

出回っているAMP対応テーマではなく、完全に自作してしまうという方法も。以下のAMPプロジェクトの公式サイトは、なんとPCブラウザでもAMPです。ここまでデザイン出来ちゃうんですね。
AMP project
>>Overview – Accelerated Mobile Pages Project

国内Web制作関連の情報では、QiitaのAMPタグ界隈が2015年末頃から活況です。
>>AMPに関する最近いいねされた投稿 – Qiita

背景にはMFIの流れ

こちらの記事によれば、インデックスはAMPが最優先ではないとしながらも、オプションとして見ていることが伺えます。

もしもモバイル版もデスクトップ版も存在せず、AMPページが用意されている場合は、AMP をインデックスする。
>>Gary Illyes 氏によるモバイルファーストインデックス解説 SMX West 2017 ::SEM R (#SEMR)

モバイルファーストインデックス(MFI)の流れは今年のトピックになりそうです。

それでは、フリーのAMP対応WordPressテーマを見ていきましょう。

AMP対応WordPressテーマ/プラグイン

Simplicity

国産「AMP化対応WordPressテーマ」です。ライセンスはGPL v2です。AdSenseやカエレバなど様々なブログパーツに対応。更新頻度の多さやコミュニティも盛況という安定感です。
Simplicity
>>SimplicityのAMP機能の使い方。カスタマイズ方法など。

PageFrog

WordPress公式ディレクトリにも登録されている「Google AMP WordPressプラグイン」です。固定ページもAMP化できるとのこと。
PageFrog
>>Facebook Instant Articles & Google AMP Pages by PageFrog — WordPress Plugins

Sentry

AMPプラグイン対応の無料の国産「WordPressテーマ」です。ライセンスはGPL v2です。
sentry
>>最強の無料Wordpressテーマ「Sentry」〜AMPにも対応したスマホファーストテンプレート〜 | ultimate-ez.com

上記プラグインは鈴木さんの記事で知ったのですが、他にもYoastのアドオンもあるみたいです。

Simp

SimpleとAMPでSimpだそうです。前述のAMPプラグインのデザインをカスタムする国産の「AMPデザインテーマ」です。ライセンスは GPL v2 です。
simp
>>WordPressのAMPデザインテンプレート「Simp」を無料配布

AWESOME

こちらも、AMPプラグインをデザインカスタムする国産の「AMPデザインテーマ」です。バーガーメニューを実装するなど、独自のUIが魅力です。Githubでも公開中。ライセンスは、GPL v2 です。
AWESOME
>>【無料】Wordpress用AMPデザインテーマ「AWESOME」配布開始しました。

AMPページの確認に便利なChrome拡張

AMPページのいろいろな事例やデザインを知りたくなりますよね。AMP Project のページや、多くの検証記事が登場してきています。
>>Case Studies – Accelerated Mobile Pages Project
>>日本の新聞社のWebサイト5社のAMP対応状況について調べてみた。 – Qiita

そして、自分自身でもいろいろなサイトや競合のAMPページを見てみないと!という人も増えているかと思います。

じつはAMPプロジェクトから公式に、AMP対応ページ表示時に即AMPページに切り替えられるChrome拡張がリリースされています。超便利。
AMPバリデーター
>>AMP Validator – Chrome ウェブストア

AMP Validator をChromeにインストールしますと、AMP対応ページでは、通常グレーのアイコンが青く変わります。クリックしますと、AMPページを見ることができます。
AMP validator

これで、いろいろなサイトのAMP対応状況やソースコードも確認しやすくなりますね。

AMPやモバイルインデックス、今年はしっかりとキャッチアップしていかないとなーと思いました。

お疲れ様でした。

蒸しタオルウォーマーSH ( 前開き ) 業務用 ¥5,832

蒸しタオル
Amazonで詳しく見る

関連情報リンク

IMG_2994
Photo:license by kinetoskop

対応すべきことはたくさんあります。
>>AMP導入を検討している全てのWEBサイト運営者へ捧げる、10の検討事項とその解決法 – Qiita

はてなも対応は早かったですね。
>>AMP(Accelerated Mobile Pages)を使用する – はてなブログ ヘルプ

AMPはあくまでオプション的な位置づけっぽいです。
>>AMP対応すれば、レスポンシブ ウェブ デザインのサイトは不要なのか? | 海外SEO情報ブログ

フルAMPサイトでも問題なし。クロールのされ方は要調査ですけども。
>>AMP対応したページだけをGoogleに公開しても問題なし、別URL構成のモバイルサイトではPC向けページにrel=amphtmlを設置 | 海外SEO情報ブログ

積極的に対応を進めるそうです。
>>Androidアプリ「はてなブックマーク」がAMPに対応しました – はてなブックマーク開発ブログ

実際の検索結果での表示も確認できます。
>>ブログ記事がAMP対応できているかを確認できる「AMPテストツール」 | WEBマスターの手帳

amp-analytics というらしい。
>>AMP ページにアナリティクスを追加する  |  AMP ページ向けアナリティクス  |  Google Developers

山田さん対応早い。
>>当ブログのAMP化とAMP Analytics導入のお知らせ | SEM Technology

まとめ

AMPやMFI(モバイルファーストインデックス)は、今年は注目の年になりそうですね。定期的なキャッチアップが欠かせない感じです。鈴木さんのブログに詳しく載っていましたね。
>>モバイルファーストインデックスについてGoogleに何でも聞いてみた #inhouseseo ―― 内部リンクの評価は? 導入時期は? 分割数が異なるページネーションは? など | 海外SEO情報ブログ

WordPress AMP対応 モダンWeb制作 レッスンブック | エビスコム

WordPress AMP対応 モダンWeb制作 レッスンブック | エビスコム |本 | 通販 | Amazon
Amazonで詳しく見る

いっぽうで、AMPにしたさいの効果検証などやマネジメントなど、マーケティング周りでもノウハウを貯めないとな、と思いました。

AMP対応テンプレートも今年は充実してきそうですね。お互いがんばりましょうー。

ちなみにAMPは、Googleの金谷さんに教えてもらったところ、アンプと読むそうです。

「アンプ!」
  • このエントリーをはてなブックマークに追加
  • Pocket

Profile


Yoshihiko Yoshida
40代で2児の父。ブロガー兼ユーチューバー。ネット業界24年目。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑