オウンドメディアAXの進め方を解説
AIと人間が協働するオウンドメディア運営の実践ガイド Owned Media AX Guide
資料を無料ダウンロード
Webストーリーとは？概要や制作を徹底解説
制作／開発 2026.06.23
Googleが推進する、SNSアプリなどでお馴染みのストーリーがWebブラウザで表現できる「Webストーリー」。
アメリカを筆頭に日本国内でも少しずつ各企業が注目し、Webストーリーの導入をはじめています。
この記事ではWebストーリーの概要や事例、作り方について解説します。
本記事では、Webストーリーの概要や国内事例、制作方法を解説するとともに、初公開から数年が経過した現在の最新動向についても加筆しています。
目次
Webストーリーとは
Webストーリーは、パラパラと雑誌をめくる感覚でユーザーを惹き込める、没入型のビジュアルコンテンツです。
Webストーリーは、Googleが推進するモバイルページ高速表示の技術「AMP」の一環として開発されました。旧名称は「AMP Stories」であり、Instagramなどのスマートフォンアプリで実装されているストーリー機能と同様の表現を、Webブラウザ上でも実現できる点が特徴です。Webにとってはここ数年で登場した新しい表現方法であり、簡単に実装できるという利点もあって関心が寄せられている技術の一つです。
ただし、Webストーリーの土台となっているAMPは、2021年6月にGoogle検索結果における優遇措置（雷マークの表示や速報ニュースカルーセルへの優先掲載など）が終了している点に注意が必要です。
この影響により、通常のAMPページの運用を取りやめる媒体が増えていますが、Web Stories（Webストーリー）という表現形式そのものは、Google検索セントラルの公式ドキュメントで2025年12月時点でも更新が続けられており、現在もGoogleがサポートする機能として位置付けられています。
Webストーリーの導入を検討する際は、「AMP全体に対する優遇」と「Webストーリー専用の表示機能」は別物であると理解しておくことが重要です。
実例の制作を解説した記事はこちら：【制作事例】Webストーリーの作り方を解説！ワイヤーも公開
実例の制作を解説した記事はこちら
【制作事例】Webストーリーの作り方を解説！ワイヤーも公開
日本でのWebストーリー事例
Webストーリーの国内事例をいくつか紹介します。
なお、以下で紹介する事例は2021年時点の情報です。AMPの優遇終了後、各メディアでURLやデザインが変更・終了している可能性があるため、実際にご覧になる際は最新の状態をあわせてご確認ください。
山口茜 | FUKUI x TOKYO 2020 | 福井新聞ONLINE
山口茜 | FUKUI x TOKYO 2020 | 福井新聞ONLINEのWebストーリーを見る
文章をシンプルに配置することで、写真の躍動感がより引き立っている事例です。
一つの画面の中でも写真を切り替えることで、1ページで2枚の写真を見せる工夫もされています。
タイ観光 | 絶対行きたい！タイのおすすめ観光スポット・楽しみ方
タイ観光 | 絶対行きたい！タイのおすすめ観光スポット・楽しみ方のWebストーリーを見る
旅行系コンテンツは、写真を1枚置くだけで見栄えのする画面を作れる好例です。
特に映えるビジュアルは、PCブラウザで見る際にはぜひ全画面表示で楽しみたいポイントです。
世界長者番付2020
アニメーションを多用し、主に動画で表現している事例です。
動画を背景に設定し、手前のレイヤーにテキストなどの要素を配置する作りはWebサイトでもよく見かけますが、より動きを出したい場合の参考になります。
上記で紹介した例はほとんど画像でしたが、例えばWeb Storiesガイドページに掲載されているCNNのサンプルのように、実際に撮影した動画を使う表現もまた魅力的です。Webストーリーを実装するのであれば、積極的に挑戦してみたい手法です。
Webストーリーの作り方
制作工数が少ない点がメリットだと言われているWebストーリーですが、最初は学習コストとして工数が上がる場合もあります。コツを掴んで気軽に作れるようになりたいところです。
Webストーリーの制作は、大きく次の4つのステップで進みます。
ワイヤー～デザイン設計
コンセプトやワイヤーが固まった後に、デザインカンプをPSDなどで用意します。
後述しますが、Googleからチュートリアルが提供されているため、画像サイズや見え方の参考にするとよいでしょう。例えばスマホ版の場合、背景画像のサイズは720×1280です。
加えて、この時点で要素の動き方も一緒に考えておくと、よりユーザーを引き込みやすくなります。ズームするのか、横からスライドするのか、ふわっと浮かび上がるのか、動き方はある程度自由に設計できます。上記の国内事例をはじめ、Web Storiesガイドページにはたくさんの事例が紹介されています。他を参考にしながら、魅力的なWebストーリーを設計しましょう。
AMP HTMLでコーディング実装
デザインや動きの設計が固まったら、次はコーディングです。
【制作事例】Webストーリーの作り方を解説！ワイヤーも公開でも挙げているのですが、WebストーリーはAMP技術の一環なので、AMP HTMLという改良されたHTMLでコーディングを行います。そのため通常のHTMLは使用できず、JavaScriptも使えません。
チュートリアルが提供されているので、ガイドを確認しながら制作を進めるのがよいでしょう。さらに、AMP HTMLとして使用できるコンポーネントは「The AMP Component Catalogue」で紹介されているため、制作前に一度目を通してから始めましょう。
なお、Web Storiesを正しく公開するには「有効なAMP」であることが必須条件です。
Google検索セントラルの最新ドキュメントでも、有効なAMPストーリーであるかどうかをGoogleのテストツールやURL検査ツールで確認する手順が案内されています。実装時はこれらのツールで検証する工程を必ず組み込んでおくと安心です。
さらにチュートリアル以外にも、AMP HTMLとして使用できるコンポーネントが以下ガイドページで紹介されているので、一度目を通してから制作を始めましょう。
スワイプアップに関する注意点
Webストーリーでは、既存ページを下からスワイプアップさせる、ネイティブアプリのような見せ方は実装できません。こちらも【制作事例】Webストーリーの作り方を解説！ワイヤーも公開で挙げています。
AMP HTMLしかページ内に取り込めないため、このような表現をする場合は、スワイプアップ後のページもAMP HTMLとして新たに記述していく必要があります。amp-story-page-attachmentというタグを用いれば実装できます。毎ページごとに同じテンプレートを使えるようであれば、工数もあまりかからず、多くの情報量をユーザーに届けられそうです。
スワイプアップ実装事例
【2020年】夏でしたい６つのこと | 観光情報満載 – [一休.com]
簡単に作れる便利ツール
コーディングをすることなく、Webストーリーを制作/公開できる非エンジニア向けの便利なツールも提供されていますので、いくつか紹介します。
|
ツール名 |
特徴 |
公開のしやすさ |
|
コーディング不要でデザインから動きまでツール上で設計可能 |
「PUBLISH」ボタンでSEOなどの設定を行えば、そのまま公開まで完了する |
|
|
WordPress管理画面の左メニューにWebストーリー生成機能が追加される |
既存のWordPressサイトを使って、Webストーリーの量産が進めやすい |
両ツールとも2026年6月時点で提供が継続されています。特にWeb Stories for WordPressは、WordPress公式プラグインディレクトリで更新が確認できます。導入の際は、最新のバージョンや対応状況を一度確認しておくと安心です。
ツール上で公開まで可能なMakeStories
MakeStoriesならば、0からコーディングを行う必要はなく、ツール上でデザインや動きまでが設計可能、その後「PUBLISH」ボタンでSEOなどの設定を行えば公開まで行うことが出来ます。
WordPressから生成可能なプラグイン
Web Stories for WordPressはGoogleが提供する、Webストーリーが生成可能なWordPress用のプラグインです。
プラグインをダウンロードし、WordPressにて有効化するとログイン後の左側のメニュー一覧にWebストーリー生成用の機能が新たに追加されます。
画面は上記のMakeStoriesのようにデザイン設計用の操作画面で、WordPressの管理画面とは思えないくらいクリエイティブな印象です。
WordPressを導入しているWebサイトであれば一気にWebストーリーの量産が捗りそうですね。
公開後の流入や分析ツール
Webストーリー公開後の表示形式やアクセス解析について説明します。
Googleからの見え方
Googleからの見え方は、主に次の3つの観点で押さえておくと理解しやすくなります。
- 検索結果でのposter表示
- Google Discoverでの表示
- Googleサーバーへのキャッシュ
検索結果
検索結果に表示される要素としては、通常のタイトルとディスクリプションに加えて、posterと呼ばれる画像サムネイルとWebストーリーのマークが一緒に表示されます。サムネイルも一緒に結果に表示される分、表示面積も大きくなり、ユーザーの興味を引き立てやすくなる点も、競合ページに対する優位性といえそうです。
一方で、2021年6月以降は、AMPページ全般に表示されていた「雷マーク」などのAMP優遇は終了しています。
そのため、通常のAMPページが検索結果で特別に目立つことはなくなりましたが、Webストーリー特有のposter画像表示などのフォーマットは、現在もGoogleの公式ガイドラインで案内されている仕様です。Webストーリーを運用する際は、「AMP全体に対する優遇」と「ストーリー特有の表示仕様」を混同しないように注意しましょう。
SEOにおいて必ず記述するべき属性について（poster画像の解説含む）
Google Discoverにおける表示
Google DiscoverへのWebストーリー掲載も進められています。2020年10月の発表時点では、米国・インド・ブラジルで実装が進んでいるとされていました。
この発表からすでに数年が経過しているため、対応地域は変化している可能性があります。
日本国内での対応状況を含め、導入を検討する際は最新のGoogle公式情報をあわせて確認することをおすすめします。
Googleサーバーにキャッシュ
WebストーリーはAMPであるため、公開後はGoogleサーバーにキャッシュされます。
そのため、Googleの検索エンジンでスマホから検索した際にタップした先の画面表示は、非AMP対応のページよりも速いことが期待できます。また、公開したURLと検索結果から遷移するURLは少し異なります。
▼公開したURL
https://juken-mikata.net/webstory/sankaku-kansu/
▼検索結果から遷移するURL
https://www.google.com/amp/story/s/juken-mikata.net/webstory/sankaku-kansu/
上記は弊社で制作したWebストーリーです。
バナーなどから飛ばすURLは前者になりますが、Googleサーバーにキャッシュされているため、検索結果から遷移するURLは後者になっています。
計測などに特段影響はないものの、これを知らないと気が付いた時に少し混乱してしまいそうなため、事前に頭に入れておきたい情報です。
アクセス解析の方法
Webストーリーも、専用タグを埋め込むことでGoogleアナリティクスやGoogleサーチコンソールによるアクセス解析が可能です。
例えばアナリティクスを使えば、流入元やページごとの読了率、各ボタンごとのCTA数が把握できます。サーチコンソールを使えば、実際に閲覧している人の属性や検索キーワードなどが把握できます。
運用型広告にも対応
2021年にはWebストーリーは運用型広告（プログラマティック広告）にも対応しました。
アドマネージャーを通じてamp-story-auto-adsタグをWebストーリーに追加し、指定のJSファイルを記述することで設定できます。複数枚のWebストーリーの中に1枚、設定した広告用のページが表示される仕様です。
ストーリー広告は、Web Stories内に表示される全画面の単一ページ広告です。広告主やサイト運営者は、1回タップするだけでユーザーをウェブページ、AMPページ、またはアプリに招待できます。ストーリー広告には、画像、動画、アニメーションを使ったり、これらすべての要素を組み合わせたりできるリッチで柔軟なキャンバスが備わっています。
引用：https://amp.dev/ja/about/stories/
このプログラマティック広告対応の発表からも数年が経過しており、対応する広告サーバーや仕様が拡張されている可能性があります。
実際に広告配信を検討する際は、Googleアドマネージャーの最新の管理画面やヘルプページで対応状況をあわせて確認することをおすすめします。
まとめ
弊社でもWebストーリーの制作に取り組んできましたが、仕様は日々アップデートされています。日本でも制作事例が少しずつ増えており、今後も動向を追い続けたいと思います。
AMP自体の検索優遇は終了したものの、Webストーリーという表現形式は現在もGoogleの公式ドキュメントで案内が続けられています。
導入を検討する際は、最新の仕様を確認しながら、コンテンツの魅力を高める手段の一つとして活用するのがよいでしょう。
弊社実装のWebストーリーはこちら
受験のミカタ｜三角関数の理解に役立つ6記事 基礎編
受験のミカタ｜合格サポート編 人気記事ランキング
Webストーリーは、検索結果での見え方や読了率の向上など、コンテンツの「届き方」を工夫する手法の一つです。同様に、自然検索からの流入を最大化したい方には、パンタグラフが提供する「コンテンツSEOホワイトペーパー」もおすすめです。上位表示されるコンテンツに必要な要素や、ユーザーニーズを満たす記事構成のポイントをまとめた資料を無料でダウンロードいただけます。
関連する記事
pagetop