新着お知らせ EmbedSocial MCP: connect your data to any AI tool
Blog

あらゆるウェブサイト向けGoogle Web Storiesの作り方

WordPressやShopify、その他あらゆるウェブサイトプラットフォームでGoogle Web Storiesを作成・公開できる5つのストーリー作成ツールをご紹介します。

Nikola Bojkov
View as Markdown
Google Web Storiesを作成するためのツール
Nikola Bojkov

Nikola Bojkov

EmbedSocial Team

Googleは、毎月8億人が利用するGoogleモバイルアプリのDiscoverタブにおいて、Google Web Storiesフォーマットを広く配置することを発表しました

Discover内のStoriesカルーセルは、現在アメリカ、インド、ブラジルで提供されています。今後、GoogleはWeb Storiesをさらに多くの国やGoogle製品へと拡大していく予定です。

これはSEO担当者やマーケター、コンテンツクリエイターにとって大きなニュースです。

これは、没入感のあるストーリーフォーマットによってもたらされ、AMPテクノロジーを基盤とした、最新のコンテンツ消費ニーズに応える流れへの転換を示しています。

公式の動画による発表は以下の通りです。

この記事では、なぜ、そしてどのように自社のウェブサイト向けにWeb Storiesの作成を始めるべきか、そしてGoogle Storiesを作るためにどんなツールを使えるのかを解説します。

この記事の内容:

Google Web Storiesとは

Google Web Storiesは、ストーリーをオープンなWebにもたらすためにGoogleが作り出した、没入感のあるフルスクリーンフォーマットです。

ストーリーの操作はとても簡単です。Google検索でストーリーをタップするだけで、フルスクリーンで没入感のある体験に入ることができます。

ユーザーは、ストーリー内のリンクをクリックするか、左右にタップして次のページへ進んだり、Googleで検索していたトピックに一致する他のソースのストーリーへ移動したりするかを、自分で選ぶことができます。

Google Web Storiesのメリット

Google Storiesフォーマットは、Googleの検索プラットフォームを通じて、より高い注目度と露出を獲得しつつあります。

そしてGoogleは発見の起点であり、製品への意図を満たす場であるため、本格的なウェブサイトの多くがWeb Storiesを実際に採用するのは避けられない流れです。

最も優れている点は、Google Storiesがさまざまな検索結果やGoogleの掲載位置に表示されることです。

google stories placements

検索エンジンでの視認性を高める高速読み込みフォーマットであることに加え、このウェブストーリーのタップで進むフォーマットは、ユーザーにエンゲージメントのためのよりインタラクティブな空間を提供します。さらに、バイラルな拡散と収益化を実現する分析機能やブックエンド機能も備えています。

確かに、ウェブストーリーはInstagramのストーリーを思い起こさせるかもしれませんが、他のプラットフォームのストーリーとは大きく異なります。その主な理由は次の通りです。

1.Google Web Storiesは自分のものになる

コードを自分でコントロールし、自社のウェブサイト上でホスティングできます。

これは、コンテンツがそれらのプラットフォームの機能に大きく依存してしまうInstagram、Snapchat、TikTok上でホストされるストーリーとは大きく異なります。

2.Google Storiesはより高いリーチを獲得する

前述の通り、GoogleはStoriesの掲載先を広げており、他のプラットフォームでは主流となっているフォロワーの枠を超えて、世界中のあらゆる人にリーチできるようになります。

さらに、Web Storiesはウェブサイトの拡張機能にすぎないため、パブリッシャーはあらゆる目的でそれらを再利用したり、ニュースレターで共有したり、ソーシャルメディアのリンクとして使ったり、ホームページやその他のlanding pageに表示したりできます。

3.フルカスタマイズ可能

Google StoriesはWeb Stories AMPのドキュメントを使って自分で構築するため、すべてのピクセルを自由にコントロールでき、ブランドガイドラインに完全に合わせられるという明らかな柔軟性があります。

WordPressでGoogle Storiesを作成する

google web stories wordpress

WordPressでGoogle Web Storiesを作成するには、Googleが開発した公式のWeb Storyエディタのような、シンプルなドラッグ&ドロップツールを利用できます。

このWordPressプラグインは、強力なWYSIWYG作成ツールのおかげで、最も使いやすいGoogle Storiesを作成するためのさまざまなオプションを提供します。

また、WordPressのメディアライブラリにもアクセスできるため、ストーリーを作成する際に、プラグインのダッシュボードから直接メディア素材を取り込むことができます。

まずは、WordPressディレクトリからWebStoryエディタを手動でダウンロードするか、WordPress管理ダッシュボードから直接インストールできます。

2つ目の方法を選ぶ場合の手順は次の通りです。

  1. WordPressのウェブサイトにログインします
  2. メニューから「プラグイン」を選択し、「新規追加」をクリックします
  3. 検索バーに「Web Stories」と入力すると、Web Storiesプラグインが表示されます
  4. インストールして有効化します
  5. WordPressダッシュボードに戻り、「Stories」オプションを選択します
  6. Web Storiesダッシュボードを開きます
  7. 「Create New Story」ボタンをクリックするか、「Explore Templates」を選びます
  8. お好みのGoogle Web Storyを作成・カスタマイズします

より詳しい手順については、こちらのWordPress向けGoogle Storiesセットアップガイドをご覧ください。

なお、このWordPressプラグインの最終バージョンには、アニメーションとページアタッチメントのサポートが含まれています。

ShopifyでGoogle Storiesを作成する

重要な注意:

このShopify用アプリは現在非推奨となっています。

product stories app for shopify

Shopifyプラットフォームは、オンラインショップを強化し、付加価値を加えるアプリに対応しています。

Shopifyの商品ページをWeb Storiesに変換するなら、最も簡単な方法はアプリをインストールすることです。

そこで登場するのがProductStoriesです。

Product Storiesは、商品ページをAMPページとWeb Storiesの両方に変換・作成し、美しいAMP Storyウィジェットへと生まれ変わらせる、唯一無二のShopifyアプリです。

仕組みは非常にシンプルで、あらゆるモバイルデバイスに完璧にフィットします。

文字通り、2回クリックするだけで済みます。

ShopifyでGoogle Web Storiesを作成する手順は次の通りです。

  1. ProductStoriesをインストールします
  2. 有効化して、商品ページをAMPとWeb Storyフォーマットに変換します
  3. Web Storyテンプレートを選びます

これだけです。

このアプリはすべての商品ページを変換し、専用のampストーリーページとウェブストーリーリンクを作成します。これらはGoogleにインデックスされると、Google検索結果に表示されます。

あらゆるウェブサイト向けにGoogle Storiesを作成する

story creator tool

さまざまなウェブページ向けにGoogle Storiesを作るもう1つの方法は、ドラッグ&ドロップエディタを備えたもう1つの強力なWeb StoriesビルダーであるMakeStoriesを使うことです。

このStoriesエディタには、数多くのカスタマイズオプションがあります。ストーリーのあらゆる要素にアニメーションを加えて、体験をより豊かにできます。また、Story Adsを作成する機会も提供しています(Google Ad ManagerおよびGoogle DV360(パブリックベータ)に対応)。

MakeStoriesを使い始めるには、次の手順に従ってください。

  1. MakeStoriesにサインアップしてアカウントを作成します
  2. Create Storyをクリックし、各オプションを使ってストーリーのスライドを作成します
  3. 完成したら、ストーリーのViewまたはPublishをクリックします

セットアッププロセスの詳細については、Web StoriesをWordPressサイトに公開する方法に関する公式のステップバイステップガイドをご覧ください。

なお、MakeStoriesは次の公開オプションに対応しています。Zipへのエクスポート、FTP経由での公開、onl.stショートリンクへの公開、ウィジェットの埋め込み、WordPressプラグイン、HTML iFrameの埋め込みです。

まとめ

この新しい高速読み込みのGoogle Storyフォーマットを無視することはできません。少なくとも、このビジュアルなストーリーテリングフォーマットを試してみるのが得策です(あなたの競合もきっと取り組んでいると考える理由があります)。

ですから、急いで最初のウェブストーリーを作成し、トラフィックと顧客エンゲージメントの向上を実感し、収益化能力をあっという間に高めましょう。

Nick Poggi, TrovaTrip Ryan Hazlewood Zanna Ollove, Boston College Brooks Hitzfield, Seven Sons
400,000社以上のブランドに選ばれています

ソーシャルプルーフを成果につなげる

レビュー、SNS、UGCを集約。EmbedSocialのウィジェットであらゆるウェブサイトに表示できます。

無料トライアルを開始

いつでもキャンセル可能。全機能をご利用いただけます。

関連記事

View all posts
ECサイトにInstagram投稿・リールを埋め込む方法と効果

ECサイトにInstagram投稿・リールを埋め込む方法と効果

ECサイトにInstagram投稿・リールを埋め込むと購買率が向上します。HTMLコード・API・ツールの3つの方法と、EmbedSocialで実現するEC特化の活用術を解説。Shopify・WordPress・BASE・カラーミーショップへの対応手順や、商品ページへのUGC配置でCVRを高める実践ノウハウも網羅。

ソーシャルリスニング実践:Threads × キーワード収集 × 人気ドラマ編|データの読み方から活用まで

ソーシャルリスニング実践:Threads × キーワード収集 × 人気ドラマ編|データの読み方から活用まで

Threadsキーワード収集で集めた人気ドラマ関連の投稿550件を事例に、ソーシャルリスニングのデータ確認・分析・UGC活用まで実践的な手順を解説します。EmbedSocialを使った一気通貫ワークフローも紹介。

MEO運用をn8nで自動化する方法|EmbedSocial × n8n 実践ガイド【2026年版】

MEO運用をn8nで自動化する方法|EmbedSocial × n8n 実践ガイド【2026年版】

MEO運用の「自動化できること・できないこと」を整理し、EmbedSocial × n8n × ClaudeによるMEO自動化の3レイヤー構造を紹介。実践例としてEmbedSocial × n8nのワークフローを解説。他社MEOツールとのAPI連携比較も掲載。

UGC二次利用許諾の取り方3選|キャンペーン・Instagram・TikTok別に解説【2026年版】

UGC二次利用許諾の取り方3選|キャンペーン・Instagram・TikTok別に解説【2026年版】

UGCを安全に二次利用するには、事前同意・事後申請の2つのアプローチがあります。ハッシュタグキャンペーンでの事前同意方式と、EmbedSocialを使ったInstagram・TikTokの許諾リクエスト自動化をステップで解説します。

多店舗のMEOをAIエージェントに任せる─ EmbedSocial for MEO 完全ガイド

多店舗のMEOをAIエージェントに任せる─ EmbedSocial for MEO 完全ガイド

EmbedSocial for MEOは、AIと自動化で多店舗・複数拠点のMEO運用を効率化するプラットフォームです。本記事では2026年の市場変化や全機能、導入事例、既存ツールとの違いを網羅。店舗数増加による運用負荷に悩むチェーン本部や代理店にとって、最適なツール選定と意思決定を支援する決定版ガイドです。

【検証】Claudeに「Instagramセクションを作って」と頼んで見えた、LLMの限界とUGCツールの必要性

【検証】Claudeに「Instagramセクションを作って」と頼んで見えた、LLMの限界とUGCツールの必要性

ChatGPTやClaude等でUGCセクションは作れるのか?マーケターが実際に検証。AI単体では架空のUGCが生成され景表法違反のリスクがあり、API連携や許諾管理などの運用基盤も構築できません。LLMで戦略・コピーを作りUGCツール(EmbedSocial)で運用する、正しい相互補完の最適解を解説します。