Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressサイトにGoogleウェブストーリーを追加する方法

Instagram、Facebook、Snapchatの魅力的なビジュアルストーリーは、注目を集め、訪問者をスクロールさせ続けます。Google ウェブストーリーズを使えば、WordPressサイトにこれと同じタイプの魅力的なコンテンツを追加することができます。

Google ウェブストーリーズは、視聴者とつながる魅力的な方法を提供します。一口サイズのコンテンツや製品の魅力、舞台裏をモバイル フレンドリーなフォーマットで共有できます。

この投稿では、あなたのWordPressサイトにGoogleウェブストーリーを追加する簡単な手順を説明します。

Adding Google Web Stories in WordPress

この投稿で取り上げるトピックは以下の通り:

Google ウェブストーリーとは?

Googleウェブストーリーズは、Instagram、Facebook、Snapchat、YouTubeなどのソーシャルメディアプラットフォームで使用されているストーリー形式に似た、人気のある短編コンテンツスタイルです。

必ずしも同じ呼び名ではないかもしれないが、すべて同じことをしている。

画像、音楽、動画などのリッチメディアコンテンツを備えた、タップ可能でインタラクティブなスライドです。これらすべての要素が、スライドを非常に魅力的なものにしている。

Google Web Stories

なぜGoogleウェブストーリーを使うのか?

Googleウェブストーリーズを使えば、インタラクティブなストーリー形式をあなたのサイトに持ち込むことができます。これにより、コントロールと柔軟性が向上し、サードパーティのプラットフォームのアルゴリズムに依存することなく、視聴者にストーリーを見せることができます。

Google Web Storiesを利用する理由は以下の通り:

  • Google ウェブストーリーズを使えば、ストーリー形式をあなたのサイトに持ち込むことができます。モバイル対応のインタラクティブなストーリーを作成し、自分のサイトで公開することができます。
  • 魅力的なユーザーはコンバージョンにつながりやすく、WordPressサイトに滞在する時間も長くなります。
  • AMPフォーマットを使用し、構造化データをサポートし、Google Adsenseを使用して収益化することもできる。
  • Googleウェブストーリーはインデックスされ、Googleの検索結果やDiscoverに表示される可能性があります。
Stories in Google Discover

それでは、WordPressサイトにGoogleウェブストーリーを簡単に追加する方法を見ていきましょう。

Google Web StoriesをWordPressに追加するには?

無料のウェブストーリー・プラグインを使用することで、WordPressにGoogleウェブストーリーを追加することができます。Googleが作成したこのプラグインを使えば、美しいウェブストーリーをデザイン・作成し、サイトに簡単に公開することができます。

まず、Web Storiesプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

ウェブストーリーズは、Googleによって開発・保守されている無料のプラグインである。ウェブストーリーのフォーマットを普及させ、インストール型の独立したサイトに導入することを目的としている。

プラグインを有効化した後、ストーリー ” ダッシュボードページにアクセスして、最初のストーリーを作成してください。

ストーリーの出発点としてテンプレートを選択するか、「新規ストーリー作成」ボタンをクリックしてゼロから始めることができます。

Create new story

テンプレートから始めることをお勧めします。

テンプレートを選択すると、プラグインはストーリービルダーのインターフェースを起動する。WordPressで人気のドラッグアンドドロップページビルダープラグインと同じように動作する。

story builder

左のカラムから任意の要素をポイント・アンド・クリックするだけで編集したり、新規要素を追加することができます。

音声、動画、画像、テキスト、見出し、ステッカー、絵文字などを追加できます。

Add elements to your web story

テンプレートを使用している場合は、下部にテンプレートによって生成された追加ページが表示されます。

ページ間をクリックで移動できます。また、必要に応じてページを削除したり、新しいページを追加することもできます。

Manage pages in your story

ページをクリックして背景色やメディアを設定することもできる。

ページの背景色を選択する際、行動喚起ボタンを追加するオプションも見つかります。

Background color and call to action button

URLを追加し、ダークかライトのテーマを選ぶだけ。

オプションで、行動喚起ボタンにアイコンを追加し、リンクをスポンサーリンク/nofollowにすることもできます。

同様に、WooCommerceをインストールしている場合は、商品を表示することもできます。

Adding products in web story

しかし、まずプラグインの設定でWooCommerceの統合をオンにする必要があります(投稿の後半でこの方法を紹介します)。

ストーリーに満足したら、左カラムの「ドキュメント」タブに切り替えて、公開する設定を行うことができます。

ここから、パブリッシャーのロゴ(あなたのサイトのロゴやサイトアイコンでも構いません)と、ストーリーのポスター画像をアップロードする必要があります。

Document settings

ポスター画像は3:4の比率で、640×853ピクセル以上が理想的です。

ストーリーのタイトルと説明をプロバイダーすることを忘れないでください。そうすることで、ストーリーをSEOに最適化し、発見しやすくなります。

その下に、ページの進み方を選択することができます。初期設定では、ページは7秒で変更されます。変更することもできますし、ユーザーが手動でタップしてページを変更することもできます。

Additional story settings

最後に、ストーリーのカテゴリーとタグを選択することができます。

このステップはオプションだが、ストーリーをカテゴリーに設定し、いくつかのタグを追加するとSEOに役立つ。

ストーリーエディターの右下に「M」と書かれたボタンがあります。これをクリックすると、サイトにインストールされているプラグインによってWordPressに追加されたメタ情報が表示されます。

Add custom meta data to your stories

例えば、All In One SEO for WordPressプラグインを使用している場合、SEO設定が表示されます。

ここから、ウェブストーリーのSEOタイトル、メタ説明、スキーマ設定を入力することができます。

Add SEO meta data to your web story

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

ストーリーにカスタムトラッキングピクセルを使用したい場合に便利です。

WPCode meta box

これでウェブストーリーを公開する準備が整いました。

画面右上の「公開する」ボタンをクリックするだけです。

Publish story

公開前のチェックリストが表示されます。問題がなければ、公開するボタンをクリックしてストーリーを公開します。

WordPressでウェブストーリーを表示する

このプラグインを使えば、新しいブログ投稿を公開するときに、その投稿にストーリーを追加することができる。

Add story to a post or page

ただし、既存の投稿、ページ、サイドバーにストーリーを追加することは可能です。

ストーリーを表示したい投稿やページを編集し、投稿エディターにウェブストーリー・ブロックを追加するだけです。

Web stories block

ブロック設定では、複数のストーリー、最新のストーリー、個別ストーリーを選択できる。

最新のストーリーまたは複数のストーリーのオプションを設定すると、サークル、カルーセル、リスト、グリッドでストーリーを表示する追加表示オプションも表示されます。

Stories block settings

投稿に満足したら、「更新」または「公開」ボタンをクリックして変更を保存します。

WordPressブログにアクセスして、あなたのウェブストーリーを見ることができます。

私たちのテストサイトのトップページで、複数ストーリーのカルーセル形式で表示されたのがこちら。

Web stories mobile preview

ウェブストーリーはWordPressのカスタム投稿タイプなので、WordPressの他のページや投稿と同じように表示することができます。

例えば、訪問者のためのランディングページとして使えるアーカイブページがあったり、WooCommerceの商品(これもカスタム投稿タイプを使って表示される)と同じように、個別にハイライトすることもできる。

Google ウェブストーリーにインテグレーションを追加する

Web Storiesプラグインには、使用できるいくつかのビルトインがあります。

これらの統合は、ストーリーズ ” 設定ページで確認できます。

Google アナリティクスをウェブストーリーに追加する

まず、GoogleアナリティクスのプロフィールIDをここに追加します。これにより、Googleアナリティクスレポートでストーリー表示をトラッキングできるようになります。

Add Google Analytics measurement ID

MonsterInsightsをご利用の場合、GoogleアナリティクスのトラッキングIDは、Insights ” 設定ページでご確認いただけます。

測定IDは、サイトプロフィールセクションに表示されます。

Find Google Analytics measurement ID in MonsterInsights

MonsterInsightsをご利用でない場合は、Google アナリティクスでトラッキングIDをご確認いただけます。

管理』タブで『データストリーム』をクリックするだけです。

Google Analytics admin screen

次に、あなたのサイトや他のプロフィールがデータストリームとして表示されます。

あなたのサイトのプロフィールをクリックして拡大してください。

Select website profile

次の画面では、あなたのサイトのプロフィールと測定IDが表示されます。

測定IDをコピー&ペーストして、ウェブストーリー・プラグインの設定に貼り付けるだけです。

Copy measurement ID

ウェブストーリーにカスタマイザーフォントを追加する

ウェブストーリーで特定のフォントを使用したい場合は、FTPを使用して手動でサイトにアップロードする必要があります。

サイトの/wp-content/フォルダにフォントファイルをアップロードするだけです。アップロードされると、アップロードされたフォントの場所は次のようになります:

http://example.com/wp-content/font-file-name.ttf

example.comを 自分のドメイン名に、font-file-name.ttfを実際のフォントファイル名に置き換えることをお忘れなく。

その後、このURLをコピー&ペーストして、ストーリーズ ” 設定の「カスタムフォント」セクションに入力してください。

Add custom fonts

ウェブストーリーに収益化統合機能を追加する

ウェブストーリーズはGoogle AdsenseとGoogle Ad Managerの収益化オプションをサポートしています。

収益化オプションを選択し、必要な情報を入力するだけです。例えば、広告ユニットのパブリッシャーIDと広告スロットIDが必要です。

Monetization options

ウェブストーリーのeコマース統合の有効化

WooCommerceまたはShopifyを使用してオンラインストアを運営している場合、Web Storiesのeコマースサポートを有効化することができます。

これにより、ウェブストーリーに商品を追加することができる。

ストーリーズ ” 設定ページでショッピングセクションまでスクロールダウンし、ドロップダウンメニューからeコマースプラットフォームを選択するだけです。

eCommerce integration for WooCommerce

WooCommerceの場合、プラグインは自動的に商品の表示を開始します。

Shopifyの場合は、ストアのアドレスをプロバイダーから提供し、APIアクセストークンを生成する必要があります。

Shopify integration

まだお持ちでない場合は、「取得方法を学ぶ」というリンクをクリックするだけで、Shopify APIトークンの生成方法が表示されます。

この投稿があなたのWordPressサイトにGoogle Web Storiesを追加するのにお役に立てば幸いです。WordPress に TikTok の動画を埋め込む方法や、WordPress のソーシャルメディアプラグインのエキスパートによるベストセレクションもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。