[この記事は Eric Lindley、プロジェクト マネージャーによる Accelerated Mobile Pages Project の記事 "Better galleries and forms in AMP" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]
ここしばらくの間に、AMP ライブラリに対していくつか細かな修正を行いました。これは細かいことではありますが、優れたユーザー エクスペリエンスを構築する上で大きな差を生むものです。
1 つ目の変更点は、新しい JavaScript メソッド（goToSlide）がサポートされ、ユーザーのタップやクリックで <amp-carousel>を特定のスライドに進めることができるようになったことです。これは、イメージ ギャラリーにおける UX の大幅な改善につながります。2 つ目の変更点は、<amp-selector>を使ってフォームにイメージ サムネイルを簡単に組み込めるようになったことです。これらは多くのデベロッパーにとってとても役立つ機能になると思われ、イメージを多用した報道や e コマースの商品ページといった形でユーザーに魅力的なコンテンツを提供することが可能になります。
goToSlide メソッドの使用: サムネイル付きカルーセル
これまで、<amp-carousel> ではイメージ ギャラリーのいくつかの重要な操作パターンがサポートされていませんでした。ユーザーはカルーセル内にあるイメージの数をどうすれば知ることができるでしょうか。カルーセル内に 8 つあるうち 5 番目のイメージに直接ジャンプしたい場合は、どうすればよいでしょうか。矢印アイコンに気づかない場合や、ページ内でアイコンが隠れている場合、ユーザーはカルーセルがスワイプ可能であることにどのようにして気づくでしょうか。
多くのデベロッパーやデザイナーは、ユーザーにイメージ サムネイルを提供することで、この問題を解決しています。サムネイルをタップした際に、指定したスライドまで自動的にカルーセルを進めるようにするのです。
![]()
goToSlide メソッドを使うと、この機能を AMP でも実現できます。ユーザーのタップ時にこのメソッドを呼び出すと、カルーセルを特定のスライドに進めることができます。
実装例
たくさんのイメージがある場合は、スクロールできる小さなカルーセルにサムネイルを入れることもできます。
![]()
このパターンは、ウェブの至る所で使われています。e コマースサイトの商品ページでは特に便利な機能です。
<amp-selector> の使用: フォーム+イメージ サムネイル
先ほどの 2 つの例は、ストーリーや臨場感のある体験にイメージが重要な役割を果たすユースケースに注目したものでしたが、ユーザーがフォームに値を入力するために選択肢を選ぶときにもイメージが役立つことがあります。<amp-selector> を使用すると、このようなマークアップを簡単に行え、意味合いに一貫性を持たせることができます。これにより、ユーザーはその状況における各選択肢の意味を理解しやすくなり、情報が伝わりやすく、魅力的で目的を達成しやすいサイトを実現できます。
![]()
試してみる
<amp-selector> と goToSlide メソッドを試してみるには、ドキュメント（goToSlide、<amp-selector>）を参照するか、AMP By Example（goToSlide、<amp-selector>）の実例をご覧ください。うまくできたことや、うまくできなかったことなどのフィードバックは、AMP GitHub レポジトリにお寄せください。皆様からのフィードバックをお待ちしています。
![]()
ここしばらくの間に、AMP ライブラリに対していくつか細かな修正を行いました。これは細かいことではありますが、優れたユーザー エクスペリエンスを構築する上で大きな差を生むものです。
1 つ目の変更点は、新しい JavaScript メソッド（goToSlide）がサポートされ、ユーザーのタップやクリックで <amp-carousel>を特定のスライドに進めることができるようになったことです。これは、イメージ ギャラリーにおける UX の大幅な改善につながります。2 つ目の変更点は、<amp-selector>を使ってフォームにイメージ サムネイルを簡単に組み込めるようになったことです。これらは多くのデベロッパーにとってとても役立つ機能になると思われ、イメージを多用した報道や e コマースの商品ページといった形でユーザーに魅力的なコンテンツを提供することが可能になります。
goToSlide メソッドの使用: サムネイル付きカルーセル
これまで、<amp-carousel> ではイメージ ギャラリーのいくつかの重要な操作パターンがサポートされていませんでした。ユーザーはカルーセル内にあるイメージの数をどうすれば知ることができるでしょうか。カルーセル内に 8 つあるうち 5 番目のイメージに直接ジャンプしたい場合は、どうすればよいでしょうか。矢印アイコンに気づかない場合や、ページ内でアイコンが隠れている場合、ユーザーはカルーセルがスワイプ可能であることにどのようにして気づくでしょうか。
多くのデベロッパーやデザイナーは、ユーザーにイメージ サムネイルを提供することで、この問題を解決しています。サムネイルをタップした際に、指定したスライドまで自動的にカルーセルを進めるようにするのです。
goToSlide メソッドを使うと、この機能を AMP でも実現できます。ユーザーのタップ時にこのメソッドを呼び出すと、カルーセルを特定のスライドに進めることができます。
実装例
<!-- Primary Carousel -->
<amp-carousel id="carousel-with-preview"
width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://example.com/path/to?image=10"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
<amp-img src="https://example.com/path/to?image=11"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
</amp-carousel>
<!-- Carousel thumbnails -->
<div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)">
<amp-img src="https://example.com/path/to?image=10"
width="60"
height="40"
layout="responsive"
alt="a sample image"></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=1)">
<amp-img src="https://example.com/path/to?image=11"
width="60"
height="40"
layout="responsive"
alt="a sample image"></amp-img>
</button>
</div>
たくさんのイメージがある場合は、スクロールできる小さなカルーセルにサムネイルを入れることもできます。
実装サンプルについては AMP by Example をご覧ください
このパターンは、ウェブの至る所で使われています。e コマースサイトの商品ページでは特に便利な機能です。
<amp-selector> の使用: フォーム+イメージ サムネイル
先ほどの 2 つの例は、ストーリーや臨場感のある体験にイメージが重要な役割を果たすユースケースに注目したものでしたが、ユーザーがフォームに値を入力するために選択肢を選ぶときにもイメージが役立つことがあります。<amp-selector> を使用すると、このようなマークアップを簡単に行え、意味合いに一貫性を持たせることができます。これにより、ユーザーはその状況における各選択肢の意味を理解しやすくなり、情報が伝わりやすく、魅力的で目的を達成しやすいサイトを実現できます。
実装サンプルについては AMP by Example をご覧ください
試してみる
<amp-selector> と goToSlide メソッドを試してみるには、ドキュメント（goToSlide、<amp-selector>）を参照するか、AMP By Example（goToSlide、<amp-selector>）の実例をご覧ください。うまくできたことや、うまくできなかったことなどのフィードバックは、AMP GitHub レポジトリにお寄せください。皆様からのフィードバックをお待ちしています。