ランディングページを作成する機会が訪れた。
今回は２つの新しい試みで試してみた。
プロトタイプツールのAdobeXDの利用とAMP化だ。
AMP化については以前の記事でも書きましたが、今回は通常ページでの公開手順を記載。
   

AdobeXDより画像の切り抜き

Adobe Creative Crowdのソフト　AdobeXD。　
チーム内共有を優先と、スキルアップのため使ってみた。（AdobeXDについてはまた記事にします）
手順としては

1. AdobeXDで　iphoneX用の幅で作成
2. AdobeXDより、書き出しを行う
3. photshopでスライス！

画像幅を1200ｐｘに変更

AdobeXDよりの切り抜いた画像幅は、750px　なのでAMP化推進の１２００ｐｘに画像幅を大きくして保存。
（１２００pxと指示されていたのだが、これはキャッチアップ用画像ではと思っている。サイズ小さくしても特にエラー表示はされなかったのだが、さらなる検証はまた次回にしてみる。）
画像サイズも大きくなるのだが、スマホ表示用なので、画質は中程度にて容量を小さくして保存。

AMP用ソースを書く

AMPサイト（https://amp.dev）
においてあるDesign Templates WebSites（https://amp.dev/ja/documentation/templates/?format=websites）のサンプルをダウンロードし、参考に書いていく。

書いてはチェックを行って作業を進める。

チェックツール

1. Chromeデベロッパー ツール

2. AMPテスト（google)

Chromeデベロッパー ツール

1. デベロッパーツールを開き
2. AMPページのURLの末尾に「#development=1」を付ける
3. consoleメニューを選択
4. 問題なく「AMP validation successful.」が表示されればOK

AMPテスト（google)

(https://search.google.com/test/amp?hl=ja)
公開したAMPページのチェックに利用します
URL入力・コード貼り付けでもチェックしてくれる。


 

グーグルタグマネージャの導入

AMPソースのチェックが終わって、グーグルタグマネージャ（https://tagmanager.google.com/#/versions/accounts/）もAMP用を記載しなければなりません。

手順参考

AMP用Google Tag Managerの設定コードの取得方法 - ブロギングライフ
https://www.blogging-life.com/create-google-tag-manager-amp-container/

1. コンテナ作成
2. コンテナ使用場所にAMPを選択して作成
3. Google　タグマネージャより発行されたコードをAMPページ内に設置
4. Google タグマネージャのコンテナにアナリティクス用タグを追加、そして公開
5. AMPページを開いてみて、アナリティクスで計測されたらOKです

公開

これにてAMP化が完了となりました。
実際にスマートフォンでAMP化されたページを表示してみましたが、爆速表示、一瞬で表示されていて離脱率軽減対策にはつながりそうです。
公開後はサービスサイトとAMP化ランディングページの比較をしていこうと思います。
 

参考リンク

Adobe XD https://www.adobe.com/jp/products/xd.html
AMPサイト https://amp.dev
AMPサイト内　Design Templates WebSites　https://amp.dev/ja/documentation/templates/?format=websites
Chrome  https://www.google.co.jp/intl/ja/chrome/
AMPテスト　　https://search.google.com/test/amp?hl=ja
GTM グーグルタグマネージャ https://tagmanager.google.com/#/versions/accounts/
ブロギングライフ https://www.blogging-life.com/