■ホームページの色彩計画とカラーバランス

色彩計画の良し悪しはホームページへのアクセス数を左右すると言ってもいいほど、重要なポイントです。そのページを訪れた時に最初に目に飛び込んでくるパンチの利いたカラー。はたまたアンカーページに至まで目に疲れを感じさせずテキストを心地よく読み進める優しいカラー。など、作者の制作意図が色彩計画にしっかりと反映されれば、きっと心に残るページに仕上がるでしょう。

■コンテンツに合ったイメージカラーを決めましょう。
この時点ではすでにコンテンツの内容もかなり煮詰まっているはずですよね。そのコンテンツからイメージする色はなんでしょう? 下に一般的なイメージを記入してみましたので、あなたのコンテンツと照らしあわせてみてください。(もちろん異論もおありでしょうが、参考までに)

(※下記のリンク先はNetscape Navigator 3.0以降・フルカラー環境に最適化)

●明度
【明るい】 かるい・開放的・動的・親近感・・・
【暗い】 重たい・閉鎖的・静的・高級感・・・

●彩度
【ハデ】 自由奔放・自己主張・動的・親近感・楽しい
【地味】 規律正しい・協調性・静的・高級感・寂しい

●色相
【青系】 清潔・さわやか・信頼・正義・賢さ・整理・涼・地球・空・海・水・夏・・・
【赤系】 熱血・恐怖・血・危険・警告・緊急・日の丸・団結・火・消防車・ポスト・・
【黄系】 パワフル・ポップ・遊び心・危険・注意・安い・楽しい・躍動的・・・
【緑系】 安心・安全・自然・説明・取り決め・案内・・・

●無彩色
【白・グレー・黒】 堅い・賢い・ハイセンス・未来的・誠実・落着き・安定・無味・・・

●フォントカラー・サイズから受けるイメージ(※フォントの項と同じものです)
まったく同じ内容の文章を、それぞれ異なる配色とフォントサイズで表現してみました。かなりイメージが違ってきます。(※Netscape Navigator 3.0に最適化)

・モノクロ
・高級感・ハイセンス
・重厚感
・一般的
・パンチ
・ビビット


テーブルタグのバックグラウンドをはじめ、ますますカラー指定をする機会が増えてきました。そこでこのテーブルタグを使用してカラーチャートを作ってみましたのでご利用くださいませ。
■オリジナルHEX 4096色カラーチャート!!
HEX COLOR CHART
(※このカラーチャートはNetscape Navigator 3.0以降・フルカラー環境に最適化)


HEXの指示は難しいものです。そこで、たいへん便利なツールを紹介しておきます。実際に色指定をする場合は、これらを参考にすればよいでしょう。
(※下記のリンクはインターネットに接続してご利用ください。)

■便利なツール
●HTML Effects Generator 2.0
Macintosh用シェアウェアアプリケーション THowland (AOL)作
カラーピッカーでポイントすれば<BODY>タグを生成してくれます。また<HTML><HEAD><TITLE><BODY><BASEFONT>までの開始と終了タグを書類に書きだしてくれるので重宝します。

●Body Builder 1.0
Macintosh用フリーウェアアプリケーション 高木敏光 作
各項目ごとにカラーパレットをクリックするだけで自動的に<BODY>タグを生成してくれるツールです。また、スポイドでポイントしたカラーをリアルタイムにHEX表示する機能があり、非常に重宝します。

■便利なホームページ
●colortable (色のテスト)
背面色と文字のカラーバランスをJAVAscriptを使用してテストできるページです。


※色彩についても、いろいろな美しいページをたくさん見ることが勉強となります。日頃から美しいページのソースを見て研究したり、BODYタグのカラー指定部分をクリッピングしておきましょう。
[戻る] [選ぶ] [進む]