はじめてのWordPress入門講座【基礎知識・基本的な使い方・トラブル対応】

【解説】AMP Stories(アンプ ストーリーズ)とは何?どうやって投稿するの?

【解説】AMP Stories(アンプ ストーリーズ)とは何?どうやって投稿するの?

こんにちは。遠藤(@webmaster_note)です。SEOに取り組むWeb担当者なら「AMP(アンプ)」は知っていると思います。

では「AMP Stories(アンプ ストーリーズ)」は知っていますか?

AMP Storiesとは

Stories(ストーリーズ)と聞くと、InstagramやFacebook、YouTubeを思い浮かべる人もいるでしょう。

AMP Storiesは、Google版のStoriesとイメージするとわかりやすいと思います。AMPを使って、モバイル向けにストーリー形式のコンテンツを投稿することができます。

AMPとは

AMPは、Webページの表示速度を最優先にして、AMPが対応しているHTMLでWebページを作成することです。AMP対応をしているWebページは、Google検索結果で「⚡マーク」が表示されます。

AMPのイナズママーク

AMP Storiesでは、写真、動画、GIF、テキスト、音声を使って、ストーリー形式のコンテンツを作ることができます。それぞれのストーリーには、テキストリンクやCall to Actionを設置することもできます。

また、ストーリーはソーシャルメディア(SNS)でシェアすることも可能です。

AMP storiesは、どこに表示されるの?

AMP Storiesが表示されるのは、主に以下の3箇所です。

  • Google Discover
  • モバイル検索結果
  • AMP stories専用スペース

「Google Discover(グーグル ディスカバー)」は、Chromeなどで検索窓の下に表示される「おすすめの記事」です。

Google Discover

「モバイル検索結果」は、モバイルでのオーガニック検索結果です。

「AMP stories専用スペース」は、検索結果にYouTube専用の表示スペースがあるように、AMP Storiesの専用スペースが用意されるようです。

今後、変更があるかもしれませんが、AMP Storiesは上記のように、Google検索で、Webページと同じように表示されます。

AMP storiesの事例

AMP Storiesの投稿を目にしたことがない人もいるでしょう。Googleが公開しているAMP Storiesのページにはいくつかの事例が紹介されています。

日本でも、AmebaがAmebaブログの記事ランキングをStoriesで投稿をしています。

ちなみにAMPについて興味がある人は↑の「きらきら☆あんなたん (@piropiroanna) 」をフォローするのをオススメします。Google社の中の方です。

AMP Storiesの作成・投稿方法

AMP Storiesはどうやって作るのか?どうやって投稿するのか?を説明していきます。

AMP Storiesは、AMP対応のWebページの形式がストーリー形式になっていると考えるとわかりやすいと思います。

AMP Storiesも、WebサイトのAMP対応しているWebページと同じです。作成して公開する場所は、あなたのWebサイトです。

そのため、AMP Storiesで投稿したコンテンツは、Webサイトのドメイン配下のURLになります。(例:https://homepage-reborn.com/stories/〇〇)

WebサイトがAMP対応していなくてもOK

AMP Storiesは、WebサイトがAMP対応していなくても作成&公開をすることができます。

AMP対応はまだできていない場合でも、AMP Storiesの投稿ができるので、AMP対応をするよりも、取り組むハードルが低くなるでしょう。

WordPressでAMP Storiesを作る方法

AMP Storiesを作るサービスはいくつかあるようですが、今回はWordPressを使ってAMP Storiesを作る方法をご紹介します。

Googleが提供している「AMP」のWordPressプラグインを使うと、WordPressの「Gutenberg(グーテンベルグ)」で投稿を作成するのと同様に、AMP Storiesのコンテンツを作ることができます。

ステップ1:AMPプラグインをインストールする

まだ、AMPプラグインをインストールしていない場合は、プラグイン検索で「AMP」を探して、インストールをしましょう。

AMPのWordPressプラグイン

プラグインをインストールしたら、有効化しましょう。

ステップ2:AMPプラグインの設定で「Stories」を有効化する

AMPプラグインの設定画面(General)を開きましょう。

「Experiences」にある「Stories」にチェックを入れて「変更を保存」をクリックします。

AMPプラグインでStoriesを有効化する

これで、WordPressでAMP Storiesの作成ができるようになります。

ステップ3:AMP Stories(ストーリー)を作る

Storiesを有効化すると、WordPressのダッシュボードに「Stories」の項目が追加されます。

WordPressでamp storiesを作る.jpg

「New」をクリックすると、AMP Storiesの作成画面が表示されます。

WordPressのAMP Stories作成画面

Storiesの作成は、WordPressで投稿や固定ページを「Gutenberg(グーテンベルグ)」で作るのと同様に作成できます。

ここでは、基本的な項目を紹介します。紹介する以外にもいろいろな機能や設定があるので、あちこち触ってみてください。

テキストや画像など「ブロック」を追加する

あとはテキストや画像など「ブロック」を追加して、コンテンツを作成します。

画面左上の「+」をクリックすると、追加するものを選ぶことができます。

AMP Storiesを作る(ブロックを追加する)

追加できるブロックには、様々なものがあります。

AMP Storiesを作る(一般ブロック)
AMP Storiesを作る(フォーマット)
AMP Storiesを作る(レイアウト、埋め込み)

意外と、追加できる要素が多いので、コンテンツの幅が広がりますね。

ブロックのスタイルを変更する

追加したブロックをクリックして選択をすると、画面右側のメニューから、色の変更などをすることができます。

AMP Storiesを作る(スタイルの変更)

追加したテキストブロックをダブルクリックすると、入力することができます。画面上のメニューから、文字の色や背景色、リンクの設定をすることができます。

テキストの色やリンクの設置をする

バックグラウンドに画像や動画を追加する

カメラとミュージックアイコンからは、バックグラウンドに画像や動画などを追加することができます。

AMP Storiesのバックグラウンドに動画を追加する

追加した画像ブロックのレイヤー位置を変更することもできます。ここで、テキストの下に画像を表示するなどの変更ができます。

ブロックのレイヤー位置を変更する

追加したブロックを削除する

追加したブロックを削除するには、削除したいブロックを右クリックします。「Remove Block」をクリックすると削除できます。

追加したブロックを削除する

ストーリーのパーマリンクを編集する

ストーリーのURL(パーマリンク)を編集することもできます。「URLスラッグ」を変更すればパーマリンクを変更することができます。

AMP StoriesのURLを編集する

ストーリーを追加する

2つ目のストーリーを追加するときは、緑の「+」アイコンをクリックします。

AMP Storiesのストーリーを増やす

ストーリーにCall to Actionを追加する

2つ目のストーリーからCall to Action(ボタン形式のリンク)を追加することができます。

AMP StoriesにCall to Actionボタンを追加する

ステップ4:AMP Stories(ストーリー)を公開する

ストーリーの作成が終わったら、画面右上の「公開する」をクリックして公開をしましょう。

AMP Storiesを公開する

どんどんAMP Storiesを公開していこう!

いまやSEOは、WebサイトやWebページを作るだけではありません。それはSEOの一部であって、全てではありませんよね。

AMPだけでなく、AMP Storiesも、Google検索をしている人に、自分たちを知ってもらう良い機会になると思います。

WebサイトでWordPressを使っている方は、ぜひ、この機会に、AMP Storiesを投稿してみてください。