WEBストーリーとは？WEBストーリーの作り方と確認方法

WEBサイトでは日々、新しいツールが開発されては浸透し、目にするようになってきます。インスタグラムなどSNSではもう定番となっているストーリーもその一つです。より効果的な自身のサイト作りのためにも新しい情報に追いつきサイト運営者はどんどん開発されていくツールをどのように取り入れていけばいいのでしょうか。
今回はこれから日本でも多くのサイトで取り入れられるようになるであろうWEBストーリーを解説します。

WEBストーリーとは？

ストーリーといえばインスタグラムなどSNSを思い浮かべる人が多いのではないでしょうか。インスタグラムでモバイルの画面の全面に現れた動画や画像がある一定の時間で自動的、もしくはタップをすると次の画面に変わっていくというものです。ストーリーは通常のインスタグラムに比べて手軽であると同時に動きのある投稿ができるということで人気があります。

WEBストーリーとは何か

WEBストーリーは以前、AMPストーリーと言われていました。昨年ぐらいからアメリカを含む数か国で試験的に運用されているものなので、日本のサイト上ではまだ徐々に増えつつあるといった感じですが、今後、日本でも目にする機会が増えると予想されるツールです。

どんなサイトに向いているのか

WEBストーリーもインスタグラムと基本的には変わらないツールとなっているので、通販サイトやカタログを投稿しているサイトなど画像や動画などをより強調したいサイトなどに向いています。

ユーザーは普通にサイトで画像を見るのとは違い、大きな画像が一定の時間で次の画像が表示されるので、短時間で基本的な情報が収集できます。またフルスクリーンでダイナミックな画像がユーザーの心を掴みやすくなります。

モバイルで確認するのに効果的

先ほども述べたように自動的に大きな画面が表示されるため、PCのように大画面で画像が見られないモバイルで検索するのに向いていると言えます。

またモバイルにストーリーで映し出された画像や動画はクリエイティブな知識が無くてもスタイリッシュな雰囲気で作ることができます。

WEBストーリーが検索結果に表示されるパターン

WEBストーリーが検索結果に表示されるパターンは次の5パターンがあるのでご紹介します。

単独の検索結果

Googleでキーワードを入れて検索した場合に検索結果として表示されます。
モバイルの場合は下の検索結果の図1の赤丸で囲んだ2か所の表示があればWEBストーリーのサイトです。

図1

PCで検索した場合は図2のように特にマークはありません。サイトの紹介として作成側が記載していなければサイトを開けるまでわかりません。

図2

グリットビュー

WEBストーリーも「VISUAL　STORIES」というカテゴリで検索結果が表示されます。2019年頃から目にするようになりましたが、アメリカで特定の旅行、映画といった特定のジャンルが対象となっているなど、まだ日本では一般的に浸透しているとは言い難い印象です。

画像検索

通常の画像検索でもストーリーは表示されます。上記でも紹介したマークが目印になっているので一般的な画像と見分けがつきやすくなっています。

DISCOVER

WEBストーリーはDiscoverでも表示されるようになっています。Discover自体があまり馴染みのない人も多いかもしれませんが、Googleのツールの一つで、検索ワードを入力しなくてもユーザーが興味を持っている情報を表示するものです。Googleの検索画面の下に表示されますが、現在はニュースの表示が主となっています。

カルーセル

カルーセルとは日本語で回転台や回転コンベアとなり、Googleで検索をするとYOUTUBEの検索結果が文字通り回転コンベアに乗っているように表示されるようになっています。この同じ方法でWEBストーリーも「VISUAL　STORIES」というカテゴリで表示されるようになっています。

WEBストーリーの作り方

WEBストーリーは複数のページがストーリーとしてまとまったものです。ここではWEBストーリーの作り方をご紹介します。

コードをダウンロードする

下記の図のサイトからAMPのコードをダウンロードします。なお最初は英語で表示されますが日本語に切り替えて使用することもできます。

コードを使用してリンクなどを設定する

ファイルを開くとコード表が入っているのでこのコードを使用して作成していきます。この中でSNSとのシェアなどリンクも設定ができるようになっています。またタイトルやイメージの指示もこの中に入れていきます。

テキストを作成する

ファイルの中に入っているhtmlにルールやページの詳細を入力していきます。

画像のチョイスに注意

テキストはある程度の知識があり一定のルールが把握できれば作成することができます。テキストの他に注意することは画像のチョイスです。

ストーリーは縦型の画像で表示されます。デジカメなど基本的にヨコ型に撮影することが多いですが、ストーリーの素材にする時にはスマートフォンで撮影した方が使用しやすい画像になります。

WEBストーリーが対応しているか確認する方法

せっかく作ったWEBストーリーがアップした後で上手く機能していなければとても残念です。そこでちゃんと表示できるかを確認するツールがあるのでその内のいくつかの方法を紹介します。

VALIDATE AMP

こちらのサイトの上部にURLを入力し検証をすると確認できます。WEBストーリーに対応していれば検証ステータスの部分に「パス」と表示されます。

GOOGLE構造化データ　テストツール

ストーリーの中にJSON-LDが入っている場合には構造化データ　テストツールでも確認するといいでしょう。こちらもValidate AMPと同じくURLを入れてテスト検証をすると確認ができます。

※構造化データとはSEO対策に有効なツールで検索エンジンに正しくWEBページを把握してもらうために用いられるものです。

※JSON-LDは3種類ある構造化データのうちの1つの形式です。

URL検査ツール

このツールでストーリーが有効であるかどうかと確認できると同時に、Google検索がストーリーをインデックスに登録しているかどうかを確認します。インデックスの登録の確認にはこの他にインデックスカバレッジレポートなどもあります。

ワードプレスでWEBストーリーを使う方法

コードが入手できたからと言ってもテキストから作成するのは中々大変な作業となります。これでは取り入れようとしても途中で挫折してしまいます。

そこでGoogleではWordPressにプラグインして使用できるツールを無料で提供しています。WordPressを利用しているユーザーであれば簡単にインストールをして使えます。

プラグイン(Web Stories)のインストール方法

WordPressの公式のサイトのプラグインのところから検索してツールを探します。まだベータ版なので完全な日本語では表示されませんが、「Web Stories」で検索すると出てきますので、ダウンロードをしてインストールします。

プラグインの設定方法

ダウンロードした後、WordPressで「プラグインのアップロード」でzipファイルを選択し、今すぐインストールをクリックすると完了します。

作業はドラッグ＆ドロップで直感的に使え、テンプレートも用意されています。またテキストで作成するのとは違い、都度、完成の状況を確認しながら作業をすることができます。

WEBストーリーを公開する方法

作成が終わったら公開するために詳細の設定となります。ここでは次の画面に映るための時間の設定（動画は動画の時間が優先）やリンクの設置、SEO対策をします。次に移るための時間は、短すぎると何が表示されたのかわからなくてユーザーを逃してしまいます。

まとめ

大手ブログサイトの運営会社でもWEBストーリーを様々な方法を取り入れていくなど日本でも少しづつ広がりを見せています。

モバイルが主流となり、画面のサイズ、表示速度の速さ、閲覧の場所を選ばないなどPCとは違う観点で運営していくことが求められるようになってきたWEBサイトの運営者としては、WEBストーリーが「当たり前」になり、溢れてしまう前に取り入れていくことを検討してみてはいかがでしょうか。