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

コンテンツライティングチェックシート【30項目】
今すぐ無料ダウンロード
コンテンツライティングチェックシート【30項目】
今すぐ無料ダウンロード
目次
    1. Bento AMPとは
      1. 使用できるコンポーネント例
      2. メリットは?
        1. 優れたユーザー体験を実現できる
        2. フレームワークの独立性
        3. コンポーネントの分離
      3. Bento AMPを使用する時の注意
    2. 復習:AMPページってそもそも?
      1. AMP対応によるメリット
        1. ユーザーのストレス軽減によるサイトのレスポンス向上
        2. カルーセル表示で、記事を読まれる確率が上がる
      2. AMP対応のデメリット
        1. 管理工数がかかってしまう
        2. AMP対応前と対応後でデザインやコンテンツをうまく表現できない可能性がある
      3. 自社ページがAMP対応しているかを確認するには
    3. AMP対応が必要かどうかを判断するには
      1. モバイルのユーザー数がどの程度いるか
      2. モバイルユーザーの読み込み速度に問題があるか
      3. 管理工数などを許容できるか
    4. まとめ

Googleが、Bento AMPを正式にリリースしました。

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

記事内容まとめ

  • Bento AMPの導入で、ページの中で部分的にAMP対応することが可能になった
  • Bento 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の指標を改善することに役立ちます。

 

例えば、Bento AMPで生成されるコンポーネントは、CLS(Cumulative Layout Shift=意図せぬレイアウトのずれ)を防ぐように設定されています。
 
さらに、Bento AMPで生成されるコンポーネントは、既存の設定でlazy load(遅延読込)に対応しています。ページの全要素の読み込みを最初に行うのではなく、ユーザーが近づいて来たタイミングで読み込むことができるため、ユーザーがページに訪れた時点で待たされるということが減ります。
 

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

Bento AMPの使い方について
Get started | bentojs.dev

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

復習:AMPページってそもそも?

そもそもAMPページとは、どういったものだったかが不安な方は、以下内容も併せてご覧ください。

「Accelerated Mobile Pages」通称「AMP」と呼ばれるこのフレームワークは、直訳すると「高速化されたモバイルページ」です。

AMPはAMP CDNと呼ばれるGoogleやTwitterのサーバーにキャッシュすることで表示速度を改善しています。

しかし、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禁止されています。
imgamp-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)を指定してください。
videoamp-video に置き換わりました。
audioamp-audio に置き換わりました。
iframeamp-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許可されています。
styleamp-boilerplate に必須のスタイルタグ。カスタムスタイルの目的で、head タグに1つの追加スタイルタグを使用できます。このスタイルタグは、amp-custom 属性を持つ必要があります。🔗
linkmicroformats.org に登録されている rel 値は許可されています。rel 値がホワイトリストにない場合は、issue を送信してください。stylesheet、およびブラウザでの副作用のある preconnectprerenderprefetch などの値は許可されていません。ホワイトリストのフォントプロバイダからスタイルシートを取得する特殊なケースがあります。
metahttp-equiv 属性は特定の許容する値に使用できます。詳細は AMP バリデータの仕様を参照してください。
ahref 属性値は javascript: で始まってはいけません。設定されている場合、target 属性の値は _blank でなければなりません。それ以外の場合は許可されています。🔗
svgほとんどの SVG 要素は許可されています。

参考:AMP HTML 仕様 – amp.dev

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

AMP テスト – Google Search Console

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

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

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

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

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

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

モバイルユーザ数を調べる

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

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

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

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

モバイルの読み込み速度

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

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

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

まとめ

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

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

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