『WordPress AMP対応 モダンWeb制作 レッスンブック』について

本書の企画は「AMPページがもっと増えてほしい」というところからスタートしています。

AMPはGoogleが中心となって開発を進めているフレームワークで、Webページの表示を高速化できるというメリットがあります。

ところが、いざAMPについて調べ始めても実態が見えてきません。アレがダメ、コレがダメという話だけが見えてきて、結局はテキストベースのシンプルなページにすることで高速表示を実現しているようなイメージになってしまいます。

そこで、大元の情報から細かく調べなおしたところ、コンポーネントベースではかなり開発が進んでいることが見えてきました。表現力に関しても今どきのWebページであれば必要十分なところまできていたため、一冊の本にまとめました。

AMPを使ったページ制作

AMPの開発スピードは速く、どんどん変化・発展しています。そんな中、フルスクラッチでAMPページを作ろうとすると、基本的なところに手間がかかり、AMPの実力を実感しにくいのが現状です。

そこで、本書ではWordPress本家のAutomattic社が開発している「AMP」プラグインを利用し、AMPを手軽に使える環境をセットアップします。そして、その上でAMPページを作成する方法を解説していきます。

WordPressに関してはプラグインの利用に必要になる部分など、必要最低限の解説しかしていませんのでご注意ください。この本は「WordPressレッスンブック」をAMPに対応させたものではなく、「AMPレッスンブック」という位置付けの一冊です。

AMPの表現力

本書ではAMPの主要なコンポーネントを活用し、次のようなAMPページを作成していきます。これまでのレッスンブックやデザインブックのサンプルページぐらいの構成であれば、まったく問題なく作成することができます。

本書で取り上げたコンポーネント

コンポーネントを利用することで、画像やビデオといった各種メディアの表示から、ナビゲーションメニューやカルーセル、フォーム、広告などの設定も可能になります。本書では次のようなコンポーネントについて取り上げています。

amp-img画像を表示
amp-videoビデオを表示
amp-audioオーディを埋め込み
amp-animアニメーションGIFを表示
amp-youtubeYouTubeのビデオを表示
amp-twitterTwitterのツイートを表示
amp-instagramInstagramの投稿を表示
amp-facebookFacebookの投稿を表示
amp-iframe汎用コンテンツを埋め込み
amp-carouselカルーセル/スライドショー
amp-lightboxフルスクリーンのオーバーレイ表示
amp-social-shareSNSのシェアボタン
amp-fit-textテキストを表示エリアの大きさに合わせて表示
amp-sidebar左右からスライドインするサイドバー
amp-ad広告を表示
amp-sticky-ad広告を画面下部に固定表示
amp-analyticsアクセス解析
amp-pixelトラッキングピクセル
amp-formフォーム
amp-accordionアコーディオンパネル
amp-image-lightbox画像のライトボックス
amp-fx-flying-carpetフライングカーペット

最後に、もう一度繰り返しになりますが、この本は「WordPressレッスンブック」がAMPに対応した本ではありません。AMPとはどういうものなのか、どの程度の表現力があるのかを確認できるレベルの本です。

そして、そこから先、AMPページを発展させていくのに必要な情報は盛り込めたのではないかと思います。