7-3 Webデザイン

Webインフォメーションアーキテクチャ

 Webサイトやアプリケーションにおける情報を整理し、ユーザーが情報を探しやすく、理解しやすくするための設計技術や考え方のこと。(ナビゲーション機能など)

 

Webサイトの構造設計

 サイト全体の情報構成を整理し、ユーザーが目的のページにスムーズにたどり着けるように、サイトの骨組みを設計すること。
R・ワークマンが提唱したLATCH法では、場所(Location)、文字(Alphabet)、時間(Time)、種類(Time)、種類(Category)、階層・順序(Hierarchy)の5種類で情報を分類し、組織します。
また、Webデザインにおける情報は次のように分類される。

直線型ある一定の流れで情報を構造化し、後戻りしない形態(入会や購入手続きなど)
階層型情報を階層(木構造)で構造化する形態(商品分類と商品詳細など)
Webリンク型情報同士が相互に参照(リンク)しあう形態
フォークソノミー型利用者が「タグ」をつけ加えることにより、分類することにより、分類する形態(SNSなど)

 

ナビゲーションの設計

 使いやすいWebサイトを構築するためには、利用者が現在のページや目的を把握でき、目的のページに移動する手段を理解するナビゲーションが不可欠です。

ナビゲーションの種類特徴
グローバルナビゲーション
(階層型ナビゲーション)
Webサイト全体の構造を把握するためのナビゲーションであり、主に最上位のカテゴリを表示し誘導する
ローカルナビゲーショングローバルナビゲーションの下位に置かれるもので、サブメニューとしての役割を果たす(分割された左側に配置されることが多い)
パンくずナビゲーション
(ブレッドクラムナビゲーション)
トップページから現在表示されている位置までを階層順に示したリスト
(取扱商品>AV機器>液晶テレビ>32インチ以下ような感じ)
サイトマップWebサイトの中にどのようなページがあるかを表示し、誘導するためのページ
サイト内検索キーワードを入力し、そのキーワードを含むサイト内へハイパーリンクを提供する機能

 

デザインの統一とCSS

 ユーザビリティ(使用性)を向上させるためには、Webサイト全体でデザインが統一されていることも重要になります。Webページの文字の大きさや色、行間といった視覚表現(レイアウト)はHTMLでも指定できますが、レイアウトが複雑になればなるほどHTMLは複雑でわkりにくくなります。そこで文書構造とレイアウトを分離するためにCSSが策定されました。

CSS(Cascading Style Sheet)は、文字のフォントや色、大きさといったデザインやレイアウトなどの表示形式を定義する仕組みです。「HTMLで記述された各要素をどのように表示するか」を指示するために用いられます。
HTMLが文書構造を、CSSがレイアウトを記述してデザインを統一していきます。

 

ユーザビリティの評価方法

 Webサイトのユーザビリティは、適切に評価されることになります。
専門家による評価方法と利用者による評価方法があります。

専門家による評価方法

ヒューリスティック評価方法経験則や既知のユーザビリティ原則に基づいて、ユーザビリティを評価する方法
認知的ウォークスルー法ユーザーのペルソナ(典型的な顧客像)やユーザシナリオもとに利用者の視点で評価対象を操作し、ユーザビリティを評価する方法

利用者による評価方法

回帰法利用者が評価対象を操作した後で、感じたことなどを思い出しユーザビリティを評価する方法
思考発話法使用者が感じたことを口にしながら評価対象を操作することによってユーザビリティを評価する方法
質問票利用者が評価対象を操作した後で、質問表に評価を記入し、それを集計してユーザビリティを評価する方法

調査方法

アンケート調査アンケート用紙に回答してもらう
インタビュー法対面で直接ヒアリングを行う
ユーザビリティテスト利用者に評価対象を使用してもらい、行動や発言などを観察して隠れた問題点を洗い出す