“Webデザインのお作法”を50個選定

投稿日:2007.02.14

title_saho.gif
Webデザインには、どんなにビギナーだったとしても、プロのWebデザイナーを名乗る人がやってしまうと恥ずかしい“マナー”ともいえる制作上のルールがあります。「知らなかった」、「教わっていない」では通用しません。なぜなら、アナタはプロなのですから。
そんな超基本の“Webデザインのお作法”を50個選定し、サイト設計、テキストデザイン、画像と色彩、レイアウト、その他の5つのテーマ別に解説していきます。この特集を通して、“Webデザインのお作法”をしっかり習得、あるいは復習して、カンペキに身に付けてください。


引用サイトはコチラ


ターゲットとなるユーザーを明確にする
Webサイトを作成する準備段階に大切なのは、そのサイトを閲覧するのはどういった人なのか、というターゲットを明確にすることだ。性別、年齢、職業、趣味嗜好などのターゲットをセグメントする要素。これらが違えば、当然目指すべきサイトの姿も違ってくる。

ターゲットが学生であればノートPCを想定しページ幅などの設計を行うこともありうるし、ターゲットが広ければ万人がストレスなく閲覧できるように文字の大きさに気を配ったり、音声読み取りソフトでもきちんと読み上げられるような処理を施したりしなければならない。


サイトの構成・ルールを考えてからデザインに入る
サイトのターゲットやテーマなどが決まったところで、そのままデザインに入ってしまう人がサイト制作初心者には多く見られる。

そうした方法でもまれにうまく行く場合もあるが、多くの場合は統一感のとれないサイトになってしまう。その理由は、あらかじめサイトの構成やルールを考えずに、画面上でそれらを考えてしまうからだ。

* 見出しの大きさ
* 本文の大きさ
* 文字の色
* CSSのクラス名はどうするか
* ページ上にある、ナビゲーション以外の小さなボタンのデザイン
* フォルダー構造、命名
* リンクなどに添える三角の矢印の大きさ、色、向き

これら以外にも、事前に決めておかずにその場で考えると、あいまいな設定や場あたり的な名前になってしまう要素は多い。それを避けるために、必ずサイト仕様のようなものを作っておく必要がある。


ブラウザのサイズに考慮する
800*600で制作している場合が多いが、最近では1024*768を対象にレイアウトを行っているサイトも多く見られる。傾向としては大きな解像度に移行しつつあるだろうが、やはり800*600を対象にしてレイアウトするのがよいであろう。


1ページに適切な情報量を考える
1ページあたりのページの縦幅で悩む制作者は少なくない。ページが長ければ長いほど、ブラウジングにも時間がかかってしまうので、できる限り長さを短くし、スムーズに閲覧してもらえるよう心がけたい。


テーブルとCSSを使い分ける
文章の構造化はHTMLに任せ、レイアウトはCSSに任せるという流れが推奨されている。だが、現在でもテーブルレイアウトで公開されているWebサイトは多くある。

テーブルレイアウトについては賛否両論があるが、現実問題としてテーブルを利用した方が効果的な場面というものがあることも事実だ。実際、CSSのみではテーブルで行えたことが再現しづらかったり、作業に手間が掛かったり、表現することが無理だったりすることもあるからだ。

また、XHTMLとCSSを利用しての構造と表現の分離という部分が、現時点では徹底できない問題もある。だからといって、テーブルレイアウトを推奨しているわけではなく、やはり可能な限りはCSSに移行していくべきだろう。

むやみにCSSを使用するのではなく、ケースバイケースでテーブルなのか、CSSなのか、あるいはこれらを混在させるのかを、下記のような角度から熟考した上で制作すべきである。

* 閲覧環境:モダンブラウザ以外での閲覧をどこまで考慮するのか?
* デザイン:見た目重視なのか、SEOあるいは情報重視なのか?
* メンテナンス:更新の頻度、コンテンツの追加の頻度など
* サーバーの負担:XHTML本体がすっきりするのでサーバーのデータ転送量が減る
* 音声認識ブラウザ:テーブルレイアウトだと意図するように読み上げられない
* コスト・時間:テーブルからCSSに移行するにはそれなりの時間とコストが掛かる


もちろん、上記だけが判断材料ではないので、制作するサイトが何を目的とし、誰が見るのかなどを検討した上で、判断することが大切だ。

また、CSSをレイアウトに凝り過ぎてかえってソースが増えてしまったり、ほかのブラウザによってレイアウトがすぐ崩れてしまうサイトをちらほら見かける。テーブルをいくつも入れ子などにして使い過ぎるのは問題だが、無理をしてCSSで制作したあまりに、情報をキチンと伝えられなくなってしまうのは本末転倒なので注意したい。


クリックできる部分はわかりやすく
メニュー項目が多いサイトのプルダウン形式のナビゲーションや、大項目の中に小項目があるようなメニューを制作する際、特に気をつけならなければいけないのは、どこがクリックできて、どこがクリックできないかを明確にすることだ。

見た目が同じにも関わらず、振る舞いが異なるナビゲーションは、ユーザーがその都度、その箇所をクリックできるのか?できないか?を確認しなければならない。

ユーザーがサイトの使い方を習熟しにくく、こちらが見てほしいと意図する重要なページを見逃してしまうこともある。このような使い勝手の悪いナビゲーションはユーザー離れの原因にもなるので、誰にでもわかりやすい設計を心がけたい


サイトマップを用意する

サイトマップは本や雑誌の目次に相当するもの。webサイト上には必要不可欠なものだ。そのサイトにどのようなコンテンツがあり、どのような構成になっているかがひと目で確認できる。また、階層が深くてもサイトマップがあれば、目的のページをダイレクトにアクセスすることができる。

ページが少ないからサイトマップは必要ないと考え、サイトマップを載せないサイトがあるが、SEOの観点からいってもコンテンツの量に関わらず、付加する必要がある。サイトマップを検索エンジンが読み込むことによって、そこからリンクされているすべてのページをロボットに伝えることができるからだ。



リンクテキストにはリンク先の内容を明確に

リンクテキストに、意味を持たない言葉(例えば「ここをクリック」など)を使っているサイトがある【1】。このように、そのリンクテキストをクリックしたら、どんなページにジャンプするかが曖昧な言葉を使用すると、ユーザーを混乱させ、予想しなかったページにジャンプさせてしまうことになる。

また、視覚障害者が利用する音声ブラウザなどでは、文章中のリンク部分を抜き出して読み上げることができるが、そうした場合でもリンク先の内容を推測できるような形にしておく必要がある。リンクテキストに使われているテキストがサイトのキーワードと一致していれば、SEOの観点からも好ましい。


字間や体裁をスペースで調整しない

単語個々の文字幅を合わせたり体裁を整えるために、文字の間にスペースを入れて調整しているサイトがある【1】【2】。

文字間をバランスよく均等に見せたいという意図はわかるが、音声読み上げソフトは空白文字を文章の区切りと解釈する性質を持っているので、この方法では正しく読み上げが行われない。

たとえば「期間」という単語に、「期 間」と2文字の間に全角スペースを入力すると、音声読み上げソフトでは単語単位ではなく、文字単位で読み上げられてしまう。。つまり、この場合「き あいだ」と認識されてしまう。このことから文字間や行幅を調整するのに、スペースは用いてはならない。


インデントで文章にメリハリをつける
ページ内の文章量が多い場合、きちんと段落分けされていても読みづらいものだ。そうした場合、インデントの設定をすることによって、長い文章でも読みづらさを軽減することができる。

段落にインデントをつけるには、「text-indent」プロパティを使用する。通常日本語での字下げは1文字分なので、text-indentプロパティの値に「1em」を指定し、1文字分のインデントを設定する【1】【2】。
また、パーセントで指定すると、基準となる文字サイズに対して相対的な指定もできる。比較的多いのが、日本語入力にしてスペースキーでインデントの代わりをしているサイトだ。これは絶対に避けたい。


< meta >タグで文字コードを指定する
サイトをブラウジングしていて、画像はきちんと表示されているのだが文字が記号のようなもので表示され、何が書いてあるかさっぱりわからないという経験をしたことがないだろうか。

こうした場合、サイトのブラウジングに慣れた人はブラウザの表示メニューでエンコードを変更するなどして、問題を解消できるかもしれない。だが、その方法を知らないユーザーはきっとほかのサイトに移動してしまうだろう。

この文字化けの起きるのは、< meta >タグで文字コードを正しく設定していない場合に多い。< meta >タグに文字コードを入れることにより文字化けを起こす可能性は低くなる【1】。文字コードには以下のようなものがある。

JISコード
JIS規格のX0208で定められた文字集合。メールで使用する代表的な文字コード。

EUCコード
日本語UNIX環境で使用される文字コード。

シフトJISコード
Microsoft社が決めたコードで、主にパソコンを基盤に、WindowsやMacで使用される。


普段オーサリングソフトを使用している場合は自動的に記述してくれるが、そうでない場合は正しい文字コードを記述しよう。因みに、< meta >内の記述は以下のようになる。

< meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP" >
< meta http-equiv="Content-Type" content="text/html; charset= Shift_JIS" >
< meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" >



アルファベットの大文字英単語に注意する

音声読み上げソフトは、アルファベットの大文字と小文字で言葉の読み上げ方式が異なっている。小文字は英単語として認識するが、大文字は英単語ではなく、ローマ字を1文字ずつ読み取ってしまうのだ。

このことから、何か特別な理由がない限り、アルファベットは基本的には小文字で書くようにするべきだ。どうしても、大文字を使いたい場合はCSSファイルで小文字を大文字表記に変更するのも手段のひとつなので覚えておきたい。

たとえば、表示させるテキストを英語「SITEMAP」などにしたいときは、大文字で入力してしまうと「エスアイティエムエーピー」と意味のわからない音声で読み上げられてしまう。ソース上では小文字で「sitemap」などと入力し、「text- transform:uppercase」を使用して大文字に変換させる処理が必要だ【1】【2】。

CSSソース

p{text-transform: uppercase;}


HTMLソース

< html >
< head >
< link rel="stylesheet" href="sample.css" type="text/css" >
< /head >
< body >
< p >sitemap< /p >
< /body >
< /html >

【1】ソースを上記のようにした。注目してほしいのはHTMLソース< p >タグの中にあるアルファベットだ。ここでは小文字で記述してある



mailtoリンクの表記に注意
「お問い合わせ」、「ご質問はこちら」などと書いてあるボタンやテキストリンクをクリックすると、ユーザーの意思に関わらず、メーラーが立ち上がってしまうサイトが数多くある。

49-01.gif<

「お問い合わせ」などと書いてあれば、ユーザーは感覚的にお問い合わせフォームなどのページにリンクされると思い、クリックしてしまう場合が多い。

49-02.gif
電子メールへのリンクであれば、メーラーが立ち上がることがひと目でわかるように、メールのアイコンやポストのアイコンなどを配置したり、メールアドレスを強調するべきである【1】【2】。
場合には、ユーザー自身がメール本文の中に自分で項目立てをする必要があるし、そのサイト自体をなんとなく信頼性に欠けると感じる人もいるはずだ。何らかの特別な理由がない限りはできるだけ、メールではなくフォームで対応したほうがいい。



印刷を想定するページはサイズを考慮する
Webサイトのプリントしようとすると、横幅が広すぎるためページ右端が印刷範囲外になってしまい、上手く印刷できないサイトが多く存在する【1】。ユーザが印刷することを想定しているページは、きちんとA4サイズで印刷できるような設計でレイアウトしたい。

50-01.jpg
IE6のデフォルト設定の場合は、横幅650ピクセル以内であれば、右端が切れずに印刷がされる。地図などの印刷を想定するページは横幅650ピクセル程度に収まるようレイアウトを心がけよう。レイアウト上の問題や情報量の点から、650ピクセルで狭いのであれば、印刷用のページを別途設けるのも方法のひとつだ【2】。

50-02.jpg
また、ブラウザ用とは別途、印刷用のCSSを用意しておく方法もある。

< link rel="stylesheet" href="print.css" type="text/css" media="print"/ >

と別途印刷用のスタイルシートを制作し、その中で印刷する際に不必要なナビゲーションなどの id を「display: none」で消す

PAGE TOP