UXを背景にコンポーネントに意味付けし整理しよう

設計が行き届いたウェブページを眺めると、ページの中に大まかなエリア定義がなされていることにすぐ気が付くと思う。エリアの役割を定義していくと、ヘッダやコンテンツエリア、フッタなどに分類整理される。部屋のように区分された面の中では、それぞれの役割を超えた情報は配置しない。

ウェブサイトはサイトストラクチャーに合わせてページの役割が定義される。例えば、サイトトップ、インデックス、詳細ページなど。

一例として、サイトトップでは下層ページへの繋ぎとして、カテゴリーで分類されたそれぞれの行先を簡潔に提示することがあるし、インデックスでは、情報が探しやすいように一覧性が重要になったり、詳細ページでは本文が見出しなどで整理され読みやすく整えられている必要がある。

ページを設計するということは、そのプロジェクトの戦略・戦術をページの中で具現化して、利用者に伝えられるようにするということだ。

さて、利用者の閲覧環境を振り返り、ウェブページがどのように表示されているか改めて確認すると、１画面で全てのページの情報が収まることはない場合がほとんである。当然、そのように設計しているサイトも存在するが、メンテナンス性だけでとらえて考えてみても、スクロールを前提としたページになりやすいことは明白である。つまり、利用者がサイト全体を一度に俯瞰して見ることはまれである。

2000年代初頭は、ページにおける定義されたエリアは横幅が固定で考えられていることが主流であった。例えばPC画面では、利用者の閲覧環境の統計からページの幅について検討されていたが、固定値であるがゆえに、一度に画面に配置される情報の量を調整しやすく、それゆえ、サイトの目的に対して様々な目標が、乏しい面積の中に押し込まれることがあった。情報発信者側の思惑が詰め込まれすぎたページは、利用者に対して、情報を探させたり・読ませるための配慮が乏しいといえる。

モバイル端末が広く一般に普及し始め、ウェブサイトはもはや様々な画面サイズで見られるようになった。運用側の情報発信も様々なデバイスへの配慮を行う必要がでてきて、コスト面・メンテナンス性に問題が発生した。一つの解決策として、レスポンシブデザインでのページ設計が注目され、2015年ごろには日本でも一般的な設計スタイルになった。

ページをレスポンシブ化するにあたっては、HTML・CSSがワンソースで様々な画面サイズに対応させる必要がある。そのため、柔軟にレイアウトを可変させやすい構造であることがポイントになっている。そのため、ページ幅の変化に対応しやすい構造になっているとが要求される。傾向としては、１画面あたりに表示される情報の量は少なく、スクロールを前提としたページ設計になる。

利用者への情報提示は、１画面の中ではよりシンプルになってきてるといえるかもしれない。ページに配置されたコンポーネントに、明確なコンセプトが現れていることが望ましい。例えば、カスタマージャーニーマップで考えられた必要な体験を提供できるように、コンポーネント一つ一つにUXのテーマを明確にさせていく必要があるといえる。

学ばせたい、探させたい、気付かせたい、などテーマを与え整理すると、より意味のあるページデザインになり情報資産があがると考えられる。