ランディング ページが AMP に準拠していることを保証する方法

Accelerated Mobile Pages (AMP) プロジェクトが開始されたとき、そのほとんどは静的コンテンツに限定されていました。 必要最小限のフレームワークは、ほとんどのパブリッシャーを支援し、読者のために、より高速でシームレスな発見と消費体験を構築する方法を可能にしました.

しかし、数年後、多くの変化がありました。 AMP の一次元的な始まりは、ウェブサイト全体を構築できる進化したツールセットに取って代わられています。 これらの多目的で読み込みが速いエクスペリエンスを開始するにあたり、AMP の主な目標は変わりません。それは、モバイル Web を高速化することです。

しかし、それを達成する方法は異なります。 回避策と高度なテクニックを使用して、デザイナーは AMP の制約を満たす方法を見つけましたが、カジュアルなユーザーにとってはまったく制約されないように見えたり感じたりしないページを作成しています。

絶え間なく変化する更新と設計戦術により、今日の設計者は AMP コンプライアンス基準を満たそうとする際に何を期待する必要がありますか?

7 AMP 準拠ページの設計原則

AMP でできることの多くは変わりましたが、開発者を導く設計原則は変わっていません。 AMP Web サイトによると、AMP 準拠のページを作成するには、フレームワーク内で設計するときに次の 7 つの柱に従う必要があります。

1. ユーザー エクスペリエンス > 開発者エクスペリエンス > 実装の容易さ

AMP はオープンソース プロジェクトですが、Google によって開始されました。 そして、すべての Google と同様に、ユーザー エクスペリエンスが最優先事項です。 AMP 作成者は次のように述べています。

2. 速くできる場合にのみ実行する

オープンソース プロジェクトとして、設計者は AMP を独自のものにすることができます。 しかし、高速化されたモバイル ページの最終的な目標は高速化です。 カスタマイズは公正なゲームであり、期待されていますが、速度の名の下にのみ. AMP 作成者は次のように警告しています。「60 fps で確実に実行できないコンポーネントや機能を AMP に導入したり、今日の最も一般的なモバイル デバイスでの即時読み込みエクスペリエンスを妨げたりしないでください。」

3. 架空のより高速な将来のブラウザ用に設計しない

AMP 作成者は、Web ユーザーが自分のページを好むのと同じように、自分のフレームワークを気に入っています。 このプラットフォームは、明日ではなく、今日のモバイル Web で機能するように作られています。 したがって、設計者はそれを念頭に置いて構築する必要があり、マッハ スピードで動作する架空のブラウザではありません。

同時に、今日の開発者は AMP の未来を形作っています。 ですから、今何かを機能させることができないからといって、いつか機能させたくないというわけではありません。 そのため、AMP 開発者が「標準開発に参加」して、将来 AMP で利用できる最適化を取得することが重要であると、AMP 作成者は言います。

4. ウェブを壊さない

常に優れたユーザー エクスペリエンスを確保するということは、最悪のシナリオに備えることを意味します。 AMP の場合、それは AMP キャッシュのダウン、または API の失敗という形で発生する可能性があります。 いずれかが発生した場合、コンテンツの消費は「適切に低下」するだけです。 コンテンツが AMP キャッシュで動作する場合は、AMP キャッシュがなくても動作するはずです。

5. ユーザー エクスペリエンスを向上させるものを優先するが、必要に応じて妥協する

ほとんどの場合、ページの読み込みが速いほどユーザー エクスペリエンスが向上しますが、常にそうとは限りません。 また、何かを AMP 化しても、ユーザーを阻害するべきではありません。 バランスが取れており、ユーザー エクスペリエンスが常に優先されます。 AMP の Web サイトによると、「何かのサポートが不足しているために AMP が広く使用され展開されなくなる場合にのみ、妥協してください。」

6. 適切なレイヤーの問題を解決する

AMP で問題を解決することは、開発者にとって何が最も簡単に実装できるかではなく、エンド ユーザーにとって何が最善かということです。 残念ながら、これら 2 つは常に一致するとは限りません。 たとえば、何かをクライアント側で統合する方が簡単な場合、ユーザーがサーバー側の統合から利益を得られる場合は、単純に実装しないでください。 UX に重点を置いて、問題は適切なレイヤーで解決する必要があります。

7. ホワイトリストなし

フレームワークはホワイトリストをサポートしていません。 そのため、特別な処理を探している場合、1 つの例外を除いて、サイト、ドメイン、またはオリジンの AMP でそれを見つけることはできません。クリエイターは次のように述べています。
「セキュリティまたはパフォーマンス上の理由で必要」な場合。

AMP 準拠を確認する方法

AMP ページの最大の強みは速度だと思うかもしれません。 そうではない、とその作成者は言います。 AMP の魅力はスピードだけでなく、その検証能力にもあります。 そうすれば、ソーシャル ネットワークなどのサード パーティは、クリック後のランディング ページが高速でシームレスに表示されることを知った上で、ユーザーを快適に誘導できます。

「私のページは AMP に準拠していますか?」という質問に答えるには、4 つの方法があります。 3 つは、検証ツールを使用して合格/不合格ベースで Google によって提供されます。 AMP バリデーターは、公開前にページの問題を発見するのに役立ちます。 最終的には、通過することで AMP 準拠が実現し、ページから高速なユーザー エクスペリエンスを期待できることをサード パーティに知らせることができます。

ブラウザ開発者コンソール

Browser Developer Console を使用して AMP ページの問題を明らかにするには、次の 3 つの手順に従います。

1. ウェブブラウザで AMP ページを開きます
2. URLの末尾に「#development=1」を追加
3. ブラウザーの開発者コンソールを開いて、検証エラーを確認します

ページの AMP 準拠を妨げるエラーは、次のようになります。

ウェブインターフェース

Web インターフェイスを使用して AMP コンプライアンスを判断するのは簡単です。 最初にインターフェイスに移動します。 次に、ソース コードを「URL」フィールドに入力し、最後に検証ボタンをクリックします。

この方法で見つかったエラーは、少し異なって見えます。 以下に示すように、ページの HTML ソースの横に表示されます。

ブラウザ拡張機能

3 つすべての中で最も簡単なこのバリデーターは、気の利いた Chrome 拡張機能の形でツールバーに配置されます。 あなたの努力なしで、拡張機能は、たまたま表示されている AMP ページを検証します。 そのステータスは、3 つの色付きのアイコンのいずれかで示されます。

• 青いアイコンは、現在のページがAMP ではなく、AMP バージョンがあることを意味します。 アイコンをクリックすると、ブラウザは高速化されたモバイル バージョンに移動します。
• 赤いアイコンは、このページにエラーがあることを意味し、そのアイコンの横に数字が表示され、正確な数が示されます。
• 緑色のアイコンは、現在の AMP ページにエラーがないことを意味します。 ただし、警告が表示される場合があります。 ある場合は、そのアイコンの横に数字が表示され、正確な数が示されます。

3 つすべてにより、公開前に AMP ページのエラーを簡単に見つけることができます。 4 番目のオプションは、Google ではなく Instapage が提供するもので、ポスト クリック ランディング ページを高速に構築しようとするクリエイター向けです。 AMP ポスト クリック ランディング ページを作成する際の使用方法は次のとおりです。

Instapage で AMP ポスト クリック ランディング ページを作成する方法

これらのコンプライアンス基準を読むと、混乱して身震いするかもしれません。 幸いなことに、Instapage を使用すると、AMP ポスト クリック ランディング ページを簡単に作成できます。 ユーザーは次の手順に従うだけです。

1: 新しいページを作成する

新しいページの作成を開始するときに、プロンプトが表示されたら [AMP ページ] をクリックします。

通常、ビルダーはどのテンプレートを使用するかを尋ねるため、ユーザーには次のステップがわかりにくいかもしれません。 Instapage は、非 AMP ページ用の変換実績のあるテンプレートを何百も提供していますが、AMP ページはゼロから構築されています。 そのため、AMP ページのテンプレート オプションは現在存在しません。

ステップ 2: ページに要素を追加する

通常の Instapage ユーザーであれば、タイマーと HTML ウィジェットがツールバーにないことに気付くでしょう。 ただし、他のすべてのアイコンとその機能は、ページを作成するために使用できます。

さらに、AMP は CSS と JavaScript を制限するため、これらの通常のオプションはビルダーから差し控えられます。 代わりに次のように表示されます。

背景、フォント、SEO、および上記のすべてを調整します。 自分で行うか、Instapage コラボレーション ソリューションを使用してチームと協力してください。 次に、ページ コンポーネントを Instablocks™ として保存して、他のページに挿入することもできます。 (注: インスタブロックとコラボレーション ソリューションは AMP ビルダーで動作しますが、グローバル ブロックとヒートマップは現在動作しません。)

ウィジェットを追加すると、ページの重みが増していることに気付くでしょう。 各 AMP ポスト クリック ランディング ページには 75 KB の重量制限があり、Instapage AMP バリデーターはそれを超えないようにします。 設計限界の 80% に達すると、画面の下部に次のような警告が表示されます。

ステップ 3: ページを検証する

AMP の重量制限を超えてビルドを続けると、再度警告ウィンドウが表示されて通知されます。 確認のためにページを検証するように求められます。

ページが重量制限を下回り、検証に合格すると、次の通知が画面に表示されます。

ステップ 4: 公開する

ページをデザインして公開する準備ができたら、[公開] をクリックします。 それでも体重制限を超えている場合は、次の警告が表示されます。

ページに戻り、コンテンツを削除してスリム化を試みます。 調査によると、体重の最大の要因は通常画像であることを忘れないでください。 準備ができたら、もう一度公開を押します。 明らかに、メッセージが再度表示される場合は、ページをさらに縮小する必要があります。

このメッセージが表示されない場合は、ページを公開する準備ができています。「公開」ボタンを押すと、サブドメインとドメインを入力するよう求められます。

ライブ ページはダッシュボードで次のように表示され、名前の横に稲妻の AMP ロゴが表示されます。

いつでもクリックして戻って、編集、A/B テストの実行、レポートの収集などを行うことができます。

AMP 準拠のポスト クリック ランディング ページの作成を開始する

スピードだけでなく、AMP ポスト クリック ランディング ページを非常に強力にしているのはコンプライアンスです。 フレームワークの設計原則に従うことで、サード パーティが最適化されたモバイル エクスペリエンスを利用してトラフィックを誘導できるようになります。

高速で準拠した AMP ポスト クリック ランディング ページを作成する準備はできましたか? カスタマイズされた AMP デモはこちらから入手できます。