2つの画像を並べて比較表示するAMP イメージスライダーの特徴と設定方法

AMP 公式ブログが、2つの画像を一つの画像スペース内にオーバーレイでスライド表示して、両者を比較することのできる機能、AMP イメージスライダーを正式にリリースしたことを発表しました

目次 - Table of Contents

AMP イメージスライダーの特徴

2つの画像を一つの画像スペースに重ねて表示して、垂直に表示されるスライドバーを動かして比較することが可能です。ユーザーは、クリック、タッチ、ドラッグなどの操作でバーを動かして、画像を比較できます。

以下はAMP公式ブログの説明を訳したものです。（多少意訳しています。）

全ての端末、プラットフォーム上で共通の操作による動作
ビルトインアクセシビリティ：他のAMPコンポーネントと同様に、アクセシビリティを考慮して設計されています。コンポーネントは、キーボードのナビゲーション、スクリーンリーダーのどちらでもアクセスできます。
コンポーネントのカスタマイズが可能（ヒントも提供）
キーボードナビゲーションのステップサイズ設定や画像に比較ラベルの追加などインターラクションモデルのカスタマイズも可能

上のGIF画像のようにビフォー・アフターなどの比較などにも適している機能です。

設定・導入方法

セットアップ

AMPページのヘッダー（ <head>タグ内）にamp-image-sliderのコンポーネントをインポートする以下のコードを設置します。

基本的な設定方法

2つの画像 amp-image を amp-image-slider タグ内に設置します。1番目の amp-img が左側の画像、2番目が右になります。

<amp-image-slider width=”300″
height=”200″
layout=”responsive”>
<amp-img src=”/img/canoe_900x600_blur.jpg”
alt=”A blurry image about canoeing”
layout=”fill”></amp-img>
<amp-img src=”/img/canoe_900x600.jpg”
alt=”An image about canoeing”
layout=”fill”></amp-img>
</amp-image-slider>

amp-image-slider コンポーネントは、画像のラベル用に2つの<div>要素を含めることができます。ラベルは、画像の上にオーバーレイ表示されます。左側の画像のラベルには、first アトリビュート（属性）、右はsecond アトリビュートが必要になります。デフォルトでは、ラベルは左上と右上の角に表示されます。

ラベル付きのイメージスライダーのコード例：

<amp-image-slider layout=”responsive” width=”100″ height=”200″>
<amp-img src=”/green-apple.jpg” alt=”A green apple”></amp-img>
<amp-img src=”/red-apple.jpg” alt=”A red apple”></amp-img>
<div first>This apple is green</div>
<div second>This apple is red</div>
</amp-image-slider>

矢印のヒント

矢印のヒント（arrow hint)は、デフォルトで常に表示されます。ユーザーがクリックやタッチして、スライダーを操作すると、ヒントはフェードアウトします。スライダーがビューポート内に残っていて、再び戻るとヒントは再表示されます。 disable-hint-reappear アトリビュートを加えると、ヒントの再表示が無効になります。

その他、ヒントのカスタマイズや初期表示のスライダーバーを位置を中央からずらしたり、ステップサイズを変更することもできます。詳しい設定方法と例は AMP by Example に掲載されています。

AMPイメージスライダーを設定してみました

ネイティブAMP対応のブロギングライフBLOGにイメージスライダーを設定してみました。パソコンでもモバイルでも、無事にイメージスライダーが動作しました。しかし、動作確認後、念の為、AMPのバリデーションテストを行ったところ、amp-image-sliderタグ内に<br>タグが混在していたため、不合格となりました。動作は問題なくしていても、brタグが混在していると、AMPのバリデーションはエラーとなることを知りました。AMPは仕様に厳しいです。

brタグが混入した理由は、WordPressの自動整形機能によるものです。自動整形機能を無効にする設定を行って、AMPテストしたところ、無事にバリデーション合格となりました。brタグの自動挿入を無効に設定する方法については、以下の記事をご覧ください。

WordPress でpタグやbrタグの自動挿入を無効に設定する方法

備考：
カスタマイズなどを試してみたのですが、カスタマイズの設定は動作しないことがありました。

実際に設定してみた感想

AMPイメージスライダーの機能は、ビフォーアフターなどの比較画像を表示するのに最適だと思います。Eコマースのサイトなどでの需要もかなりあって、リクエストを受けて、イメージスライダーを開発したのではと推測しています。

イメージスライダーは、AMPページでのみ動作します。AMP用と通常頁用で分けて、ページの制作をするのは手間が余分にかかるので、ネイティブAMP対応サイトに適していると思います。または、モバイルのAMPページの人気やコンバージョン率が高いサイトであれば、AMPページ専用にAMPイメージスライダーを導入するのも選択肢の一つです。

AMPでは多数のコンポーネントが用意されています。今回正式リリースされたイメージスライダーの様にユーザーの利便性を高める可能性のある機能を備えたコンポーネントも色々あります。ネイティブAMPが正式導入されると、コンポーネントの利用も増えてくると予想しています。

AMPイメージスライダーについての簡単な紹介と設置してみた例などをYouTubeで紹介しています。