たいそうな記事のタイトルですが、なかみは大した事ありません。。
SEOやソーシャルブックマークなどでこういう見出しがおおいので、興味本位で、ちょっと試験的にこんなタイトルにしてみました。

見る人によって環境は違うってこと

当たり前の事かもしれないんですが、作ったサイトなりページなどをいろんな状態で見る人がいるということです。OSでいえば、Windowsで見ている人もいれば、Macのひともいる。一般的に数は少ないですがLINUX環境の人だっているとおもいます。
（LINUXの情報サイトだったら一番多いかもしれないですけど）ブラウザで考えてみれば、もっと多くの環境が存在しているし、その環境にOSの種類、バージョンなどを掛けた数だけ閲覧環境があるっていることです。あ、あとかなりやっかいな、携帯電話っていうのもあります。携帯電話なんてキャリアによってもですが、機種によっても違うのです。しかもPCの閲覧環境より、ユーザーが使用している種類がかなり多い訳です。また、これからはiPhoneみたいな出来のよいスマートフォンがどんどん街中に溢れて行くと、また見る環境が増えていきます。googleのandroidなんかは逆に閲覧環境が共通化するきっかけになるかもしれませんけど。

WEBサイト制作の際のターゲットのユーザーの想定って結構大事なんだとおもいますが、そこからブレイクダウンして導きだされる、閲覧環境もある程度しぼって考えておいた方がいいでしょう。

一般的なサイトを作るとして、代表的なところで
WIndows Internet Exploler6.0
WIndows Internet Exploler7.0
WIndows Firefox 2.0
Windows Opera

Macintosh Firefox 2.0
Macintosh safari 3.1

(2008.4.30 現在)

くらいは最低押さえておけばいいのではないかと。。

見るだけじゃなくって、操作するってことを意識する

たまに、眺めるだけっていう告知ページのようなものもありますが、基本的にWEBサイト、WEBページっていうのは、クリックされたり、ボタンをおしたりして利用するものです。極端な言い方をしてしまえば、車のエアコンのコンパネやオーディオのあたりと同じUser Intefaceが必要だということ。なのでナビゲーションのメニューの並びは情報の強弱に沿うべきだし、情報の中身によって整理されるべきだと考えます。アイコンはその形状からおおよその機能なり、遷移先等を明示してあるといい（分かりやすい）デザインであると言えたりするんではないでしょうか？また、操作することで気持ちのいい操作感を得られるようにしたりとか、小さい操作感の積み上げでFLASHやajaxなどで作り込まれたサイトはブラッシュアップされて行くのではないでしょうか？ 欲しい情報にたどり着くまでに操作するってことを念頭において作業を進めた方がいいでしょう

そのウェブページの目的を明確化する

ページをWEB上にアップするのには必ず目的があります。いや、ある筈です。。キャンペーンでも、サービスを告知するのか、モノを売るためなのか、ライブに来てもらうために制作するのかでは、ページ内、サイト内の構成などは大きく異なってきます。また、どこから来たユーザーに見せるのかにもよって、情報の配置方法が異なるでしょう。ですので、作る前にまずその目的を明確にする必要があります。クライアントには多少いやがられても、ページ制作の目的は共有すべきであると考えますし、共有しない場合には無駄な作業が発生するとか、出来た物が全然違うなどという、お互いに嫌な思いをするかもしれないです。それを避けるために関係者で目的の明確化を行うべきであると考えます。

使う人が心地よくなるようなカラー設計

サイトやページの基本となるカラーを設計したほうが、すっきりと違和感なく見せることができる場合がおおいです。またこの時点でリンクカラーや目立たせたいアクセントカラーも決定しておきます。色の使い方によって印象が大きく異なってくる事もあります。採用した色同士に一定のセオリーに従えば確実に調和は得られそうです。 ただ、チラシやキャンペーン等はこれを逆手に取って、調和を外して周囲より目立たせるといった手法もとられているのだとおもいます。

配色を決めるのに便利なツールやサイトがありますので、こういったものを利用しています。

adobe kuler
http://kuler.adobe.com/
作った色を共有したり、レイティングしたり面白い。いい感じのカラースキムもみつかるかも

colorBlender
http://colorblender.com/
動きが軽快で結構使いやすいです。Photoshop、Illustratorのカラーパレットにダウンロード出来るので、そのまま作業にとりかかれます。

COLOUR lovers
http://www.colourlovers.com/

Accessibility Color Wheel
http://gmazzocato.altervista.org/colorwheel/wheel.php
実際にテキストに配色してカラー設計をお助けしてくれるサイト。

DeGraeve.com / Color Palette Generator
http://www.degraeve.com/color-palette/
ウェブ上にある画像から色を抜き出してくれるサービス。もちろん無料。印象がいい画像をあててみて、解析してみるのも新しい発見かもしれません。なんだか気になるバナー広告とかも分解して解析。

Adobe illustrator CS3ライブカラー
http://www.adobe.com/jp/products/illustrator/upgrade/
CS3から搭載された新しい機能で、ある一定のルールのもとからカラーを選択することもできる。かなり出来のいい機能。

Art director toolKIT
http://www.code-line.com/software/artdirectorstoolkit.html
Macbookを購入したときについてきたので、そのまま使ってます。結構気に入ったので、シェアウェアでライセンスを購入して使える機能がふえました。が、残念ながらカラー設計には、不向きだとおもわれます。

フォント設計

一つのページ、サイトに多くの種類のフォントが混在していると、雑然としたイメージを与えてしまうので、使用するフォントはその位置づけによって、一定のルールを設けた方がいいかと思います。また英字フォントの方がアルファベットが奇麗だったりするので、英字で表現するときは、英字フォントを使用した方が奇麗に収まることが多いようです。

またデバイスフォントで表現したい箇所は、コーディング時に大きく異ならないように心がけてデザインしたいとおもいます。

CSSで指定するフォントに付いては、各閲覧環境がことなりますので、基本的にOSをインストールしたときに同時にインストールされるものを指定するのが妥当です。

Windows XP SP2でインストールされるフォント一覧
http://www.microsoft.com/typography/fonts/product.aspx?PID=145

OSX　10.4 でインストールされるフォント一覧
http://support.apple.com/kb/HT1538?viewlocale=ja_JP&locale=ja_JP