デザインと情報への到達容易性
2024年12月26日
Webサイトの制作が主流になり始めた2000年代初頭のPCのディスプレイサイズは「1024×768(XGA)」と小さかったため、狭いレイアウトに多くの情報を掲載する必要がありました。
そこで、画像を切り替えるスライダー、複数の画像やコンテンツをスライド切り替えで表示するカルーセル、タブをクリックすることでコンテンツを切り替えるタブメニューなど、様々な手法が生み出され、利用されてきました。
しかし、これらのデザイン手法は一定時間ごとの自動切り替えか、またはユーザによる操作が必要な事が多く、操作に不慣れな場合は、閲覧者に気付かれない可能性があります。
特に人間の認知機能には限界があり、「見えない部分は存在しない」と認知する可能性が高く、例えば、スライダーの切り替え時間が少し長めに設定されていた場合、多くのユーザは切り替わることに気が付かない可能性があります。
話の流れが逸れますが、タブメニューの由来を明確に記された資料はありませんが、タブメニューはインデックスシートの概念が取り入れられているのではないかと感じています。
PCでの閲覧を考える
2024年時点での主流となっているディスプレイサイズは、Statcounterの調査によると「1920×1080(FHD)」「1366×768(FWXGA)」「1536×864」のようで、2000年代初頭と比べるとディスプレイサイズは1.5倍から2倍程度に大きくなっていることが分かります。
ディスプレイサイズは大きくなっているのに、ディスプレイサイズが小さかった頃に生み出されたデザイン手法を利用し続けていることは、現在のユーザーエクスペリエンスに考慮していない可能性を認識する必要があると考えています。
また、現在これらのデザイン手法は、少ない情報を装飾をして誤魔化すため、ページ全体の縦幅を抑制するために使われている傾向があります。
「昔から使われているデザイン手法だから」と安易に利用するのではなく、状況によっては、そのデザイン手法の再評価も含めて検討する必要があると考えます。
また、デザインの都合上、スライダー、カルーセルを使用する場合は、自動再生ではなく、閲覧者に操作を促すことで、情報の見落としを防ぐなどの対策が必要です。
スマートフォンでの閲覧を考える
現在はPCではなくスマートフォンの利用が増えておりますが、スマートフォンの画面サイズは「360×800」程度が主流で、PCのディスプレイに比べて半分以下のサイズになります。
スマートフォンの画面サイズでは誤タップを防ぐため、要素間の距離、リンク、ボタンなどは指でタップしやすいサイズを意識する必要があります。
そのため、カルーセルのような要素を多数掲載した場合は、操作が困難になる可能性が高くなります。ただ、ディスプレイサイズが小さかった時代に生み出されたデザイン手法は、スマートフォンでの閲覧に適している場合があり、それらも加味して検討する必要があります。
情報へのアクセス性を考える
視覚障害者を含め、様々な利用者がWebサイトを閲覧する可能性を踏まえると、情報へのアクセス性を優先した場合、ページ全体の縦幅が長くなったとしても、スクロールを前提にしたレイアウトが重要ではないかと感じています。
スクロールは多くの方が行える操作であり、デザイン手法による一部の情報が不可視ならずに、全ての情報へのアクセス性が可能になります。
SNSの多くは無限スクロール機能が実装されており、延々とスクロールする事に慣れている可能性が高いと判断できます。
また、視覚障害者に考慮されていないギミック、JavaScriptを利用したデザイン手法の利用を最小限にとどめることでページを表示するパフォーマンスの低下を抑制することが期待できます。
これまでの話の流れから「スクロールが最適解」と考えがちですが、スクロールでの閲覧は情報へのアクセス性に優れているものの、ページ全体として情報過多の状態になり、見つけたい情報になかなか辿り着けない可能性が否定できません。
ギミックがないデザインが最適解ではない
Webサイトにギミックがあることで見にくくなる一方で、Webサイトにギミックがないことで、全体的に動き、メリハリが生まれず単調な印象を与えかねません。
それにより、Webサイトの運営側が見せたい情報が目立たずに、他の情報に埋もれてしまう可能性は否定できません。デザインとは、使いやすさを前提に設計された機能美、視覚的な美しさを前提に設計された装飾美のバランスの上に成り立っています。
シンプルだから良い、凝ったデザインだから良いということではなく、デザイン性、求められている機能、ユーザエクスペリエンス、表示のパフォーマンスなどを考慮し、精査する必要があります。
デザイン手法の再評価
スライダーの場合
スライダー上に左右に切り替えられる矢印を設置することで、視覚的に左右に要素が隠れていることを明示することができます。
また、スライダーを静止画に変更し、静止画上部にキャッチコピーを重ねることでビジュアルとしての機能を維持することが可能になります。
カルーセルの場合
Eコマースでは商品写真を表示するのにカルーセルは有効に機能すると考えます。
スライダーと同様にカルーセル上に矢印を設置することで、視覚的に左右に要素が隠れていることを明示することができます。また「商品写真をみたい場合は左右にスワイしてください」などの説明文を併記することで、よりデザインの意図が伝わりやすくなるでしょう。
タブメニューの場合
タブメニューは項目が増えると横方向に伸びる性質があるため、タブメニューではなく、タグとして各要素をボタン上に変更することで、将来的な要素の増加に備えることができます。
また、上下に展開するアコーディオン形式に変更する、または、タブメニューとアコーディオン形式を併用することで、表示範囲の狭いスマートフォンでは有効に機能する場合があります。
デザインのトレードオフ
スライダー、カルーセル、タブメニューを利用する場合、JavaScriptの利用が必要になる場合がありますが、ページを表示する際のパフォーマンスに少なからず影響を与えます。そのため、JavaScriptの利用は最小限に留めつつ、数年前であればJavaScriptの利用が必須だった機能も技術の進化により、CSSのみで対応可能な場合があります。
最新情報に常にアンテナを張り、これまで利用されていた技術がどのように変化しているか知る努力を続ける必要があります。
また、JavaScript、CSSを多用して複雑なアニメーションを作るよりも、結果として動画ファイルやアニメーションGIFを利用した方が良い場合もあるでしょう。アニメーションGIFは古くから利用されている技術ですが、使い方次第で魅力的な見せ方につながる場合があります。
そして、状況によっては、ユーザテストを行い、ユーザがデザインを意図通りに理解しているか、直感的に操作ができるかなどの確認作業が重要になります。
時代とともに変化するメタファー
古くはメタファーとして、保存にはフロッピーディスク、問い合わせには電話機、メールのアイコンが使われていましたが、電話機は受話器に、メールは紙飛行機に変化しつつあります。
しかし、スマートフォンの浸透により、将来的に受話器のアイコンでは通じなくなる可能性が高いと感じています。また、現在、メール、電話以外にメッセージアプリ、タスク管理ツール、Web会議システムなど、様々な連絡手段が誕生しました。
それにより、世代間のメタファーや共通認識が変化しており、アイコン化が難しい時代に突入しています。
まとめ
ディスプレイサイズが小さかった頃に誕生した様々なデザイン手法はディスプレイサイズやユーザーエクスペリエンスの変化とともに再評価する必要があると感じています。
過去に誕生したデザイン手法は、画面サイズに制約があるスマートフォンで再利用できるかもしれませんが、PCとスマートフォンでは操作の概念が異なるため注意が必要です。
そして、利用する側の人間は情報過多でも見落としますが、スマートフォンのように表示範囲が狭くても見落とします。結局、何をしてても見落とします。
そのため、「文字色を赤色、太字にしておけば大丈夫」と安易に判断せずに「人間は情報を見落しやすく、見てほしい情報ほど見ようとしない」を前提に様々な対策を考える必要があります。
お問い合わせ
