AMP設計機能：フレームワークで他に何が可能ですか？

設計の複雑さの印象的なレベルに達していますが、それでも、AMPを限定されたフレームワークと見なす人もいます。 彼らの弁護において、AMPスタイリングは、ロード速度を改善するためにページを制限することに焦点を当てることから始まりました。 そして、速度はその究極の目標であり続けていますが、設計上の制限ははるかに少なくなっています。

デザイナーは、AMPを使用した静的コンテンツの公開に制限されなくなりました。 今日では、堅牢な設計をサポートする多用途のフレームワークです。 あなたがずっと前にそれをあなたの時間の価値がない堅くて骨の折れるフレームワークとして書き留めたならば、この編集はあなたにあなたのスタンスを再考することを強いるかもしれません。

知らないかもしれない9つのAMP設計機能

（AMPの可能性の詳細については、次回のウェビナーに参加して、AMPに関する一般的な誤解について話し合ってください。AMPプロジェクトを主導する専門家がすべてのAMPの質問に回答してください。）

1.プログレッシブウェブアプリ（PWA）を構築する

モバイルウェブは長い道のりを歩んできましたが、まだ長い道のりがあります。 レポートによると、上位1,000のモバイルウェブサイトは上位1,000のモバイルアプリの4倍のユーザーにリーチしますが、ユーザーの関心は20分の1になります。 モバイルサイトは訪問者を魅了していますが、ネイティブアプリの直感的なユーザビリティを提供することはできません。 これがプログレッシブウェブアプリの出番です。

プログレッシブウェブアプリは、ユーザーをモバイルサイトに誘導し、ネイティブアプリのようにホーム画面に表示されるアイコンをダウンロードするように促すハイブリッドエクスペリエンスを提供することで、ユーザビリティの問題を解決しようとします。 開いたときのエクスペリエンスは、ネイティブモバイルアプリと同じように表示および動作するように設計されています。

AMPと組み合わせると、これらのPWAを高速で起動できます。 これらを一緒に使用する方法はいくつかあります。

PWAとしてのAMP

プログレッシブウェブアプリがAMPによって制限されているコーディング言語を完全に使用する必要がない場合、フレームワークは独自のPWAを作成するために必要なすべてを提供できます。 実際、「AMP by Example」は、次の組み合わせの実用的なショーケースです。

PWAでAMP

AMPとPWAはすべてまたはまったくではありません。 一部のPWAにAMPレイアウトを使用できないわけではありませんが、すべてではありません。 プログレッシブウェブアプリがAMPCSSコーディングの制限の下で動作できない場合は、「シャドウAMP」と呼ばれるフレームワークの形式を使用できます。 これにより、AMPをWebサイトの他のセクション内にネストできるため、不要なものではなく、必要なものをAMPすることができます。

AMPからPWAへ

PWAがAMPの制限の下で動作できるとは思わない場合でも、AMPスタイリングを使用してユーザーを引き付けることができます。 検索エンジンでのAMPの可視性の向上により、フレームワークを使用したニュースやブログ投稿の公開が簡単になります。 クリックしてAMPページにアクセスすると、訪問者はPWAをダウンロードするように求められます。

2.チェックアウトページを作成するには

AMPはさまざまなトランザクションの有効化に取り組んでいますが、AMPが設計したページで支払いを受け入れることができるようになりました。 簡単なフォームを使用して、名前、住所、クレジットカードの詳細など、支払いに必要な詳細を収集し、プロモーションコードを受け入れます。

AMPチームの次の大きな優先事項は、ユーザー向けの「より堅牢な」支払いコンポーネントです。 彼らの製品ロードマップには、次のように書かれています。

AMPは現在、Payment Request APIを使用したamp-iframeを介するなど、限られたコンテキストでのトランザクションのみをサポートしていますが、これにより多くの重要なユースケースが省略されます。 このアクティビティは、サードパーティの支払いプロセッサ、ウィジェット、ウォレットなどとの統合を含む可能性のある、より堅牢な支払いコンポーネントをAMPに実装します（これらは何らかの形でサポートされる必要があります）。

3.コメントセクションを作成するには

正しく行われると、コメントセクションは、生産的なディスカッション、コンテンツのアイデア、さらにはリードのソースになります。 そして今、AMPを使用すると、設計者はコメントセクションを作成して、ユーザーがそのディスカッションに参加したり、ログインを要求したりすることができます。これにより、ユーザーはより個人的な方法でディスカッションできます。

4.AMPストーリー

Snapchat、Instagram、またはFacebookのストーリーを見たことがあれば、AMPのストーリーは非常に見覚えがあります。 GoogleのAMPのプロダクトマネージャーであるRudyGalfiによると、ストーリーはパブリッシャーに「ニュースや情報を視覚的に豊かなタップスルーストーリーとして配信するためのモバイルに焦点を合わせたフォーマット」を提供します。

ガルフィによれば、CNN、コンデナスト、ハースト、マシャブル、メレディス、マイク、ヴォックスメディア、ワシントンポストなどの出版社がこのフォーマットの初期開発に関与してきました。 現在、すべてのユーザーが利用でき、発見可能性に関する限り、AMPストーリーは、Google画像検索、発見、検索、ニュースで見つけることができます。

これは、見るとどのように見えるかの例です。

5.Bingで追加の可視性を取得します

最近のブログ投稿で、BingのプリンシパルプログラムマネージャーであるFabrice Canelは、同社の検索エンジンの新機能を発表しました。

2016年、BingはAccelerated Mobile Pages（略してAMP）のオープンソースの取り組みに参加し、現在地やデバイスを問わず、情報を探しているときに検索を「検索」および「実行」するのを支援しました。 本日、BingAMPビューアとBingAMPキャッシュのリリースを発表しました。これにより、AMP対応のウェブページがBingのモバイル検索結果から直接機能し、BingがBingユーザーにより高速なモバイルエクスペリエンスを提供できるようになります。

このビューアは、Googleのビューアに似ています。AMP対応のコンテンツを示す稲妻の画像が特徴のカルーセルです。

現在、Googleからの検索エンジンのトラフィックに加えて、AMPユーザーはBingの検索エンジンの結果ページで優先不動産を期待できます。

6.スクロールバウンド効果を作成します

多くの場合、スクロールバウンド効果はユーザーエクスペリエンスの妨げになります。 彼らは魅力的ですが、あなたが望む方法ではありません。 それらはページのメインコンテンツの邪魔になり、エフェクトの実装によってはページの重みを大きくする可能性があります。

ただし、ページの目標コンテンツ（訪問者に絶対に消費してもらいたいもの）が、効果を追加する画像である場合もあります。 たとえば、フリーランサーのオンラインポートフォリオ、またはWeb開発機関のWebサイトを考えてみましょう。 この場合、効果はデザイナーの能力を示しています。

ただし、そのデザインが適切に実装されていない場合、ページの重みが増す可能性があります。これにより、読み込みが遅くなり、見込み客が立ち往生する可能性が低くなります。 この問題を解決するには、amp-position-observerとamp-animationを組み合わせて、魅力的でありながら高速な読み込み効果を多数作成できます。

スクロールバウンドアニメーション

スクロールバウンドアニメーションは、ユーザーがページをスクロールするときに画像に命を吹き込むことができます。 たとえば、AMPで構築されたこのハンドスピナーは、ユーザーがスクロールすると回転します。

フェードとスライドのトランジション

フェードトランジションとスライドトランジションを使用すると、タイムバウンド効果とスクロールバウンド効果を組み合わせて、時間に敏感なトランジションを作成できます。 たとえば、画像がフルビューユーザー内にあるときに、テキストが画像上にスライドする効果を作成できます。 また、フェード効果を使用すると、ユーザーが画像に近づくとその画像をフェードインし、ユーザーがスクロールして離れるとフェードアウトすることができます。 ここで実際の動作を確認してください。

カルーセル

遷移効果は、AMPカルーセルでも使用できます。

上記の例では、川の画像が部分的に非表示になっています。 ただし、スクロールバウンド効果が追加されているため、ユーザーがスクロールすると、フルビューで左にスナップし、水平方向にスクロールできることを示します。

パララックスウィンドウ

画像よりも小さいブレークウィンドウを定義することにより、視差効果を作成できます。

このウィンドウは画像よりも小さく、ユーザーがスクロールすると、ウィンドウが下に移動し、画像内の残りの象が表示されます。

7.メールを増幅する

あなたはウェブページのスピードアップについて知っていますが、電子メールはどうですか？ メール用のAMPは、GmailにAMPページと同じ速度と使いやすさをもたらすように見えます。 開発者が電子メールをAMPドキュメントとして送信できるようにすることで、電子メール用のAMPの可能性は、ユーザーに豊かなエクスペリエンスを提供する能力です。

Gmail andChatのプロダクトマネージャーであるAakashSahney氏は、新しいAMP for email仕様は、「開発者がより魅力的でインタラクティブで実用的なメールエクスペリエンスを作成するための強力な方法」になると述べています。 これを使用すると、ユーザーはGmailを介して、イベントへの出欠確認、予定の予約、アンケートへの記入などのタスクを完了することができます。

Pinterest、Booking.com、およびDoodleは、AMPの電子メール仕様を最初にテストしたものの1つです。

AMP for email仕様は本日利用可能ですが、ここでサインアップして開発者プレビューにアクセスする必要があります。

8.クリック後の高速ランディングページを簡単に作成するには

コンバージョン率の向上に関しては、クリック後のランディングページを最適化することを優先する必要があります。 ただし、AMPであるかどうかに関係なく、すべてのプロモーションに対してクリック後のランディングページを作成すると、チームのリソースがすぐに枯渇する可能性があります。 そのため、InstapageビルダーでAMP機能を作成しました。

これで、AMPのクリック後のランディングページを電光石火の速度で作成し、電光石火の速度でロードできます。 要素をドラッグアンドドロップし、クリックして編集し、要素を保存して将来のページに追加するだけです。

ビルド中に、AMPのページの重み制限である75kbを超えそうになると通知されます。 制限の80％に達すると、この警告インジケーターが画面の下部に表示されます。

そうでない場合は、WordPressまたは独自のカスタムドメインに公開することは明らかです。

9.クリック後のランディングページを最適化するには

優れたAMPのクリック後のランディングページを作成することは1つのことですが、それを改善することはまったく別のことです。 AMPのクリック後のランディングページのコンバージョン率を高める方法を見つけるには、A / Bテストから始めるのが最適です。

A / Bテストでは、コントロールと呼ばれる元のページを、バリエーションと呼ばれる別のページに対してテストします。 非常に基本的な用語では、等しいトラフィックがそれぞれに誘導された後の勝者は、より良いページです（より詳細な説明については、Instapage A / Bテストガイドを参照してください）。
理論的には簡単に思えますが、確かにそうではありません。 テスト設計、妥当性の脅威、ソフトウェアなどの知識が必要です。 そして特に難しいのは、実行するすべてのテストで、少なくとも1つのまったく新しいページを作成する必要があるということです。

幸い、Instapageでは、次のクリックでAMPのクリック後のランディングページを複製できます。

[A / Bテストの作成]、[新しいバリエーション]の順に選択するだけで、ページを複製してそこから編集するか、「Instablocks」を使用して保存したテキストブロック、画像ブロック、ウィジェットなどを最初から完全にインポートします。特徴。 次に、テストを実行し、勝利したデザインを実装します。

GoogleAMPウェビナーで詳細をご覧ください

AMPの採用は増え続けています。 現在、3,100万を超えるドメインが50億を超えるAMPページを作成しています。 また、WPengineによる大陸間調査によると、99％のユーザーが組織にAMPを使用することの利点を認識しています。

AMPは、制限された最低限のフレームワークではなくなりました。 今日では、即座に読み込まれるWebサイト全体を構築することができます。 そして、より堅牢な支払いシステム、追加の効果、およびGoogle Play統合を作成する計画があり、それはますます強力になっています。

AMPを知っていると思いますか？ 独占的なウェビナーで、Instapageと作成者であるGoogleによるフレームワークの神話について詳しく学んでください。 次に、ここでカスタムAMPデモを入手して、超高速のAMPページを簡単に作成できることを確認してください。