『Webデザインとコーディングのきほんのきほん』
マイナビブックス・Manateeで販売中の『Webデザインとコーディングのきほんのきほん』から、書籍の内容を一部公開！
Webデザインに興味のある方やこれから学ぶ人におすすめの1冊です。

ユーザーの経験値を利用した構成

※書籍のChapter3『Webサイトデザインのセオリー』/Section07『ユーザーの経験値を利用した構成』からの抜粋です。

見る側がどのような知識や経験を持っているかで、そのデザインの受け取られ方は全く異なります。
誰でも無意識に自分のこれまでの経験に照らし合わせて、見たものを判断するからです。
Webサイトも同様に、ユーザーはこれまで使ってきたさまざまなサイトの使用感をもとにページをブラウズします。

Webサイトのレイアウトパターン

書籍などの印刷物と比較するとインターネットの媒体としての歴史はそれほど長くはありませんが、それでも多数のWebサイトが利用される現在、「使う」ことを前提としたいくつかの共通した約束ごとが存在します。
新しいWebサイトを訪問した際には、ユーザーは無意識のうちにこの約束ごとに則った操作性を期待するのです。
アーティスティックなサイトでオリジナルの表現が求められる場合を除き、コーポレートサイトやサービスのPRサイトでは、このユーザーの期待を裏切らないことを意識して構築することが必要です。
Webサイトの基本的な約束ごとの1つに、レイアウトパターンがあります。
多くのWebサイトは、逆L字型、3カラム型などナビゲーションの位置とエリアの役割分けで、いくつかのレイアウトパターンに分類されます。
これらのパターンに合わせてレイアウトを考えることで、ユーザーはほかのページへのメニューリンク位置や、エリア内にレイアウトされている内容の意味などを一見して判断できるようになります。
これらのレイアウトパターンのいずれかに近くなるように構成すると、ユーザーのページ操作に関する理解を助けることができるでしょう（図01）。

パーツのルールを明確にする

文字に関する基本的なルール

文字のサイズを変えることで、それぞれの文章が持っている役割を伝えることができるようになります。
たとえばページ内容を端的に示すタイトルはページ内で最も大きい文字サイズでレイアウトし、重要であることを訴求します。
大見出し➡小見出しとタイトルとしての文字の重要度の下降に比例して文字サイズが変化し、コンテンツ本文の文字サイズを最も小さく設定すれば、ユーザーの視線を大きいものから小さなものへ自然と誘導する結果になります（図02）。

リンクに関する基本的なルール

リンクに関する動作も、Webサイトの基本的な約束ごとを考慮して設定したいことの1つです。
パソコンでの操作時にマウスオーバーすると文字や画像の色が変化するように構成することで、その領域にリンクが設定されていることをユーザーに知らせることができます（図03上、中）。
また、HTMLの基本的な仕様としてリンク設定されている文字ブロックは下線が引かれて表現されることから、「下線がある文字はリンク」と認識されている場合も多いでしょう。
逆に、リンクの設定をしていない領域の文字に強調のために下線を追加したり、特定の領域がマウスオーバー時に色が変化するなどリンクを想定させるような表現は、ユーザーを混乱させることになるため避けたほうが良いでしょう（図03下）。

ナビゲーションに関する基本的なルール

ナビゲーションに関してもいくつかの約束ごとが存在します。
たとえば前述の逆L字型レイアウトでは、上部にあるナビゲーションがサイト全体の主要カテゴリへのグローバルメニュー、サイドにあるナビゲーションはカテゴリ内のローカルメニューを掲載する構成が一般的です（図04上）。
この構成を逆にしてしまうと、ユーザーはサイト内のカテゴリ分類が把握しにくくなってしまうでしょう（図04下）。 また、ヘッダーエリア左上にサイトのタイトルロゴをレイアウトする場合は、このロゴをクリックすればサイト全体のトップページに戻ったり、1ページが長いコンテンツの場合はページ最下部に「ページトップへ戻る」ボタンを配置しておくなど、サイトのブラウズを補助する一般的なナビゲーション設定がなされていないと、ユーザーにとって使いにくいサイトという印象を与えてしまいます。

経験値から直感的に理解できるデザイン

リンクやナビゲーションなどユーザーがこれまでWebサイトを利用した経験から期待するルールの1つに、要素の外観から推測する役割も挙げられます。
ユーザーは眼に映る要素の色や形・デザインと、これまでに見たことのある似た外観のものを無意識に参照し、同じ機能を期待するものです。
現実世界に置きかえると、たとえば同じ「石」という素材を使用したものでも図05上の石に「座る」機能を想像する人はほとんどいないでしょう。
でも図05下の形やデザインなら「座る」ためのものであることがわかります。 このようにユーザーのこれまでの経験値から直感的に機能がわかるようにするデザイン概念は、「シグニファイア」とも呼ばれています。
操作することを考慮した構成が必要なWebサイトデザインでは、このシグニファイアを活用することがとても重要なのです。



マイナビブックス・Manateeで販売中の『Webデザインとコーディングのきほんのきほん』から、書籍の内容を一部公開！
次回はPart2/Chapter1『Web制作のフローと制作のための準備』の一部内容を公開予定です。