CSS Scroll Snapは横送りの演出より先に各項目を通常の順で読めるようにする

CSS Scroll Snapを使って横送りの一覧を作るときは、scrollの止まる位置を決める前に、各項目が通常の順で読めるかを確認します。Scroll Snapは、scroll containerの中を動いたあと、指定したsnap位置へ揃えやすくする仕組みです。写真、商品、service、記事の案内を横に並べる演出には使えます。しかし、横へ送らないと本文やlinkを読めない構成にすると、見せ方が内容より先に立ちます。まずHTMLの順に読み、linkを開ける状態を作り、そのうえでscrollの位置を揃えます。

CSS Scroll Snap Module Level 1は、scroll containerにscroll-snap-typeを指定し、その中の要素へscroll-snap-alignを指定してsnap位置を作る仕組みを示しています。この仕様はCandidate Recommendationです。scrollの終点を揃えることを定めますが、どの項目を載せるか、読者に何を選ばせるか、どのbrowserで採用するかまでは決めません。

scroll containerと項目の役割を分ける

scroll-snap-typeは、scrollする範囲を持つcontainerへ指定します。xなら横方向、yなら縦方向、bothなら両方向を対象にできます。mandatoryはsnap位置へ揃えるよう求め、proximityは近い場合に揃える方法です。一方、scroll-snap-alignは、containerの中に並べる項目ごとに、どの端や中心をsnap位置として扱うかを示します。containerと項目を同じselectorで扱うと、どこをscrollさせ、どこへ止めるかが分からなくなります。

たとえば、三つのserviceを横に並べる場合を考えます。containerには横scrollとscroll-snap-typeを置き、各serviceにはscroll-snap-alignを置きます。serviceの中には名称、短い説明、link先をHTMLの順に置きます。写真を先に見せることはできますが、写真だけを横へ送らないとservice名が読めない形にはしません。scroll positionは読み方を補助する手段であり、案内文の代わりではありません。

mandatoryとproximityは止まり方の好みで決めない

mandatoryを使うと、scroll位置はsnap位置へ揃いやすくなります。一覧を一枚ずつ見せるときには整って見えます。ただし、項目の高さや幅が大きい場合、読者が途中の説明へ止まりにくくなることがあります。proximityは、snap位置の近くで止まったときに揃える方法です。毎回きっちり一項目へ合わせたいのか、長い説明を自由に読みたいのかで選びます。

仮に、記事の概要が短いcardなら、一枚ごとに揃える見せ方を採りやすい。反対に、料金条件や注意事項まで入る横長のcardなら、途中で止まり、本文とlinkを確かめる余地が必要です。mandatoryを指定して見た目が整ったとしても、重要な文の途中へ止まれないなら、読者は内容を読み切れません。propertyの名前から選ばず、項目の長さと読む行為から決めます。

横送りだけを入口にしない

horizontal scrollを使う画面では、最初の項目だけを見て、残りがあることに気付かない人がいます。端に次のcardが少し見える演出だけへ頼らず、見出し、項目数、前後button、一覧pageへのlinkのどれが必要かを決めます。swipeで横へ送れることと、次の案内があると分かることも別です。

前後buttonを置くなら、buttonはscroll positionを動かす部品、card内のlinkは別pageへ移動する部品として役割を分けます。buttonを押したときに一つ先のcardへ進むのか、複数を送るのか、最初と最後でどう扱うのかを決めます。buttonがなくてもmouse wheel、keyboard、touch操作で読める場合がありますが、それだけで操作の入口を十分だと決めません。実際の画面で、初めて開いた人が次の項目とlink先を見つけられるかを確認します。

横幅が狭い画面では通常の並びを残す

mobileでは横送りが自然に見えることがありますが、本文の幅が狭いままcardを横に並べると、数語ずつ読ませる画面になりがちです。image、見出し、説明、linkのどれを各cardへ置くかを絞ります。説明が長くなるなら、横scrollを続けるより、縦へ並べるか詳細pageへ進ませる方が読めます。

CSSが反映されない場合にも、HTMLの順で各項目が続くようにします。scroll snapのために本文の順序をscriptで入れ替えたり、linkを画面外へ置いたりしません。styleを外してもservice名と説明とlink先の関係が読めれば、scrollの演出を採用しない画面でも情報が残ります。対応を確認できないbrowserだけを理由に、案内自体を消す必要もありません。

制作を頼むときは「横scrollのcardを作ってください」だけでは足りません。各cardの項目、文字量、link先、scrollする方向、buttonを置くか、mobileで縦並びへ替えるか、確認する画面幅を渡します。制作側はCSSとscriptを実装できます。どのserviceを並べ、どの説明を短くし、読者に次に何を選ばせるかはsite側が決めます。

確認する順序

最初の一手は、横送りにしたい項目を縦へ並べた状態で読むことです。説明が長く、link先も分かりにくいなら、scroll snapを足しても直りません。内容の順と入口を決めたあとに、scrollの止まる位置を調整します。CSS Scroll Snapは読者を次の項目へ案内するために使い、読者から内容を隠すためには使いません。