第3回 デザインとWebユーザビリティ | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

タイトル画像、Webユーザビリティ―信頼を生む“使いやすさ”のデザイン

第3回 デザインとWebユーザビリティ


今回はWebにおけるデザインのあり方についてお話したいと思います。雑誌などの紙媒体とWebデザインを兼任されている方にも参考になればと思います。Webサイトのデザインの場合は、紙媒体とは異なるネットというメディアの特性を踏まえていないと、ユーザーにとって見にくく、使いづらいものになってしまうからです。もちろん、Webデザイン一筋の方やWebディレクターの方にも参考となるような内容です。

(解説:石田優子)

著者プロフィール用イラスト [プロフィール]
いしだ・ゆうこ●クロッシングフィンガーズ代表。ユーザーエンパワーメントという手法により、ユーザー視点に立ったサイト構築、コミュニティ運営のコンサルティングなどを行っている。近著に『Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。』がある。
(イラスト:MIKAさん)
クロッシングフィンガーズ:http://www.crossingfingers.org/
KeiYu HelpLab:http://www.keiyu.com/



紙媒体とWebサイトにおけるデザインの違い


紙媒体の場合は、フォントの書体や級数、1行文字数、行間隔、図版の位置、微妙な色使いなど、細部のデザインにこだわることができます。このため、Webでも完成度の高いデザインを再現しようとしがちです。

しかし、Webではユーザーの閲覧環境の違い、画面解像度、OS、ブラウザの違い、そしてユーザーの使い方などによって、サイトの見え方が異なります。たとえばMacintoshとWindowsでは、Macintoshのディスプレイの方がガンマ値を低めに設定されているため、通常Windowsパソコンより画像が明るく表示されます。このため、Macintoshでちょうどよいと思った色がWindowsでは暗く見えるといったことがあります。

また、紙媒体では一度に1ページか見開き全体を閲覧できますが、Webの場合はまちまちです。スマートフォンの小さな画面で閲覧している人もいれば、21インチのディスプレイで閲覧している人もいます。ブラウザウィンドウを小さく表示している人もいれば、全画面に広げている人もいます。小さな文字を好む人もいれば、大きな文字でないと見えづらい人もいて、それぞれブラウザで文字サイズを変更していたりします。

いくら制作者側が凝ったデザインに仕上げても、ユーザーの環境では見づらいかもしれません。ですから、Webでは制作者側があまり細部までレイアウトを固定しようとせず、ユーザーが自分の環境に合わせて見やすく調整できるような柔軟なデザインが求められます。

Windows XPのデスクトップ上、FIrefoxのブラウザウィンドウ
Windows XP上で、Firefoxの標準文字サイズでブラウザウィンドウを画面の一部に開いて表示した場合
Mac OS Xのデスクトップ上、Safariのブラウザウィンドウ
MaC OS X上で、Safariを文字サイズ[最大]にし、ブラウザウィンドウを全画面に開いて表示した場合。どちらも画面解像度は1024×768ピクセルだが、見え方は大きく異なる

紙媒体とWebサイトの閲覧方法の違い


書籍の場合、読者は目次から順に最後のページまで読むのが普通でしょう。雑誌ならパラパラめくって、興味を引かれた記事から読みはじめるかもしれません。いずれにしても、紙媒体では全体構成を把握して目的の情報にたどりつきやすくなっています。また、最初に目次があり、次に本文や記事があるという順序も決まっています。

しかし、Webサイトの場合は、最初にどのページをユーザーが見るかはわかりません。検索エンジンの検索結果からそのサイトに飛び込んで、そこからあちこちに移動し始めることも多いでしょう。トップページから概要へ、それから詳細ページへという制作側の想定通りにはユーザーは行動してくれないのです。

トップページは重要な入り口ですが、個々のページもまた入り口であり、Webにおいてはさまざまな順序でユーザーが閲覧していくことを覚えておいてください。さまざまな経路から飛び込んだユーザーに配慮する方法については、この連載の後半で解説して行く予定です。

インターネットのインタラクティブ性について


インタラクティブとは、「相方向的」とか「対話的」といった意味合いです。紙媒体に限らず、従来のメディアでは情報は一方通行に発信される場合が多かったのに対し、インターネットは双方向性をその特長のひとつとしています。

メールなどでの直接のやりとり以外にも、たとえば、Webサイトで「以下の会員規約を読んで同意する場合は[同意する]ボタンを押してください。」と表示され、ユーザーが[同意する][同意しない]を選択し、次の画面に進む、このような操作においても、Webサイトとユーザーは対話しているわけです。またビジネスブログではコメントやトラックバックでのユーザーとの対話も可能でしょう。

既存メディアにくらべてWebではユーザーの選択権、主導権がより強くなります。個々のページを「面」と見るのでなく、全体を「線」として考えること.。ユーザーからのフィードバックを得られるような仕組みを作り、積極的に対話を心がけること。そんな姿勢がWebサイト制作には求められます。


次回につづく
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在