Bento AMPとは？メリットから使い方まで解説！

編集部注：2024年3月18日に情報を更新しました。

Bento AMPは、非AMPページでもAMPコンポーネントが使用できるようになる技術のことです。

この記事ではBento AMPのメリット・デメリットや使い方を解説します。

Bento AMPとは

Bento AMPとは、非AMPページでも、AMPコンポーネントが利用できるようになる技術のことです。

2020年10月に公開された以下動画内で、Bento AMPについて言及されています。

Bento AMPが実現したいのは、下記のように、AMP非対応のページから段階的に、AMP対応に移行していくことです。また、図のように段階的に移行していくとして、もし目的を達成できたとなれば、途中で移行と止めることも可能です。

使用できるコンポーネント例

使用できるコンポーネントは、アコーディオンやカルーセル、サイドバーなどがあります。

以下ページからコンポーネントを入手できますので、参考にしてみてください。

Bento AMPのメリット

Bento AMPを使用するメリットは以下3点です。

1. 優れたユーザー体験を実現できる
2. フレームワークの独立性
3. コンポーネントの分離

優れたユーザー体験を実現できる

AMPは、もともとが優れたユーザー体験を実現するために発足したフレームワークのため、Bento AMPもその思想に基づいています。

Bento AMPで生成されるコンポーネントは、Core Web Vitalsの指標を改善することに役立ちます。

Core Web Vitals（コアウェブバイタル）とは？各指標・対策方法について

※編集部注：2024年4月5日に最新情報に更新しましたGoogleは、Webページのユーザー体験（UX）の向上を目指して、Web Vitalsという概念を導入することを発表しました。Web Vitalsとは様々なユーザー…

このように、Bento AMPで生成されるコンポーネントは、ユーザー体験を向上するという観点で有益です。

フレームワークの独立性

Bento AMPで生成されるコンポーネントは、任意のフレームワークやCMSで使用することができます。

一方で、WebコンポーネントやReact/Preactコンポーネントとしてパッケージ化されます。そのため、Bento AMPで生成されるコンポーネントは、ReactやPreactとシームレスに統合できます。

コンポーネントの分離

Bento AMPで生成されるコンポーネントは、ドキュメントレベルではなく、コンポーネントレベルで、データと実装を隠すことができます。そのためセキュリティの観点で安全性が高いです。

さらに、TwitterやInstagramなどの埋め込みのような、3rd Partyのスクリプトは、予期せぬ挙動をしてしまう可能性があり、ページに悪影響を及ぼす場合もあります。

Bento AMPで生成されるコンポーネントは、このような心配をする必要がありません。

ではこのように、メリットが非常に大きいBento AMPですが、どのように使用すればいいのでしょうか？

Bento AMPを使用する時の注意

Bento AMPを使用する場合、以下ページの案内にしたがって作業してもらうように、エンジニアの方に依頼することになります。

HTMLでコーディングする場合は、一部対応していないコンポーネントがあるので、注意が必要です。

復習：そもそもAMPとは

そもそもAMP（Accelerated Mobile Pages）とは、Webサイトの表示速度を高速化する手法です。AMP用のシンプルなソースコードを記述・キャッシュすることで、モバイルサイト表示速度を高める効果があります。

なお、キャッシュする際はAMP CDNと呼ばれるGoogleやTwitterのサーバーサーバーを利用しています。CDNについては以下のページで詳しく解説しているのでご興味のある方はあわせてご覧ください。

関連記事：CDNとは？AMPとの違いやSEOへの影響について

しかし、AMPには制約があったり、AMP用にHTMLページを作成したりと表現の幅が狭まり、管理が大変になるというデメリットもあるため、必ずしもAMPが最適というわけではありません。

AMP対応によるメリット

ユーザーのストレス軽減によるサイトのレスポンス向上

従来に比べて、ページの読み込み速度が断然早くなるので、ユーザーがサイトを見ている際に、「遅い」と感じることが少なくなり、記事を読み進めることが多くなるのではないかと考えられます。

カルーセル表示で、記事を読まれる確率が上がる

検索結果直下に大きく領域を取り、表示されるため、クリックされる確率が上がると思われます。さらに、記事がクリックされなかったとしても、カルーセル表示の写真+テキストを見てもらえるので、表示効果を得られるという点も見逃せません。

AMP対応のデメリット

管理工数がかかってしまう

通常のHTMLページと、AMP用HTMLページの両方の管理が必要になる可能性があります。　※一括で管理できるCMSも存在しております。

AMP対応前と対応後でデザインやコンテンツをうまく表現できない可能性がある

特に2次でコンテンツ利用を行っているサイトなどは、JavaScriptを多用している場合が多いため、表示できないコンテンツなどが出てくる可能性があります。

タグの使用については、以下表を参考にしてみてください。

タグ	AMP HTML の状況
script	タイプが application/ld+json または text/plain でない限り禁止されています。(必要に応じて他に実行不可能な値が追加されるかもしれません。) 例外として、AMP ランタイムをロードするための必須の script タグと、拡張コンポーネントをロードするための script タグがあります。
noscript	許可されています。ドキュメント内のどこでも使用できます。指定した場合、JavaScript がユーザによって無効にされていると、<noscript> 要素内のコンテンツが表示されます。
base	禁止されています。
img	amp-imgに置き換わりました。 注意: <img> は HTML5 に準拠した Void 要素なので、終了タグはありません。ただし、<amp-img> には終了タグ </amp-img> があります。
picture	禁止されています。[fallback](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders?format=websites) 属性を使用して異なる画像フォーマットを提供するか、複数の [<amp-img> の srcset](https://amp.dev/documentation/components/amp-img#attributes)を指定してください。
video	amp-video に置き換わりました。
audio	amp-audio に置き換わりました。
iframe	amp-iframe に置き換わりました。
frame	禁止されています。
frameset	禁止されています。
object	禁止されています。
param	禁止されています。
applet	禁止されています。
embed	禁止されています。
form	許可されています。amp-form 拡張子を含める必要があります。
input elements	<input[type=image]>、<input[type=button]>、<input[type=password]>、<input[type=file]> などの無効な一部の入力タイプを除いて、ほとんどの場合に使用できます。 関連するタグも許可されています：<fieldset>、<label>
button	許可されています。
style	amp-boilerplate に必須のスタイルタグ。カスタムスタイルの目的で、head タグに1つの追加スタイルタグを使用できます。このスタイルタグは、amp-custom 属性を持つ必要があります。?
link	microformats.org に登録されている rel 値は許可されています。rel 値がホワイトリストにない場合は、issue を送信してください。stylesheet、およびブラウザでの副作用のある preconnect、prerender、prefetch などの値は許可されていません。ホワイトリストのフォントプロバイダからスタイルシートを取得する特殊なケースがあります。
meta	http-equiv 属性は特定の許容する値に使用できます。詳細は AMP バリデータの仕様を参照してください。
a	href 属性値は javascript: で始まってはいけません。設定されている場合、target 属性の値は _blank でなければなりません。それ以外の場合は許可されています。?
svg	ほとんどの SVG 要素は許可されています。

参考：AMP HTML 仕様 – amp.dev

AMPについて改めて詳しく知りたいという方は、以下の記事も併せてご覧ください。

関連記事：AMP対応とは？メリット・デメリットや実装方法について

AMP対応が必要かどうかを判断するには

Bento AMPを使用するかどうかの前に、AMP対応を行うかどうかを判断する必要があります。前述の通りAMP対応のメリットデメリットを比較して、対応するかどうかを決定しましょう。

モバイルのユーザー数がどの程度いるか

AMPはモバイルユーザーの、ユーザー体験を改善するための対応なので、そもそもモバイルユーザーが少ない場合対応する優先度は高くありません。まずは、サイトユーザーのうち、どのくらいモバイルユーザーがいるのかを確認しましょう。

Googleアナリティクスのユーザー>モバイル>概要から、デバイスごとのユーザー数を調べることができます。

もしモバイルユーザー数が多い場合は、AMP対応をする可能性は高くなります。

モバイルユーザーの読み込み速度に問題があるか

AMPはモバイルユーザーの読み込み速度を改善するためのものなので、モバイルユーザーの読み込み速度に問題があるかどうかで対応するかどうかが決まります。

モバイルユーザーの読み込み速度に課題があるかは、PageSpeed Insightsで確認することができます。

管理工数などを許容できるか

AMP対応をすると、通常のHTMLページと、AMP用HTMLページの両方の管理が必要になる可能性があるので、管理上の工数がかかるようになります。

コードを書き換えるような改修をサイト内で行う場合に、かかる管理工数が増えてしまうことになります。モバイルユーザー数、その読み込み速度改善から得ることができるメリットと、管理工数がかかるデメリットを天秤にかけてAMP対応するかどうかを決定しましょう。

自社ページがAMP対応しているかを確認する方法

AMP テスト – Google Search Console

上記ページにURLを入力することで、そのURLがAMP対応できているかを確認することができます。

まとめ

Bento AMPを活用することで、これまでよりも優れたユーザー体験を簡単に実現することが可能になります。

今後、完全なAMPページは減っていく可能性はあり、Bento AMPを活用して部分的にAMP対応をした要素を活用するページは増えていきそうです。Googleも優れたユーザー体験を提供するページが増加することを望んでいるので、Bento AMPを活用することを我々に期待していそうです。

早いうちから慣れておき、ユーザーファーストのページを作成できるようになっておきましょう。