Webサイトづくりの現場では、デザインの質とともにユーザビリティ、アクセシビリティ、マナーといったユーザーの側にたった視点で制作することが求められています。本書ではそれらの「ルール」を「ブラウザとOS」「表示とフォント」「画像や仕掛け」といったテーマ別に解説しています。デザイナーが陥りやすい「過ち」とその修正方法を実例サンプルつきで詳説し、その「過ち」がWebデザイナーとしてどれだけ信用を落とすことになるかを「イエローカード」「レッドカード」で表しています。優良サイトを制作していくための実用テクニック＆ヒント集、Webデザイナー必読の1冊！！
-------------------------＜目次＞------------------------------
CONTENTS
本書の使い方 009
Introduction 優良サイトのつくり方 010
Webデザイン基本ルール 019
Webユーザビリティの基本ルール10 020
01 トップページの体裁でサイトの目的を明確にして内容が一覧できるようにする 020
02 レイアウトやデザインなどのインターフェイス要素を統一して「らしさ」を出す 021
03 サイト内の情報は適切な分類とラベリングでユーザーが共感できるように 022
04 ユーザーがすばやく内容を把握できるようWebに適した文章作成を心がけよう 023
05 サイト運営者のポリシーや連絡先を明記してユーザーの信頼を得られるサイトづくりを 024
06 ナビゲーションの自由度と効率性を上げて使いやすいサイト構成に 025
07 メニューやリンクのデザインは適切な表現でわかりやすく 026
08 各種エラーには確実に対処しておこう 027
09 アクセシビリティに配慮したサイトづくりを 028
10 エンターテイメント要素の使用はサイトの目的に合わせて 030
恥をかかないためのHTML基本ルール10 032
01 ＜META＞タグでの文字コードの指定は必須！ 032
02 ページタイトルはサイトの顔 ＜TITLE＞タグ必ず設定しよう 033
03 できるだけ多くのブラウザで検証すべし！ 033
04 スペーサーは＜TABLE＞タグの「WIDTH」の指定に注意！ 034
05 画像のサイズ指定は＜IMG＞タグで正確に！ 035
06 「改行」は＜BR＞タグで指定すべし！ 036
07 フォント指定はNG！ 表示環境の違いを考慮する 037
08 画像の「ALT」設定はミスがないよう総チェック！ 038
09 プラグインやJavaScriptが使えない環境があることを忘れずに 039
10 ユーザーの閲覧環境の違いを考慮して思いやりのあるページづくりを 039
ブラウザとOSを乗り越える基本ルール10 040
01 テキストエリアに表示した文字が「自動改行されない」Win版Netscape 040
02 Mac版のブラウザでは機能しない入力フォームへの文字数制限 041
03 テーブルの「空白欄の制御」はブラウザの種類によって違う 042
04 ＜TABLE BGCOLOR=“～”＞では全体に色がつけられないNetscape 043
05 「1色」しか表示できないNetscape Navigatorでの枠線の色 044
06 Win版Internet Explorerなら簡単に消せる「テーブルの枠線の一部」 045
07 Netscape6でコントロール可能な「テーブル表示の位置」 046
08 Netscapeではコントロールできない「テキスト表示の位置」 047
09 Internet Explorerなら簡単にできる「文字のスクロール」表示 048
10 IEとNNで動作が異なる「罫線色づけ」と「ブリンク」 049
Webデザイン「過ち」と「正解」 051
ブラウザ＆OSの「過ち」と「正解」 052
01 IEで表示が崩れるNN独自のタグは＜div＞タグで回避 052
02 白ベースのページをつくる際は背景色の指定を忘れずに！ 054
03 NNでの文字化けはページ全体の欧文フォント指定が原因 055
04 Mac版IEでの欧文フォント指定にはlang属性を追加！ 056
05 テキストエリアの自動改行機能オフですべてのブラウザに対応 057
06 入力フォームの文字数は互換性を考えJavaScriptで制御 058
07 JavaScriptなら文字の自動スクロールが全環境下で実現 059
08 テーブル＋CSSによるNNでの表示崩れは＜span＞タグで解決！ 060
09 画面底部に画像を密着させるには高さ0のフレームを挿入せよ 061
10 NNでレイアウトが崩れる場合は「表示位置の絶対指定」で回避 062
11 画像とテーブルを密着させる場合は改行指定の扱いに注意せよ 064
12 画像に回り込ませた文字表示の崩れはテーブルレイアウトで解決 066
表示とフォントの「過ち」と「正解」 068
01 NN4.7＋CSSによるレイアウトの崩れはclass作成で回避 068
02 全角スペースを使うと崩れる文字面はテーブルで解決 070
03 段落最後の行間が広がるのは半角スペースが原因！ 071
04 フォントサイズはポイントで指定せずにピクセルで！ 072
05 Macで起こる文字のつぶれは8ポイントのフォントサイズが原因！ 074
06 画像を表示しないユーザーのために代替テキストは必須！ 075
07 システム標準フォントのみを使ってあらゆるユーザーに対応せよ 076
08 可読性が悪いページはコントラストの強い配色で解決！ 078
09 文字化けの原因「機種依存文字」はチェックを徹底して回避せよ 079
10 ピクセルによるフォントサイズ指定は環境別にclassを用意 080
テーブルの「過ち」と「正解」 082
01 スライスイメージを組むときは＜td＞～＜/td＞を1行で記述 082
02 NNで見ると「歯抜けテーブル」になるのは空白セルが原因！ 084
03 フォーム下の余計なスペースはタグの入れ替えで回避せよ 085
04 テーブルの小技で作業効率とデザインを両立！ 086
05 ロード時間を浪費する複雑なテーブルは構造の見直しを 088
06 テーブルをつくる枠線は“入れ子”構造ならNNでも表示可能 089
07 ブラウザを限定するテーブル設定項目に注意！ 090
08 イメージ脇の微妙な文字ズレはテーブル＆valignで回避 092
09 テーブルレイアウトで失敗しないためにはNN対策を万全に！ 093
10 テーブルのセルに背景画像を張り込む際はIEでの表示に要注意！ 094
11 テーブル幅が100％指定でも「すき間」が生じることを心得よ 096
12 NNで崩れる角丸テーブルはbackground指定に問題あり 098
JavaScriptの「過ち」と「正解」 100
01 別ウインドウを開く場合はテキストのはみ出しに注意！ 100
02 フォームの入力ミスや情報を不足をJavaScriptで未然に防ぐ！ 102
03 ロールオーバー効果にはイメージのプリロードを適用する！ 104
04 ブラウザによって異なるフォームサイズを超えた文字の処理 105
05 JavaScriptの折り畳み型ナビゲーションをより使いやすく！ 106
考え方やマナーの「過ち」と「正解」 108
01 フレームで切り替わるページのURLに気を配ろう！ 108
02 低解像度で見切れるナビゲーションはNG 110
03 いかにもクリックできそうなボタン形の画像は混乱のもと！ 112
04 より効果的で軽いロールオーバーによるナビゲーション 113
05 Flashのオープニングムービーはスキップボタンが必須！ 114
06 想像以上にみっともない＜title＞タグの直し漏れ 115
07 コンテンツをA4サイズ以内に収めてプリントアウトにも対応せよ 116
08 Webサイトにグリッドシステムを活用しよう 118
09 NN4.xでレイアウトが崩れる原因のひとつ「文字コード」に注意 120
10 アドレスバーに表示されるHTMLファイル名にも気を配ろう 122
11 フレーム内にリンク先サイトを表示するのはマナー違反！ 123
画像や仕掛けの「過ち」と「正解」 124
01 BGM制御不能な迷惑ページは＜embed＞タグで改善 124
02 HTML側でのサイズ指定による画像の使い回しに要注意 126
03 小さなバナーからページ全体までFlashを効果的に利用しよう 128
04 解像度を下げた画像はアンシャープマスクで原画に近づけよう 129
05 ブラウジングテストはより多くの環境で！ 130
06 Flashサイトは＜meta＞タグでサーチエンジン対策を！ 132
07 文字画像の生成はアプリケーション間のコピー＆ペーストに注意 133
08 クッキーを意識させない配慮あるサイトを目指そう 134
優良Webサイトレビュー 136
Review1 IBM Japan 136
Review2 Yahoo! Japan 138
Review3 Amazon.co.jp 140
Review4 アップルコンピュータ 142
Review5 J.CREW 144
付 録 147
Netscape Navigator & Internet Explorer対応ファイル一覧 148
CSSタグ対応一覧 150
Webデザイン主要HTMLタグ ブラウザ対応一覧表 152
執筆者紹介 158
