Webユーザビリティ 永田研究室 仲田葉子 Webサイト制作の基本－企画－ Webサイトの目的を明確にする 主な利用者像を把握する 掲載する内容 結局は中身が肝心 Web以外よりも速く情報、サービス、商品を入手できる。 カタログや広告よりも詳しい情報、新しい情報を入手できる。 リピーターを満足させる内容に サイトの名前とドメイン名は分かりやすく 使用する技術／サーバを適切に 制作／メンテナンス計画を前もって立てておく 全体構成 訪問者の側に立った構成にする リンク関係を単純にする 各ページを一話完結にする 目的地までのクリック数を減らす ナビゲーションバー 移動に使う機能、主として他のページへのリンクなどをまとめ、 1クリックでそのページにジャンプできるようにする。 目次・索引・サイトマップ 数十ページ以上の規模になったら、全体を見渡せるように目 次・索引・サイトマップを用意するのが親切。 トップページのデザイン 訪問者に信頼感を与える 組織の正式名称 組織の所在地・問い合わせ先 そのページ自体のURL 最終更新日・更新履歴 訪問者を待たせない トップページでプラグインや大きな画像を使わない 「Enter」だけのページを作らない サイトに関係のない「ロゴ」は貼らない 訪問者を疎外しない 表示環境を限定する言葉を入れない 「会員登録」を前面に出さない 目的の場所にスムーズに案内する 個々のページのデザイン ページサイズの基準 画面をスクロールしないでも見える範囲 各ページの構成 本文の他に、ナビゲーションとフッタを設ける。 ページタイトルの重要性 ブラウザのブックマークに登録される。 ロボット型の検索エンジンでは、タイトルに記載されて いる言葉に対して高いポイントを付けるため、内容を よく表したタイトルを付ける。 オンライン向けの文章の組立 概要や結論を最初に持ってくる ぺージをスクロールしないでも内容が分かるように、肝心の部分を最初 に持ってくる。また、検索エンジンで全文検索した場合、検索結果にペー ジの先頭部分の文字（全角100字程度）がサマリーとして表示される場 合があるので、ページの最初には重要な文章を持ってくる方が得策。 箇条書きを使う 1文1文を短くする 長文には大抵複数の事柄の説明が含まれる。これを短い文章に分け、 1つの文章では1つの事柄のみを説明すると、内容が理解しやすくなる。 区切りを入れる 長文が続けて入力されていると読みづらいので、段落ごとに改行する。 また、内容の区切りごとに小見出しを入れると、読みやすくなる。 画像の扱い 画像の必要性 画像には、alt属性で代替テキストを付ける Webサイトを見る人全員が、画像を見ている訳ではな い。画像表示をOFFにしている場合もあれば、音声出 力ブラウザを使っていて画像を見ない場合もある。 よって、画像がなくても内容が分かるようにする。 サムネイルを使う 本文を画像にしない 背景画像は本文が読みやすい配色にする。 チェック 使い勝手に問題がないか （各段階) 環境に依存していないか （ぺージデザイン の段階) 画面解像度や色数を変える ブラウザを変える ダイヤルアップ接続で確認する HTMLの文法に誤りがないか (最終段階) 制作上の注意点－URL－ 覚えやすいドメイン名を付ける 覚えやすい名前を付ける 間違えにくい名前を付ける 間違ってもたどりつけるようにする 分かりやすいディレクトリ・ファイル名を付ける URLは変えない サイトを移転しない ページを移動/削除/リネームしない リンク 「工事中」のページにリンクしない リンクエラーをなくす リンク先を明確に リンク先を具体的に書く リンク先を別の行に書く リンク色とスタイルをむやみに指定しない リンク先を別ウインドウに表示するかどうか フォント フォントサイズをあまり小さくしない フォントサイズのポイント指定は慎重に カスケーティングスタイルシートを使って、フォ ントサイズが指定すると、ブラウザでフォント変 更できなくなるので、ディスプレイが小さかった り、目の不自由な人が見にくいページになって しまう。 フレーム フレーム内リンクでは、他のページにジャンプしたとき、普 通に設定したのではURLが元のページのままになる。 ページを印刷するときに、誤って別のフレームを印刷して しまうことがままある。 フレームを定義したページ自体には、各フレームのファイ ル名などの情報しかないため、そのページが検索エンジ ンで検索されにくくなる。 この問題は、<NOFRAME>部分に文章を入力すれば回避できる が、本来のトップページの内容と<NOFRAME>部分の2箇所をメ ンテナンスする手間が生じる。 文字サイズを大きくした場合、メニューの文字などがフ レームからはみ出し、スクロールしなければならなくなる。 テーブル 1つのテーブルにたくさんのデータを入れない テーブル中のデータは、徐々に表示されるのではなく、最後まで読み込 まれてから表示されるため、データ量が多い場合は、読み込まれるまで ページが空白になり、見ている側のストレスになりる。区切りごとにいく つかのテーブルに分けて入れるほうが良い。 テーブルを複雑に組み合わせない テーブルのセルを細かく分けたり、テーブルを入れ子にすると、表示時 間が遅くなる。また、音声出力ブラウザやLynxなどテキストブラウザでは、 テーブルのデータを行列の表形式では表示しないため、複雑にレイアウ トすると、文章を正しい順に読み取れない場合がある。 「表」には罫線を付ける レイアウト目的でなく、本来の行列の表としてテーブルを使う場合、罫線 を付ける方が無難。背景色でセルを区別して、罫線なしにしている場合、 背景色をOFFにして印刷すると、読みにくくなる。Internet Explorerでは 初期設定で印刷時の背景色がOFFなため、注意が必要。 アクセシビリティについて 障害者にも利用しやすいサイトとは 1. 2. 3. 4. 画像、イメージマップ、アプレットにalt属性で代替テキストを付 ける。これらが表示されなくても意味が取れ、操作できるように する。 ムービーやサウンドなどには、それらがなくても意味が取れる ように説明を付ける。 リンク部分だけ読み上げても意味が取れるようにする。（音声 出力ブラウザなどで文脈外でリンク部分だけ抜き出す場合があ るため。） 文字色や背景色をOFFにしても意味が取れるようにする。配色 に気を付ける。 （色覚というのは人によって異なるもので、カ ラーの背景にカラーの文字、たとえば緑色の背景に赤色の文 字を読むのが困難な人もいる。） オンラインショップの設計 サイトの素性をはっきりさせる 購入条件を示す 申し込み手順を示す 個人情報の保護に配慮する 商品内容をはっきりさせる 不安にさせない注文フォームを作る 注文後のフォローを大切にする サイトの素性をはっきりさせる 問い合わせ先としてメールアドレスがあるだけでは、本当 にそのショップが実在するか不安。とにかく実在の会社 やショップであることをアピールするのが大切。 運営組織の正式名称 ショップの代表者または責任者の氏名 住所、電話番号、FAX番号、メールアドレス 販売に免許などが必要な場合は、その内容 以下のような内容も入れる方が、そのショップが「実際に 存在し、機能している」ことが伝わる。 ショップ／サイトの沿革 自社ビルや作業場所、運営責任者、スタッフの写真 資本金、従業員数、取引先、所属団体など 購入条件を示す 販売価格、送料 支払時期・方法 商品の引き渡し時期 申し込み方法 返品特約（返品不可の場合はその旨を表示） 商品の保証期間 申込みの有効期限 数量限定など、販売に特別な条件がある場合は、 その条件 申し込み手順を示す オンラインショッピングの手順は、いまのところ 統一されていない。サイトごとにまちまちである。 このため、操作が分からず途中で立ち往生する ことがよくある。 よって、全体の流れ図と、具体的な操作手順、 各手順での注意事項、エラーが発生したときの 対処方法などをまとめたページを作成し、事前に 手順を確認できるようにする。また、注文操作の 途中でも、手順を確認できるようにすると親切。 個人情報の保護に配慮する セキュリティの保護のため、各種の認証・暗号化 技術を採用している場合は、そのシステムに関 する説明を入れ、認証マークなどがあればそれ を掲示する。 注文時に得た個人情報を決して外部に漏らさな いこと、他の目的に使わないことを明記し、サイト 側の誠意を示す。 注文時に得た住所やメールアドレス宛てに後日 DMやニュースなどを発送したいと考える場合は、 注文フォームに情報提供の希望・不要のチェック を付け、不要な人には送らないようにする。 商品内容をはっきりさせる オンラインショップでは実物を見ることができない ため、Webの情報だけが頼りである。寸法や色 などの外観の情報だけでなく、用途や素材など、 詳細な情報を記載する。 商品に対する思い入れや、専門家としてのアド バイスなどプラスアルファの説明で、他のショップ の商品との差をアピールする。 商品写真を入れるなら、できればプロのカメラマ ンの撮影した写真を入れる。素人の不鮮明な写 真では購買意欲が削がれる可能性が高い。 不安にさせない注文フォームを 作る 問い合わせ先を入れる 「確認」を入れる 住所や支払い方法などの入力と、商品選択はページを分け、それぞ れで入力→確認を繰り返す方が間違いがない。2回目以降の注文の 場合は、メールアドレスとパスワードなどを入力すれば前回の個人 情報が表示され、再入力しないで済むようにするのが親切。 オンラインショッピングでユーザが最も恐れるのが個人情報の流出 である。商品注文時にユーザが入力しなければならない情報は、住 所、氏名、電話番号、メールアドレスぐらいに留める。 商品代金以外に必要な料金（送料、消費税、振り込み手数料など）も 表示する。 注文後のフォローを大切にする 注文を受けてから後の対応によって、発注者が リピータになるかどうかが決まる。注文が無事処 理されている状況を伝えることが大切。 受注確認のメール 入金確認のメール 商品発送・到着日の連絡メール をその都度送る。 問い合わせメールには即日回答が望ましい。確 認に日数がかかる場合は、とりあえず状況説明 のメールを出し、後日改めて回答する。 その他の配慮 FAXや郵送での注文も受け付ける Q&Aを作る 購入条件や商品内容など、よくある問い合わせとその 回答をQ&Aとして掲載する。 Q&Aを見るだけで問題が解決するので、問い合わせ が減り、サポートが楽になる。 人気商品やおすすめ商品の一覧を作る あれこれ選択するのを迷う人が購入するのを助ける 意味と、サイトに活気を与える意味がある。 サイトをまめに更新する 参考文献 KeiYu HelpLab（http://www.keiyu.com/） 株式会社クインランド （http://www.quinland.co.jp/） All About Japan [Webのユーザビリティ] （http://allabout.co.jp/computer/webusability/） U-Site（http://www.usability.gr.jp/）
© Copyright 2024 ExpyDoc
