ワードプレス

ウェブストーリーとは?概要と作り方をわかりやすく解説

ジャス㌧

この記事では、Googleが導入した新しいウェブサイトの表示形式である、ウェブストーリーについて解説しているとん

普段SNSでストーリーという機能を使ったことがありますか?

自分で使ったことがなくても、他の人がストーリーを使っているところを見たことがあるのではないでしょうか?

ここ最近、多くのSNSではストーリーという機能が普及し始めています。

ツイッターやフェイスブック、ライン、インスタグラム、ユーチューブでもそのストーリーを利用することが可能です。

この機能はウェブでビジネスを行う上で非常に役立つものですので、今後のウェブマーケティングでは無視できないでしょう。

そして、そのストーリー機能がウェブサイトでも使えることをご存知でしたか?

実はウェブサイトの最新技術として、ウェブストーリーという機能が最近注目を集めています。

ストーリー機能はSNSではもちろんのこと、ウェブサイトでも活用することが可能ですので、今回はそれについて解説していきます。

ウェブストーリーとは?

ジャス㌧

ウェブストーリーってなんだぷう?

ウェブストーリーとは、SNSで利用されているストーリーの仕組みをウェブサイトとして表示することができる機能になります。

スマホに特化した縦長の画面で、横にスライドさせることで次々とコンテンツを表示することが可能です。

画像のスライドショーやパワーポイントをめくっている感じでしょうか。

https://www.suzukikenichi.com/blog/web-stories/whats-web-story/

画面は縦長ですので、スマホ表示に特化した機能であることがわかります。

ちなみにこのウェブストーリーという機能は、旧名称がAMPストーリーでした。

AMPについて聞き覚えがあると思いますが、AMPはスマホ表示に特化した新しいHTMLのシステムになります。

よりサイトを高速表示させるための機能となっており、AMPと深く関係しているのがウェブストーリーです。

基本的にAMPの仕組みをベースに作ることになりますので、予備知識として覚えておきましょう。

ちなみにAMPについてはこちらの記事で解説していますので、参考にしてください。

流行りのストーリー機能がウェブでも使える

先ほど紹介したように、ストーリーという機能は現在主要なSNSで実装され、頻繁に利用されるようになった機能です。

今や以下のSNSでストーリー機能を使うことが可能です。

  • Twitter
  • Facebook
  • Instagram
  • LINE
  • YouTube

どのSNSでもこの機能は最近追加されたばかりで、急激に利用者が増えました。

SNSで使われているストーリーの特徴としては、

  • 24時間で投稿が消える
  • 誰が閲覧したのかわかる
  • スマホ特化表示

このような特徴があります。

ここ最近、スマホアプリでは縦画面で動画や画像を見るのが主流になっています。

TikTokや17ライブなど、ほとんどの動画アプリがスマホ特化の縦長表示になっており、それらをスワイプしていろんな動画を見るのが一般人の習慣になりつつあります。

スマホの普及が進んでいることと、そのような時代の流れに沿って、各SNSもこぞってストーリーを用意しているというわけです。

そして、それをウェブサイトでも使えるというのが今回の記事のテーマです。

ジャス㌧

あんまりピンとこない人はSNSのストーリー機能を実際触ってみるトン!

ウェブストーリーの特徴

では、ウェブストーリーではどのような特徴があるのかについてまとめていきたいと思います。

主な特徴は以下の4点です。

  • 専用のアプリが不要
  • AMPを基盤に作られる
  • 24時間で消えない
  • インデックスされる

専用のアプリが不要

まずSNSのストーリーは、スマホからしか閲覧することができず、なおかつアプリからでないと開くことが出来ません。

しかし、ウェブストーリーはブラウザから開きますので、アプリがなくても開くことができるという特徴があります。

AMPを基盤に作られる

そして先ほど紹介した通り、ウェブストーリーはAMPをベースに作られています。

なので、スマホに特化した高速表示が可能ということになります。

24時間で消えない

SNSのストーリーは24時間で消えますが、ウェブの場合はずっと表示され続けます。

その点も他とは違いますね。

インデックスされる

そしてページとしてアップしますので、Googleにインデックスされるというのも大きな特徴です。

ウェブならではの機能ですので、活用の幅が広がるでしょう。

相性の良いジャンル

続いて、ウェブストーリーを作成する際、どのようなジャンルを意識すれば良いのかについて解説します。

基本的には好きなようにジャンルを選んで行うことが可能ですが、相性が良いジャンルというのは存在します。

それが以下の3つになります。

  • 料理
  • ハウツー
  • スポーツ

基本的に手順を説明したり、何かのハイライトを紹介する際に便利になると思います。

画像のスライドのような形式ですので、順番に見ていくことによって理解できるコンテンツだとより見やすいでしょう。

その逆に、しっかりと文章で紹介しないと理解できないような解説記事ですと、ストーリーは向いていないと言えます。

ただ、今後もしかしたら、ストーリー形式のランディングページのようなものが出てくる可能性もありますね。

今まで縦長で解説していた内容を、細かく縦画像で紹介して最終的に別のリンクに誘導するという形式です。

こちらについては、まだウェブストーリーの歴史が浅いので、今後事例が出てくると思います。

メリット

続いて、ウェブストーリーを利用するメリットについて解説します。

メリットは以下の3点です。

  • グーグルディスカバーで目立つ
  • 真新しいので注目される
  • スマホ表示に特化できる

グーグルディスカバーで目立つ

まず、グーグルディスカバーという、スマホでGoogleを開いた時のトップページのような場所があるのですが、そこにストーリーが表示される可能性があります。

まだ日本では実装が普及していませんが、今後追加されるでしょう。

そうなった場合、画面のほとんどをストーリーが占めますので、かなりのインパクトがあります。

アクセスアップに貢献されますので、その点もメリットになるでしょう。

真新しいので注目される

シンプルに真新しい機能ですので、表示されるだけでも注目されるでしょう。

ユーザーの興味を引くことが可能になりますので、その点でもメリットになります。

スマホ表示に特化できる

今後のウェブ業界はよりスマホに特化した仕様になっていくので、スマホに特化した表示ができるという点はメリットになります。

特にAMPという仕組みに準拠した内容ですので、表示速度も早く、ユーザーにとってメリットが大きいです。

今後主流になっていくかもしれない機能ですので、覚えておきましょう。

ウェブストーリーで使用可能なもの

ジャス㌧

ウェブストーリーではどんなものを表示できるんだぷう?

では、このウェブストーリーでは、どのようなコンテンツを表示できるのか?について紹介していきたいと思います。

基本的には、以下の5点のような、SNSで表示できるコンテンツと同じになります。

  • 動画
  • 画像
  • テキスト
  • リンク
  • 外部サービス埋め込み

動画

まずは動画です。

感覚としては、YouTubeショートに近い感じですね。

動画については基本的には以下の仕様になります。

  • 1ページあたりの長さ15秒未満
  • 480×854ピクセル
  • フレームレート24fps以上
  • 縦長の動画

基本的には縦長で短い動画が推奨されています。

ストーリーは長い動画が好まれませんので、なるべく短い動画をアップするようにしましょう。

画像

画像については特に細かいルールはありませんが、このような形式になっています。

  • png, jpgなど使用可能
  • 最小828×1792ピクセル
  • 表示領域828×1472ピクセル

基本的には縦長ですが、横長の画像でも配置可能です。

テキスト

続いてはテキストです。

こちらも画像の上などに被せて表示することが可能です。

推奨の仕様としては以下の通りです。

  • 1ページ200文字以下
  • 文字サイズ24px以上
  • 可読性が高い

基本的にストーリーは短いコンテンツになりますので、文字数はなるべく少ない方が良いです。

あまりブログみたいに文章をぎっちり詰め込むとかなり見にくくなってしまうでしょう。

可読性を高めるために文字数をなるべく抑えるとともに、背景画像にマッチした文字の色を選択しましょう。

背景と馴染んで見にくい文字ですと、そもそもユーザーにとって不便になりますし、ページとしても低品質になります。

その点はしっかり守りましょう。

リンク

お次は外部リンクです。

自分のブログのリンクの他、アフィリエイトリンクなどの外部リンクも貼ることが可能です。

なので、数ページで教育を行い、最終ページでアフィリエイトリンクに誘導するなどのビジネスも可能でしょう。

今後のキャッシュポイントとして幅が広がります。

外部サービス埋め込み

最後に、外部サービスの埋め込みです。

これはYouTubeの動画やツイッターのツイートなどをウェブサイト同様に貼り付けることが可能です。

こちらもSNSのマーケティングと組み合わせることが可能ですので、今後の活用の仕方に注目でしょう。

ウェブストーリーのSEO対策

ジャス㌧

ウェブストーリーのSEO対策を知りたいぷう

ウェブストーリーはGoogleにインデックスされますので、ある程度のSEO対策が必要です。

ただ、現状ですとガッツリコンテンツを作っているウェブサイトには敵いませんので、まずは基本的な対策を行って、いずれ重要性が増した際に有利に動けるようにしておきましょう。

XMLサイトマップに追加する

ストーリーも一つのウェブページですので、インデックスをするためにサイトマップを登録しておきましょう。

ワードプレスでしたらプラグインを導入し、サーチコンソールで設定していきます。

ブログ立ち上げの基本ですので、こちらの記事を参考に設定してみましょう。

内部リンクを貼って誘導

続いては内部リンクでの誘導です。

これは通常のウェブページから、ストーリーに誘導するためのリンクを設置するという内容になります。

ストーリー単発ではアクセスを集めるのは難しいので、他ページからの誘導も意識しておきましょう。

SNSなどで宣伝する

3つ目として、SNSを活用して誘導を行いましょう。

こちらもストーリー単体では現状十分なアクセスは難しいので、SNSでリンクを宣伝するなどして、アクセスを誘導していきましょう。

プラグインを使ってウェブストーリーを作ってみよう

ジャス㌧

ウェブストーリーを作る方法を知りたいぷう

ではウェブストーリーを作るにはどうすれば良いのか?

基本的にはAMPを使ってソースの編集を行うやり方になります。

ただ、それは初心者では難しいと思いますので、ワードプレスのプラグインを利用するのが一番良いでしょう。

なので早速そのプラグインを紹介します。

Googleが公式に出しているので安心して使用できます。

プラグインをインストール

まずはプラグインをインストールします。

「プラグイン」→「新規追加」をクリックします。

続いて、Web Storiesと検索し、出てきたプラグインをいますぐインストールします。

続いて「有効化」をクリックします。

これでインストール完了です。

ウェブストーリーを作成

ではウェブストーリーを実際に作っていきましょう。

「Stories」をクリックするとプラグインのトップ画面に移動します。

Create new storyをクリックすると編集画面に移動します。

基本は英語になりますが、画像の動画の挿入を行い、その上にテキストを追加するというシンプルな構造になっていますので、まずは触ってみましょう。

非常に直感的にストーリーを作れるようになっていますので、ゆっくり実践してみてください。

細かい操作についてはとても解説しきれないのでここでは割愛しますが、5分くらいで基本操作は理解できると思います。

テンプレートやフリー画像も用意されていますので、まずはそちらを利用して進めてみることをお勧めします。

以上がウェブストーリーの解説でした。

まだ発展中の機能になりますが、最先端ですのでチャレンジしてみましょう。

ジャス㌧

今すぐ試して最先端にのっかるブゥー!