New Article

【10分でOK】AMP Storiesをワードプレスのプラグインで簡単作成

スポンサーリンク

インスタグラムやフェイスブックでは、もはや定番の「ストーリーズ」。
AMPページのストーリーズが2018年に発表されてから、作成方法の記事などを見てきましたが、テンプレートがあるとはいえ、ただただ面倒くさそう

そんなネガティブなイメージを持っていたAMPストーリーズですが、ワードプレスのプラグインで簡単にできました。

AMP Storiesとは

簡単に言えば、ビデオやアニメーションを使って、WEB上で表示する紙芝居的なスライドページです。

スライド式なので、順を追って観ていくのが、インスタグラムよりも、「ストーリー」って感じがしますね。

参考AMP Storiesページ ビヨンセと宇宙のページ。

Beyoncé: Running the world
Beyoncé continues to shatter barriers left and right. She is one of the most powerful women in the industry and she’s not slowing down anytime soon.
Space Photos of the Week
A close-up look at the universe’s many wonders, from nearby planets to faraway galaxies.

スマホ等の場合はフルスクリーンで表示され、AMPの機能を使ってるので表示速度も速く表示されるはず。

AMPについて詳しくはこちら
AMP対応は必要か?メリットなど実際に1年以上運用して感じたこと

ストーリーズという名前ですが、先に有名なインスタグラムとは違い、AMP Storiesは24時間で消えません。

おそらく、AMP Storiesは動画とブログの間のような、動画を観るのも、ブログや記事を読むのもしんどいなぁという時間のない現代人にピッタリなところのコンテンツを狙ってるのだろうなと思います。

インスタグラムは「今」を共有する用途で、そういう部分では似てるようでまったく別物ですね。

2018年の2月に発表されてから1年以上経ってますが、まだまだテスト段階な感じなので、仕様はこれから変わるかもしれませんし、最悪なくなる!?って事もあるかもしれません。

ワードプレスのプラグインで簡単導入

AMP公式のプラグインをインストールします。

AMP
Official AMP plugin, supported by the AMP team. Formerly Accelerated Mobile Pages, AMP enables great experiences across mobile, desktop, and stories.

それとAMP Storiesの機能を使うには最新のグーテンベルグのプラグインも必要です。

Gutenberg
ブロックエディターは WordPress バージョン5.0で本体に導入されました。このベータプラグインを使用すると、最先端の編集やカスタマイズの機能をテストできます。

上記をインストールして、AMP設定画面を開き、「Stories」にチェックを入れて保存で設定完了です。

ワードプレスプラグイン「AMP」のStories設定画面

AMP Stories作成方法

Storiesの設定をオンにするとサイドメニューに「Stories」が追加されます。

AMPプラグインのStories、新規作成画面
AMPプラグインのStories、新規作成画面

投稿の新規作成と同じようにタイトル入力して、タイトルを押すとURLの変更ができます。
ページ内に要素を追加するときは上部のアイコンから選んで追加する形です。
基本的にドラッグアンドドロップでテキストや画像の、位置や大きさ等、要素を変更できます。

AMPプラグインのStories、新規作成画面、背景画像編集
背景の編集

Background Color
背景の色の設定

Background Media
背景に設定する画像や動画の設定

Page Settings
次のページへ切り替わるのを手動か自動で切り替わるかの設定

  • Manual 手動
  • Automatic 全体の長さに合わして自動切換え
  • After a certain time 指定した時間の後、切り替え
  • After media has played 再生が終わったら切り替え
AMPプラグインのStories、新規作成画面、要素のスタイル編集
要素のスタイル編集

スタイル
角を丸角にするか。画像も同じように丸角にするか設定できます。

Text Settings
フォントや見出しタグの設定

Animation
表示した際のアニメーションの設定ができます。画像も同じように設定できます。

という感じで、視覚的に作成でき、普段からワードプレスのブロックエディタを触ってる方なら、すぐにわかるはずです。

Beta版は、日本語対応はされていませんが、クロームの翻訳で十分理解できる内容です。

AMP Storiesプラグイン気になったところ

デザイン性が薄い

現状、デザインに関してパワーポイントレベルのクオリティという感じです。
(パワーポイントもすごいのはすごいと思います!)

写真や動画をメインで見せるのであれば問題ないかなと思いますが、テキストボックスの余白を自由に調整できるとか、あるとまだマシかな思います。

正直、デザイン性はありませんが、2019年7月現在、まだBeta版なので、今後のアップデートや正式版ではデザイン性も良くなるかもしれません。

フォント・スタンプがない

フォントも変更できますが、おそらく見た限りでは日本語フォントがありません。

あと、スタンプなんかもあると、使い勝手がだいぶよくなるのではないかなと思います。

AMP Storiesの一覧ページはない

そもそも、AMP Storiesにそういう一覧ページとかという概念があるかわからないですが、一覧を表示するには自作で作るか、テーマの対応を待つしかないという感じですかね。

なので、作成したら「はい終わり」ではなく、インデックスされるようにページに張り付けたりサーチコンソールに登録したりする必要がありそうです。

プラグイン以外でAMP Storiesを作る

プラグイン以外にもブラウザ上で作成できるMakeStoriesというサービスもあります。

AMP Stories Builder, Tools & Editor - MakeStories
MakeStories is the best amp story builder to create amp stories with zero coding in just a few minutes with tools and editor like drag-drop and many more

こちらはデザイン性も良く、テンプレートもあるので便利なのですが、少し重たい印象。
操作中にサクサク動かず、モタついてイライラするのと、なんとなく雰囲気でわかりますが翻訳されてないのもあり、全体的に使いにくい印象でした。

AMP Storiesプラグイン導入まとめ

AMP対応ワードプレスのテーマ(ライオンブログ、Cocoon)を使い始めてから、ワードプレスのAMPプラグインなんて、デザインも固定されるし、使えないイメージがあり、ぜんぜん使ってませんでした。

たまたま、AMP対応していないテーマを触っているときに、プラグインでAMPを実装しようとしたら、設定に「AMP Stories」の文字。

実際に使ってみて、めちゃくちゃ簡単・シンプルで使いやすかったので紹介しました。

視覚的に操作できるから早い

プラグインなしでソースを直接、作成する方法も、冒頭で「面倒くさそう」と書きましたが、テンプレがあるので、さほど難しくはありません。

ですが、ビジュアル的要素の強いAMP Stories、視覚的に作成できるのは圧倒的に楽にです。

自己紹介のプレゼンに

まだまだ、いろいろ試す段階だとは思いますが、自己紹介等は圧倒的にAMP Storiesを使った方がわかりやすいと思います。

SEOの対策かもしれませんが、たまーにめちゃくちゃ長いプロフィールページのブログを見ると、結果見ないですもんね。。。

流行れば、ページ作成でビジネスの幅が広がると思うので、覚えといて損はなさそうですね。

コメント

タイトルとURLをコピーしました