既存サイトをAMP対応する場合の工数・スキルセットについて考えてみた
私はこれまで、メディアサイトのAMP対応について3案件ほど開発していた事もあってか、社内でもAMP対応に関する問い合わせをいただく機会が多いです。そして、2018年の秋頃から、明らかにAMP化に関する話が増えてきたように思います。
その中でも、よく質問されるのはAMPの実装面に関する話よりも、AMP対応を行う場合の見積もり・作業内容・工数といった問い合わせが非常に多いです。確かに、AMPタグの技術面に関する情報は色々出てきますが、どれくらいの期間や工数が必要になるか、というのは実際に経験してみないと、中々イメージしづらいですよね。
そこで今回は、私が過去に携わったメディアサイトのAMP対応の事例をもとに、必要な作業内容・工数について考えていきたいと思います。
- 前提1：新規サイトをAMP化するのと、既存サイトをAMP化するのは、どっちが大変？
- 前提2：メディアサイトAMP化で開発するもの
- 1. 既存のWebページからAMPページ用テンプレートを作成する【1日前後】
- 2. AMPページ自動変換プログラムの開発【3〜4日】
- 3. テストページを本番で公開し、AMP Cacheされるかチェック【1〜3日】
- 4. AMPページの量産・検証【量産ページ数により変動】
- 5. 量産ページの公開
- まとめ
- 最後に
前提1：新規サイトをAMP化するのと、既存サイトをAMP化するのは、どっちが大変？
サイトをAMP対応する場合、今ある既存サイトをAMP対応させるのと、これから新規に作るサイトをAMP対応する、2つのパターンがあると考えられます。そして、2つの大変さを比較すると「既存>>>新規」くらい既存サイトのAMP化は大変です...
これは、AMPページにはCSSの容量制限や使えるコンポーネントに限りがある事が理由です。AMP対応を想定して新規ページを作る場合、AMPの制約を考慮しながら通常のWebページを作っていくことができますが、AMP対応を考慮してない既存ページをAMP化する場合、どうしてもAMPで再現できない要素をどのように代替させるか、という事を意識する必要があるためです。既存サイトのAMP化は、せいぜい基本レイアウト・CSSの流用ができる程度で、ほぼ新規ページ制作と労力は変わらないと感じています。
AMPページの制約を考えるにあたり、AMPで出来る表現を学ぶには、AMPの公式ページとなる「amp.dev」のTemplates（旧名：AMP Start）のサンプルページを見るのが一番だと思います。
そのため、もし業務でクライアントのWebサイトをAMP対応させる場合は、事前にクライアントに対して
- AMPのデメリットの1つとなる「サイト内表現に制約が生じる」ことを理解してもらう
- AMPで再現できない箇所はレイアウトを変える、もしくはページ内要素をオミットする事を了承してもらう
この2点を伝えて、合意をとっておくことが大事です。
前提2：メディアサイトAMP化で開発するもの
さて、いよいよ本題となるAMP対応の工数について考えていきます。まずは、AMP対応に必要な作業を洗い出します。私が過去にAMP対応したメディアサイトはこのような要件でした。
- 定期的に新規記事の作成・更新が入るメディアサイトの各記事（100ページくらい）
- EC機能やログイン機能など、動的な要素は含まれない
- クライアントのサーバー側には一切関与できないので、基本的にフロントエンド側でなんとかする
- WordpressなどCMSによる記事の管理は行ってない
動的要素が含まれない静的ページとなるため、作業難易度としてはかなり低めで、AMPタグに関する知見があれば簡単にページをAMP化できます。ただ、今回はWordpressのようなCMSが使えないため、既存のプラグインを使った対応ができず、そこの対応策を考える必要があります。
このような条件で、記事ページをAMP化するにあたり、2つのアプローチがあると考えました。
- HTMLページをAMPページに自動変換するプログラムを作り、毎回更新時に実行
- CMSを独自に開発して、1つの文章から通常ページ・AMPページを生成
運用性を最善で考えるならCMSを使ったページ生成かもしれませんが、この時はリリース予定までの期日から逆算し、比較的短い期間で開発ができる自動変換プログラムの開発に着手しました。
1. 既存のWebページからAMPページ用テンプレートを作成する【1日前後】
まずはAMPページを量産する用のテンプレートを作成します。できればサイト内モジュール一式をまとめたページを作成し、それをテンプレートにしましょう。
もし、対応予定のページがすでに公開済みであれば、下記サイトを使うと、サイトをAMP対応した時の見え方とHTMLを出力してくれます。
しかし、上記のジェネレーターを使用しても、構造によってはレイアウトが崩れてしまう、動的に動かしている箇所がうまく制御されない、といった問題も出てくるため、そこは手動で直す必要があります。
AMPテンプレート開発のゴールは、AMPページとしてエラーが出ない状態のテンプレートを作ることです。コードのチェックは下記の「AMPテスト」ページから実行する事ができます。ソースコードをコピペしてチェックもできるので、開発中のページでも簡単にチェックできます。便利！
エラーが出たら、そこを修正して、またテストして、エラーを直して…を繰り返し、「有効なAMPページです」の表示が出たら、AMPページとして合格となります。
AMPタグの知識があれば、この工程は半日もあれば終わりますが、初めて対応する場合だと、AMP用のタグを調べながら、エラーの原因をチェックして…となるため、一日がかりの作業になると思います。（サイトの構造によって難易度も変わってきます）
2. AMPページ自動変換プログラムの開発【3〜4日】
テンプレートを作成後は、AMPページへの自動変換プログラムを開発していきます。先程は外部ツールと手動でAMPページを作りましたが、それを自動化する方法を考えていきます。
まずは変換前の通常ページとAMP化したページで差分をチェックします。Windowsなら「WinMarge」というツールを使えば簡単に差分比較ができます。Macの差分ツールは…誰か良いツールを紹介してください
この自動変換プログラム開発にあたり、主に必要になってくる機能は下記です。
- HTMLタグを解析し、タグ名を変換したり、タグの属性を追加・削除する機能（AMP専用タグの対策）
- ページ内の画像サイズを自動取得し、画像タグに入れる機能（amp-img対策）
こうした仕組みは、JavaScriptを使ったブラウザ上の変換ツールを作ったり、Node.js、PHPなどを使用して、開発環境のソースコードからAMPページを生成するHTMLジェネレーター的なものを作るのが良いと思いますが、いずれにせよエンジニアスキルの高い人の協力が必要となり、この工程もエンジニアの開発スピードで大きく変動してきます。（私の案件ではPythonを使いましたが、これは同じチーム内で過去にPythonを使った事例があった等の特殊な事情があるためです）
とはいえ、仕組みとしては差分が出ている所を1つずつ置き換えていくシンプルで地道な作業になるので、3〜4日程度あれば一通り変換プログラムが開発できると思います。
3. テストページを本番で公開し、AMP Cacheされるかチェック【1〜3日】
AMPページは公開後、Googleのサーバーにキャッシュしてもらう必要があります。AMPページが速い！と言われるのはGoogleサーバー内で最適化の処理がされるためです。
これは実際にページを一般公開し、Googleのクローラーが拾ってくれるか確認が必要になります。業務の場合は、クライアントにも事前にテストページ配信の合意を取り付けた上で進めていきましょう。
ただ、Googleがどのタイミングでクロールしてくれるかは不明です。早ければ数時間でクロールしてくれますが、場合によってはテストページ公開後、翌日に反映される事もあり得ます。そのため、この工程も加味してスケジュールは余裕をもって設定しておく必要があります。（時間が無いときは、1の工程で作ったAMPページ用テンプレートを事前に公開しておくのもアリです。）
ここの工程では、主に下記についてチェックしていきましょう。
テストページが問題なくキャッシュされていれば、AMP対応できているので、他ページの量産も進めることになります。（テストページは削除しておくことも忘れずに！）
4. AMPページの量産・検証【量産ページ数により変動】
そして、自動変換プログラムを開発後は、公開するページの数だけプログラムを回します。
ここは一般的なページ開発と変わらないので省略しますが、できれば、ここもチェックが必要な項目を洗い出し、テストコードを用意できるのが理想的です。
5. 量産ページの公開
量産したAMPページを公開すれば、一通り対応完了です。こちらもテストページ同様、クローラーによってキャッシュされるタイミングが変動するため、1日程度は待つ想定で考えた方がよいでしょう。
まとめ
これらを踏まえて、AMPページに必要な工数・スキルセットをまとめると
- AMPページの自動変換プログラムは完成の目安として約1週間、公開後テストはクロールのタイミングによって変動するため、全体の開発期間は2週間くらい確保できると良い
- AMPタグの知識や、場合によってバックエンド側の知識が必要になるため、HTMLの読み書きができるコーダー＋エンジニアのアサインは必須。
- メディアサイトの規模感なら、HTMLとバックエンドの知見があるエンジニア1名、もしくはAMPテンプレート制作をAMPタグの知見があるコーダーに、自動変換の開発のみエンジニアが対応する、という2名の分業体制
になるのではないか、と思います。
最後に
今回は私の経験をベースに作業内容と工数についてまとめてみましたが、イベント等で他社の事例などを聞いても、Webデザイナー＋エンジニアの1〜3名体制で作っている企業が多そうな印象です。
AMPは毎年アップデートを続けており、今後も導入する企業が増えてくるはずなので、もし企業で導入する場合は参考にしていただければ幸いです。
