スクロールに呼応してコンテンツを小出しにする演出

いわゆる「ランディングページ」やホーム (トップページ) などで、ユーザーのスクロール操作に呼応してコンテンツの塊 (写真やキャッチコピー、メニュー、行動喚起、など) が小出しに出現する演出のウェブページを、ここ数年よく目にします。さりげないアニメーション効果 (フェードインやスライドイン) を伴った、「パララックス効果の控え目なもの」と捉えることができますが、漠然とスクロールダウンしているユーザーに対しても個々のコンテンツの存在をアピールできる (ふと目に留めてもらえる) 効果が期待できそうです。

こうした演出は、ユーザーがコンテンツを上から下まで「順序よく」「連続的に」見ることが前提となっています。インタラクション設計においては、マウスホイールやタッチジェスチャによるスクロールダウンが強く意識されているのでしょう。その反面、それ以外の利用文脈を持つユーザーへの配慮が忘れられがちな印象を受けます。

たとえば、キーボード操作への配慮です。上肢障害や怪我などでマウスを使えないユーザーや PC 操作に精通しているパワーユーザーは、しばしば [Tab] キーでフォーカス可能な要素 (リンクやボタンなど) を辿る形でページ内を情報探索しようとします。「順序よく」「連続的に」ではなく、いわば「飛ばし読み」に近い操作ですが、そもそも一般的にウェブページというのは斜め読み/飛ばし読みされやすいものなので (ユーザーにとってはあくまで自身の課題を解決する、あるいは目的を達成することが第一であって、サイト運営側がどんなメッセージを届けたいかということは、ユーザーの関心としては二の次です)、このような利用法はよくあることと言えます。

ところが実のところ、この手のウェブページの多くは、[Tab] キー操作によるフォーカスの視覚表現 (可視化) がまったくできていないように見受けられます。どういうつもりか、ブラウザがデフォルトで提供しているフォーカス表示すら敢えて無効にしてしまっている実装も珍しくなく、残念です。いくつかの良心的なサイトでは、ブラウザのデフォルトのフォーカス表示をそのまま生かしており悪くない実装ではありますが (ユーザーがフォーカス表示のスタイルをカスタマイズできる余地が、一応は残されているという意味で)、それでもフォーカス箇所と同じビューポート内に視差効果が唐突に割り込んでくる形になるため、視覚的なインパクトにつられて目を奪われることで、フォーカスがどこにあるのかを見失いやすいように思います。

多様なユーザーにストレスなく利用してもらうためにも、パララックスが持つアクセシビリティ面での負の要素を補完すべく、意図的なデザインとして、より積極的にフォーカスの可視化表現を採り入れてもよいのでは、という気がします。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加