【サンプル付】AMPのUIを大解剖!サイドメニュー、カルーセル、画像ギャラリーetc. のUI実例集

JavaScriptが使えないAMPページ(※1)では「画像ギャラリー」や「サイドメニュー」は実装できないのでしょうか?
いいえ、AMPページでも実装できます。

新しい技術のため誤解や謎の多いAMP(Accelerated Mobile Pages)。実際のサンプルとともにAMPページでも実現できるUIを大解剖しました。

※1  AMPページではAMPプロジェクトが提供するJavaScriptに限り使用できます。

 

目次

①サイドメニュー(サイドバー)
②アコーディオン
③カルーセル
④スライド

注) このページの目的はUI論ではないため、各UIの良し悪しは議論しません。

 

①サイドメニュー(サイドバー)

AMP(Accelerated Mobile Pages)サイドバー・サイドメニュー | amp-sidebar

ハンバーガーメニュー(3本線のアイコン)をタップ/クリックすると、画面脇からスッと出てくるメニューを一度は使ったことがあるでしょう。画面制約のあるスマートフォン向けウェブサイトではサイドメニューは必須のUIですが、AMPページでも実現できます。

サイドバーのサンプルAMPページ
https://www.craneto.co.jp/examples/amp/sidebar/

※iPhone / Android 等のモバイル端末より閲覧ください

 

②アコーディオン

AMP(Accelerated Mobile Pages)アコーディオン | amp-accordion
そのまま表示すると縦長になってしまうコンテンツを折りたたむことでコンパクトに表示することができます。
カテゴリー一覧メニュー、よくある質問と答え(FAQ, Q&A)といったページでよく使用されます。

アコーディオンのサンプルAMPページ
https://www.craneto.co.jp/examples/amp/accordion/

※iPhone / Android 等のモバイル端末より閲覧ください

 

③カルーセル

AMP(Accelerated Mobile Pages)カルーセル | amp-carousel

AMPに関心があるなら100%ご存知でしょう。Googleモバイル検索に出てくる「アレ」です。
限られた表示エリアでも、複数のコンテンツをスムーズに水平方向(横方向)にスライドさせて表示することができます。垂直方向(縦)のアコーディオン、水平方向(横)のカルーセルは画面制約のあるスマートフォンでは定番UIです。

カルーセルのサンプルAMPページ
https://www.craneto.co.jp/examples/amp/carousel/

※iPhone / Android 等のモバイル端末より閲覧ください

 

④スライド

AMP(Accelerated Mobile Pages) 画像ギャラリー

カルーセルと同様に水平方向(横)のUIです。
連続かつスームズに複数コンテンツを表示するカルーセルに対し、スライドはコンテンツを1つ1つ表示する点が異なります。スライドは画像ギャラリーに使われます。

画像ギャラリー(スライド)のサンプルAMPページ
https://www.craneto.co.jp/examples/amp/caroursel/

※iPhone / Android 等のモバイル端末より閲覧ください

 

あとがき

AMPでは制作者独自のJavaScript(jQuery)を使用できないため、各UIともに従来の方法では実装できません。AMP専用のコンポーネントを使用する必要があります。コンポーネントは機能・デザイン・動き(アニメーション)に関してカスタマイズできることは極めて限定的で、基本的に各コンポーネントが提供する範囲の実装となります。

コンポーネントの中には、必ず直下の子ノードにsectionタグを使わなければならない、といったマークアップ制限さえあります。既存のウェブページをそのまま移植するのは(ほぼ)不可能なので、AMP対応には実装前の設計がとても重要になります。

クライアントサイド(フロントエンド)だけでなく、ときにサーバサイド側の連携も必要で、中〜大規模サイトでは想像以上に難しいという点だけは留意しておいた方が良いでしょう。現場のエンジニアさんにあまりカジュアルにお願いすると怒られるかもしれません…。