Webデザインには、どんなにビギナーだったとしても、プロのWebデザイナーを名乗る人がやってしまうと恥ずかしい“マナー”ともいえる制作上のルールがあります。「知らなかった」、「教わっていない」では通用しません。なぜなら、アナタはプロなのですから。

そんな超基本の“Webデザインのお作法”を50個選定し、サイト設計、テキストデザイン、画像と色彩、レイアウト、その他の5つのテーマ別に解説していきます。この特集を通して、“Webデザインのお作法”をしっかり習得、あるいは復習して、カンペキに身に付けてください。

其の1： ターゲットとなるユーザーを明確にする
其の2： サイトの構成・ルールを考えてからデザインを
其の3： ブラウザのサイズに考慮する
其の4： 1ページに適切な情報量を考える
其の5： テーブルとCSSを使い分ける
其の6： クリックできる部分はわかりやすく
其の7： サイトマップを用意する
其の8： ナビゲーションの内容にも優劣を
其の9： リンクテキストにはリンク先の内容を明確に
其の10： ロゴにはトップページへのリンクを設定する

其の11： “読みやすさ”に配慮してフォントを選ぶ
其の12： 左揃え、中央揃え、右揃えを適切に使い分ける
其の13： 字間（トラッキングやカーニング）を整える
其の14： 字間や体裁をスペースで調整しない
其の15： 文字サイズの指定はできる限り相対サイズで
其の16： 要素の重要度に応じた見出しタグをつける
其の17： インデントで文章にメリハリをつける
其の18： 文章を読みやすくする工夫を
其の19： 全角・半角をきちんと区別する
其の20： 機種依存文字を使用しない
其の21： 専門用語や外国語の乱用を避ける
其の22： タグで文字コードを指定する
其の23： アルファベットの大文字英単語に注意する
其の24： テキストは画像化しない

其の25： 配色のバランスを考える
其の26： サイトのイメージや内容にあった配色を
其の27： 配色で視線の誘導を行う
其の28： 背景と文字色のコントラストに配慮する
其の29： 画像の属性を正しく記述する
其の30： 画像の書き出し方に考慮する
其の31： テキストグラフィックに関する配慮

其の32： マージンを適切にとる
其の33： グリットを有効活用しよう
其の34： 「集合」と「近接」でスッキリ見せる
其の35： 視線の移動を意識したレイアウトに
其の36： 情報の優劣をつけてレイアウトする
其の37： ジャンプ率を上手に活用する
其の38： リンクの表記と配置に注意
其の39： 訪問済みのリンクは把握しやすいデザインに
其の40： 複数の異なるブラウザで表示確認を

其の41： ソース上の見えないスペース、改行に注意
其の42： 新しいウィンドウは開かないようにする
其の43： タグ内の表記は安易に決めない
其の44： フォーム送信ボタンは大きく見やすく
其の45： Flashコンテンツは本当に必要かを考える
其の46： Javascriptの扱い方は慎重に
其の47： プラグイン使用時のユーザーへの配慮
其の48： PDFファイルへのリンクには容量を明記する
其の49： mailtoリンクの表記に注意する
其の50： 印刷を想定するページはサイズを考慮する