Webアプリ開発事始 第24回

WebサイトとWebアプリのデザインを考える(2) 長谷川裕行
有限会社 手國堂

その他の注意点

ページ移動処理を例に、注意すべき点をいくつか挙げてみました。クリックしてページを切り替えるだけでも、いろいろと問題点が見つかります。ましてWeb全体の設計やアプリケーションのデザインまで含めれば、実に様々な問題にぶつかることでしょう。最後に、Webデザインで注意すべき代表的な問題を取り上げておきます。


- ボタン位置の統一 -

階層構造に次いで注意しなければならないことに、視覚的なユーザーインターフェイスがあります。

あるページでは「戻る」ボタンが右下、別のページでは左上……などと、ちぐはぐにならないようにしましょう。また、画像を使ったボタンのデザインも、基本的には統一すべきです。あまり異なりすぎると、ユーザーにはそれが何のボタンなのか、一瞬にして判別することが難しくなります。画像は「見てすぐにその意味(クリックした結果)が推測できる」ことが重要です。見ても意味の分からないボタンやアイコンは、わざわざ絵にするより文字で「前のページへ」などと書いた方が遙かに親切です。

特に、どのページでも共通したイメージで、同じ意味のボタンやリンクが同じ場所にあることが重要です。このデザインの統一性はよく知られているはずなのですが、あまりうまく活用されていないようです。もちろん、すべてのページをまったく同じデザインにしてしまっては、味も素っ気もない平板なサイトになってしまいます。ときに定石を崩しつつ、全体の雰囲気は統制が取れている――という形がよいでしょう。


- トップページのフレーム -

この「全体の統制を図る」という目的で、フレームを多用したサイトも見受けられます。何年か前までは、フレーム未対応のブラウザを考慮して、フレームはあまり使わない方がよいといわれていましたが、今ではそこまで神経を使う必要はありません。しかし、トップページにフレームを使うと、ちょっと厄介な問題も発生します。

ご存じのようにGoogleなどのロボット型サーチエンジンは、自動巡回でページのURLを収集しています。こういったサーチエンジンを使ってたどり着いたページが、本来はフレームに表示されるものだった場合に、ユーザーはフレームのない部分的な情報だけを見せられることになります。最低限、トップページはフレームを外すか、フレーム内に表示されるページには、「フレーム付きの本来のページへ飛ぶためのリンク」を用意しておきましょう。

また、フレーム側のHTMLにタグを記述し、以下のような感じでロボット検索用のキーワードを設定しておきましょう。

  <META name="keywords"
   content="書籍,本,編集,電楽街,小説,絵本,写真,映画,
   コンピュータ,パソコン,遊び,趣味,hirop,手國堂,エッセイ">
  <META name="title" content="手國堂Webページ">

※上記は、手國堂Webページで使っているタグです


- OSとブラウザの違い -

この他、想定するユーザー層によっては、「全員がInternet Explorerユーザーとは限らない」「全員がWindowsユーザーとも限らない」といったことも、考える必要があるでしょう。

現在インターネットに接続しているパソコンの大半はPC/AT互換機で、そこではWindows XPが稼働している――と考えて差し支えはありません。Windows 98や2000も含めれば、大半どころか80%以上が「AT互換機にWindows」と考えられます。

しかし、例えば画像処理や音楽などではMacを使うユーザーが多数いて、さらにMacOS 9.x以前では、Netscape Navigator(Communicator)を使っているユーザーも少なからずいます。また、Linuxを端末として使用しているユーザーは、X Window SystemでNetscape Navigatorを使っているでしょう。その他、オープンソース運動で名を馳せたmozilla(モジラ)や高速表示が売り物のOperaなどのユーザーも存在します。

これら各ブラウザでは、微妙に表示結果が異なることはご存じの通りです。JavaScriptなどで利用するオブジェクトの構成やメソッドの引数、プロパティの表示形式が異なっていることもあります。


- 割り切りも必要 -

組織内の業務処理では端末の機種、OS、ブラウザなどの環境を固定できますが、インターネットではどうしようもありません。様々な動作環境の存在を視野に入れ、特定のOSやブラウザでは動作しない、あるいは正常に表示されない――といったトラブルを回避することも、考える必要があるでしょう。

ただ、OSやブラウザの持つ差異を完全に吸収するのは難しく、どんなOSでもどんなブラウザでも、まったく同じように表示することは(PDFでも使わない限り)不可能です。そこで対象を割り切って、「Windowsだけ」とか「IEとNetscapeだけ」とすることも考えられます。あまり凝った表示を行っていなければ、大きな問題とはならないでしょう。

要は、サイトにアクセスしてくるユーザーの実行環境や経験・知識のレベルを的確に想定し、ユーザーに余計な負担をさせないよう配慮することです。


あとがき

2年にわたって続けてきた「Webアプリ開発事始め」も、今回で最終回を迎えました。連載開始当初は本当に「事始め」という雰囲気でしたが、今やJavaサーブレットもIISとASPも、あちこちで当たり前のように稼働しています。

現場技術者のの周囲でも、サーバーサイドの業務アプリ開発について、話題に上ることが増えてきたはずです。書籍や雑誌でも、情報が溢れるようになりました。業務処理をWeb環境で実行する必要性は、今後益々高まってくるでしょう。みなさんのご健闘とご活躍を祈ります。

長期間のおつきあい、ありがとうございました。


トップページ
Webアプリはサイトの一部
どこに「戻ればいい」のか?
ユーザーを把握する
情報の分類
その他の注意点
ボタン位置の統一
トップページのフレーム
OSとブラウザの違い
割り切りも必要
あとがき

Copyright © GrapeCity inc. All rights reserved.