AMP

印象的、スムーズかつ瞬時に表示

AMP を使用してユーザーファーストなウェブサイトを簡単に作成できます。

スタートガイド
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

AMP に
ついて

印象的かつスムーズで、ほぼ瞬時に読み込まれるウェブページ

AMP はウェブサイトを高速かつユーザーファーストにし、収益化するシンプルかつ堅牢なフォーマットです。AMP は一般的なプラットフォームへの配布を実現し、運用コストと開発コストを削減することで、貴社のウェブ戦略に長期的な成功をもたらします。

<amp-img class="resp-img"
  alt="Desktop"
  width="550"
  height="368"
  src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

オープンウェブ全体のユーザーに優れたウェブ体験をもたらします

AMP を使用すると、デバイスや配信プラットフォーム全体で一貫して高速で美しく、高性能なウェブサイトや広告を作成できます。サイト運営者と広告主は、ユーザーファースト体験を重視したコンテンツの表示方法を決めることができます。

AMPを使用したウェブサイトのスクリーンショット。
AMPを使用したウェブサイトのスクリーンショット。
柔軟性とコントロールを維持しつつコードの複雑さを軽減します CSS を使用してスタイルや動的データをカスタマイズし、必要に応じて最新のデータを取得できます。
パフォーマンスを保証するビルディングブロック 優れたウェブサイトを構築するには、多くの時間と労力が必要です。AMP コンポーネントは、最高のパフォーマンスを得られるようにあらかじめ最適化されています。
あらゆる人に開かれたウェブで持続可能な未来を築きます AMP プロジェクトはより優れた、より速い、より使いやすい操作感を実現することで、ウェブの未来を保護するオープンソースの取り組みです。
ウェブページの速度によってユーザー体験と基本的なビジネス指標が向上します AMP ページはあらゆるデバイスとプラットフォームでほぼ瞬時に読み込まれます。
AMP ページの構築は簡単です WordPress や Drupal などの一般的な CMS を使用している場合など、多くの場合は数日でアーカイブ全体を変換できます。
AMP はさまざまなウェブの接点に適用できます Google、Bing、Twitter などの世界的なプラットフォームで使用されている AMP を使用すると、可能な場合に AMP ページを既定で表示し、ユーザーに自然にページを表示させることができます。

当社は全体的な速度改善に取り組んでいます。サイトの読み込みに時間がかかるのであれば、記事がどれほど優れているかは関係ありません。中には記事の内容を見る前にページを離れてしまう読者もいます。

David Merrell、シニアプロダクトマネージャー

成功事例を読む

AMP HTML の構成要素

<!DOCTYPE HTML>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.html">
  <meta name="viewport" content="width=device-width">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true
      }
    </script>
  </amp-geo>
  <h1>Hello in <span [text]="country">...</span>!</h1>
  <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

Hello
World!

組み込みコンポーネント

AMP HTML は、確かなパフォーマンスを得るためにいくつかの制限が設けられた HTML です。

AMP HTMLページのほとんどのタグは通常の HTML タグですが、一部の HTML タグは AMP 固有のタグに置き換えられています(AMP 仕様の HTML タグも参照してください)。AMP HTML コンポーネントと呼ばれるこれらの独自要素により、一般的なパターンを効率よく簡単に実装できます。

例えば amp-img タグの場合、このタグをまだサポートしていないブラウザでも srcset を完全にサポートします。初めての AMP HTML ページを作成する方法を学びましょう。

AMP ページは、HTML タグを介して検索エンジンやその他のプラットフォームによって検出されます。ページの非 AMP バージョンと AMP バージョン、または AMP バージョンのみを選択できます。

AMP キャッシュ

AMP ページは、キャッシュしてウェブ上でほぼ瞬時に読み込ませることができます。Google のようなプラットフォームは AMP キャッシュを実行し、サービスからコンテンツを高速に読み込めるようにします。

Google AMP キャッシュはプロキシベースのコンテンツ配信ネットワークで、あらゆる有効な AMP ドキュメントを配信します。AMP HTML ページを取得してキャッシュし、ページのパフォーマンスを自動的に改善します。Google AMP キャッシュを使用すると、ドキュメントとすべての JS ファイル、およびすべての画像が HTTP 2.0 を使用している同一のオリジンから読み込まれ、最大の効率を得ることができます。
キャッシュには、ページの動作と外部リソースを利用していないことを保証する検証システムも組み込まれています。検証システムは、ページのマークアップが AMP HTML 仕様を満たしていることを確認する一連のアサーションを実行します。

この検証ツールの別バージョンがすべての AMP ページにバンドルされています。このバージョンではページのレンダリング中に検証エラーをブラウザのコンソールに直接記録できるため、コードの複雑な変更によってもたらされるパフォーマンスとユーザー体験への影響を確認できます。

AMP ウェブサイトの使用事例を見る