スマートフォン – 横スクロールの要素をアニメーションで伝える

スマートフォンサイトのデザイン実装で、横長の要素を画面幅からハミ出して「scroll-x:auto;」させたいシーンってたまにありますよね。
でも、上記の表現をしようとすると、スマートフォンの画面サイズによってはキリの良いところで要素が切れてしまって、ハミ出た部分の要素に気付かれない…という恐れがあります。

実際、自社サービスのスマホサイト実装で上記のような表現をするシーンがあり、社員から「なんとかして欲しい」という要望がありました。
自分の中では100%の答えではないのですが、ある程度認知はされるかな、というレベルの回避策が実現できたので、紹介したいと思います。

先ほどお話ししたのは、WebikeカードTOPページの「Webikeカードご利用例」部分です(スマートフォンサイトの方です)

tableなので、レスポンシブで表現するのも難しく、「overflow-x:auto;」で横スクロールする方法を選択しました。
しかしそのままだと、スマホによっては右側にコンテンツの続きがあるのか分かりにくく、見落とされてしまう場合があります。
そこで、下の画像のような表現方法を思いつき、実装してみました。

表示領域がtableに近づくと、矢印がひょこっとアニメーションする仕組みになっています(実際にスマートフォンでWebikeカードTOPページを見て頂けると分かりやすいと思います)
アニメーションすることにより、閲覧者の意識が一度そちらに向くので、ハミ出したコンテンツに気付かれる確率が上がります。
必要な部分のソースを抜粋&分かりやすく簡素化すると

html

css

javascript

※jQueryの読み込みが必要

矢印はcssの疑似要素「:after」を「transition」でアニメーションさせています。
アニメーションの部分はcss、スクロールでの表示非表示・1度タップして動かした場合は表示させないなどの表示処理はjavascriptで行っています。cssのposition・contentの中身の変更や、javascriptでの表示タイミングなどをいじれば、いろいろと応用が効きそうですね。

アニメーションは閲覧者の注意を払うのにはとても効果的だと思います。ただ、多用は厳禁です。鬱陶しいサイトになってしまうので(笑)
あくまでも部分的に使うのが好ましいです。

同じようなことでお困りの方がいらしましたら、是非実装してみてください。

リバークレインでは、サイト運営デザイナーを募集しています。

コメントは利用できません。

求人採用のエントリーはこちら

リバークレインに応募する