Instagram、Facebook、Snapchatで、注意を引き付け、訪問者をスクロールさせ続ける魅力的なビジュアルストーリーに気づいたことがあるでしょう。Google Web Storiesを使用すると、この同じタイプの魅力的なコンテンツをWordPressウェブサイトに追加できます。
Google Web Storiesは、オーディエンスとつながるための魅力的な方法を提供します。モバイルフレンドリーな形式で、短いコンテンツ、製品のハイライト、舞台裏の様子などを共有できます。
この記事では、Google Web StoriesをWordPressサイトに追加する簡単な手順を説明します。これにより、訪問者の注意を引き付け、エンゲージさせることができます。

この記事では、以下のトピックを扱います。
- Google Webストーリーとは何ですか?
- Google Web Storiesを使用する理由
- WordPressにGoogle Web Storiesを追加する方法は?
- WordPressでWeb Storyを表示する
- Google Web Storiesにインテグレーションを追加する
Google Webストーリーとは何ですか?
Google Web Storiesは、Instagram、Facebook、Snapchat、YouTubeなどのソーシャルメディアプラットフォームで使用されているストーリー形式に似た、人気のショートフォームコンテンツスタイルです。
それらは常に同じ名前で呼ばれるとは限りませんが、すべて同じことをします。
画像、音楽、動画などのリッチメディアコンテンツを備えた、タップ可能でインタラクティブなスライドです。これらの要素すべてが、高いエンゲージメントを生み出します。

Google Web Storiesを使用する理由
Google Web Storiesを使用すると、インタラクティブなストーリー形式を独自のウェブサイトに導入できます。これにより、より多くの制御と柔軟性が得られ、オーディエンスに表示するためにサードパーティプラットフォームのアルゴリズムに依存する必要がなくなります。
以下に、Google Web Storiesを使用するその他の理由をいくつか挙げます。
- Google Web Storiesを使用すると、ストーリー形式をウェブサイトに導入できます。独自のサイトで、インタラクティブでモバイル対応のストーリーを作成および公開できます。
- これは非常に魅力的であり、エンゲージしたユーザーはあなたのWordPressウェブサイトでコンバージョンし、より多くの時間を費やす可能性が高くなります。これは、あなたのビジネスとブランドにとって、より多くの売上、コンバージョン、成長を意味します。
- これらはAMP形式を使用し、構造化データをサポートし、Google AdSenseを使用して収益化することもできます。
- Google Webストーリーはインデックス化され、Google検索結果やDiscoverに表示される可能性があります。

それでは、WordPressサイトにGoogle Web Storiesを簡単に追加する方法を見てみましょう。
WordPressにGoogle Web Storiesを追加する方法は?
無料のWeb Storiesプラグインを使用して、WordPressにGoogle Web Storiesを追加できます。Googleが作成したこのプラグインを使用すると、美しいWebストーリーをデザイン・作成し、サイトに簡単に公開できます。
まず、Web Storiesプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
Web StoriesはGoogleによって開発および保守されている無料のプラグインです。Web Stories形式を普及させ、自己ホスト型の独立したウェブサイトにもたらすことを目的としています。
プラグインのアクティベーション後、Stories » Dashboardページに移動して最初のストーリーを作成します。
ストーリーの開始点としてテンプレートの1つを選択するか、「新しいストーリーを作成」ボタンをクリックして最初から始めることができます。

テンプレートから始めることをお勧めします。これにより、良いスタートを切ることができ、初心者にとってずっと簡単になります。
テンプレートを選択すると、プラグインがストーリービルダーインターフェースを起動します。これは、WordPressで人気のドラッグ&ドロップページビルダープラグインと同様に機能します。

要素をクリックするだけで編集したり、左側の列から新しい要素を追加したりできます。
音声、動画、画像、テキスト、見出し、ステッカー、絵文字などを追加できます。

テンプレートを使用している場合、テンプレートによって生成された追加ページが下部に表示されます。
クリックすることでページ間を移動できます。必要に応じてページを削除したり、新しいページを追加したりすることもできます。

ページをクリックして背景色やメディアを設定することもできます。
ページの背景色を選択する際、コールトゥアクションボタンを追加するオプションも見つかります。

URLを追加するだけで、ダークまたはライトテーマを選択できます。
オプションで、コールトゥアクションボタンにアイコンを追加したり、リンクをスポンサー付き/ノーフォローにしたりすることもできます。
同様に、WooCommerceがインストールされている場合は、製品を表示することもできます。

ただし、まずプラグイン設定でWooCommerce連携を有効にする必要があります(記事の後半でその方法を説明します)。
ストーリーに満足したら、左側の列にある「ドキュメント」タブに切り替えて、公開設定を構成できます。
ここから、発行元ロゴ(ウェブサイトのロゴまたはサイトアイコンで問題ありません)とストーリーのポスター画像をアップロードする必要があります。

理想的には、ポスター画像は3:4の比率で、最小640 x 853ピクセルであるべきです。
ストーリーのタイトルと説明を提供することを忘れないでください。これにより、ストーリーのSEOが最適化され、発見性が向上します。
その下で、ページの進め方をどのようにしたいかを選択できます。デフォルトでは、ページは7秒で変更されます。これを変更するか、ユーザーが手動でタップしてページを変更できるようにすることができます。

最後に、ストーリーのカテゴリとタグを選択できます。
このステップは任意ですが、ストーリーをカテゴリに割り当てたり、タグを追加したりすると、SEOに役立ちます。
ストーリーエディターの右下隅にある「M」というラベルのボタンに気づくでしょう。それをクリックすると、ウェブサイトにインストールされているプラグインによって WordPress に追加されたメタボックスが表示されます。

例えば、All in One SEO for WordPressプラグインを使用している場合、SEO設定が表示されます。
ここから、ウェブストーリーのSEOタイトル、メタディスクリプション、スキーマ設定を入力できます。

同様に、WPCodeプラグインがインストールされている場合、このストーリーが表示されたときに実行したいカスタムコードスニペットを追加できます。
これは、ストーリーにカスタムトラッキングピクセルを使用したい場合に便利です。

これで、ウェブストーリーを公開する準備が整いました。
画面右上にある「公開」ボタンをクリックするだけです。

公開前のチェックリストが表示されます。すべて問題がなければ、公開ボタンをクリックしてストーリーを公開します。
WordPressでWeb Storyを表示する
このプラグインを使用すると、公開時にストーリーを新しいブログ投稿に追加できます。

ただし、既存の投稿、ページ、または サイドバー にストーリーを追加することもできます。
ストーリーを表示したい投稿またはページを編集し、投稿エディターにWeb Storiesブロックを追加するだけです。

ブロック設定の下で、複数のストーリー、最新のストーリー、または単一のストーリーを選択できます。
最新のストーリーまたは複数のストーリーオプションを選択した場合、ストーリーを円形、カルーセル、リスト、またはグリッドで表示するための追加の表示オプションも表示されます。

投稿に満足したら、「更新」または「公開」ボタンをクリックして変更を保存します。
これで、WordPressブログにアクセスして、Web Storiesが実際に動作していることを確認できます。
こちらは、テストサイトのホームページで、複数のストーリーカルーセル形式で表示されたものです。

Web StoriesはWordPress内の独自のカスタム投稿タイプであるため、WordPressの他のページや投稿と同じように表示できます。
たとえば、ランディングページとして使用できるアーカイブページがある場合や、WooCommerce製品のように個別に強調表示する場合(これもカスタム投稿タイプを使用して表示されます)などです。
Google Web Storiesにインテグレーションを追加する
Web Storiesプラグインには、使用できるいくつかの組み込み連携機能があります。
これらのインテグレーションは、Stories » Settings ページで見つけることができます。
GoogleアナリティクスをWebストーリーに追加する
まず、ここにGoogleアナリティクスのプロファイルIDを追加できます。これにより、Googleアナリティクスレポートでストーリーの表示回数を追跡できるようになります。

MonsterInsights を使用している場合、Google Analytics のトラッキング ID は Insights » Settings ページで見つけることができます。
測定IDは、ウェブサイトプロフィールセクションに表示されます。

MonsterInsightsを使用していない場合は、Google AnalyticsでトラッキングIDを見つけることができます。
「管理」タブに移動して「データストリーム」をクリックするだけです。

次に、ウェブサイトやその他のプロフィールがデータストリームとして表示されます。
プロフィールをクリックして展開してください。

次の画面で、測定IDが表示されたウェブサイトのプロファイルが表示されます。
Measurement IDをコピーして、Web Storiesプラグインの設定に貼り付けるだけです。

Web Storiesにカスタムフォントを追加する
Webストーリーで特定のフォントを使用したい場合は、FTPを使用して手動でウェブサイトにアップロードする必要があります。
フォントファイルをウェブサイトの/wp-content/フォルダにアップロードするだけです。アップロード後、アップロードしたフォントの場所は次のようになります。
http://example.com/wp-content/font-file-name.ttf
example.comをご自身のドメイン名に、font-file-name.ttfを実際のフォントファイル名に置き換えることを忘れないでください。
その後、このURLを「カスタムフォント」セクションのStories » Settingsにコピー&ペーストします。

Web Storiesでの収益化統合の追加
Web Storiesは、収益化オプションのためにGoogle AdSenseとGoogle Ad Managerをサポートしています。
収益化オプションを選択し、必要な情報を入力するだけです。たとえば、広告ユニットにはPublisher IDとAd Slot IDが必要です。

Web Storiesのeコマース連携を有効にする
オンラインストアを運営するためにWooCommerceまたはShopifyを使用している場合は、Web Storiesのeコマースサポートを有効にできます。
これにより、ウェブストーリーに商品を追加できるようになります。
ストーリー » 設定」ページの「ショッピング」セクションまでスクロールダウンし、ドロップダウンメニューからeコマースプラットフォームを選択するだけです。

WooCommerceの場合、プラグインは自動的に製品を表示し始めます。
Shopifyの場合は、ストアのアドレスを提供し、APIアクセストークンを生成する必要があります。

まだお持ちでない場合は、「取得方法を学ぶ」というリンクをクリックするだけで、Shopify APIトークンを生成する方法の説明が表示されます。
この記事がWordPressサイトにGoogle Web Storiesを追加するのに役立ったことを願っています。WordPressにTikTok動画を埋め込む方法や、最高のWordPressソーシャルメディアプラグインに関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

デニス・ムトミ
Been wanting to add these to my WordPress site, and you’ve made it super easy to follow.
The Analytics integration details are super helpful! Really like how you broke down the custom font options too. These are exactly the tweaks I wanted to try out
THANK YOU WPBeginer team for this