GAUZINE

[GAUZINE:006] Lynda Weinman

================================================== No.006 99/09/15 ===

  W E B  D E S I G N E R S  M A G A Z I N E  G A U Z I N E

     [BACK NUMBER]  http://www.gaucho.com/gauzine/back/ 

======================================================================
                         配信部数:4,314部
『GAUZINE』 No.006 のラインナップ
 ┃
 ┣『色について』「色の選択から、組み合わせ、まとめ方など」
 ┣『WEBデザイナー養成講座/実践編』「Webデザイン解析編」
 ┣『GREAT WEB CREATORS』「IMG SRC」Koji Ito
 ┣『BOOKMARKS』「おすすめFlashサイト」
 ┗『編集後記』「インデックスデザインアワード」「MATRIX」

======================================================================
『色について』
  「色の選択から、組み合わせ、まとめ方など」
======================================================================

今回は、WEB制作上の「色」の問題について考えてみたいと思います。
といってもわたくし自身、特に色彩理論を学校で学んだわけでもないので、あ
くまで自分の経験をもとにした主観的な意見として聞いていただければ幸いで
す。

◆ WEB上での色の考え方
ユーザー環境によって、見え方の異なるWEBサイトは、色においても同様であ
り、マシン環境やモニター調整の違いにより、色も異なって見えているもので
す。MacintoshとWindowsの場合、ガンマ値の違いにより、モニターで再現され
る色もやや異なり、印象もかわってきます。さらに、ユーザー側でも、モニ
ターの明るさやコントラストをそれぞれ自分の好みに調整しているため、微妙
な違いがあるのが現状です。

では、何を基準に色を決定していけばいいのかということになりますが、実は
非常にむずかしい問題なのです。個人的な考え方としては、ユーザーの多い
Windowsマシンの見え方に最適化するか、またはMacintoshとWindowsの中間的色
調に設定するかなど、いろいろな考え方があるかと思いますが、こればっかり
ははっきりした基準がないといってもいいかと思います。

ただ、WEB制作を行なう場合、こうした問題をクライアント側も制作者側もしっ
かり認識しておかないと、自分のマシン環境だけを見て、この色はちょっと違
うとか、この色をもっと淡くしてほしいとか、結論のでない問題に時間をかけ
てしまうこともあるわけです。企業の場合、よくコーポレイトカラーに対する
こだわりがあるので、色に対する注文も細かい場合がありますが、完全に再現
するというのは実際には不可能なわけで、あくまで近似色で妥協していただく
というふうに考えていただくのが一般的かと思います。

以前、化粧品のサイトを2つほど作ったことがありますが、そのときもファン
デーションの色とか、リップの色とかを調整するのに結構苦労しました。
Macintosh環境でやや淡めに調整した色をWindows環境でチェックしたのち、印
刷物の色を見ながら、何回か調整を繰り返したりしました。

最終的には、Windows環境で見ても、Macintosh環境で見ても、その差があまり
大きくならない程度の中間的な色調でディレクターのOKがでました。もちろ
ん、それでも不十分なわけですが、WEB制作者のできることとしては、平均的な
モニター環境で見て、より本来の色に近い色調を再現できるよう努力してい
く、ということになるかと思います。

◆ 色の選択
さきほどの例は、もともと決まった色があり、それにいかに近づけていくかと
いう話でしたが、もしそうした制約がない場合、自分の判断で色を選択してい
けることになります。

では、どうやってその色を選択していけばいいのでしょうか。
この場合の色というのは、
 ・背景色と文字色
 ・リンク色や訪問済リンク色
 ・フレームやテープルの背景色
 ・タイトルロゴやイラストの色調
などをさします。

これらの色はすべて連動した関係にあり、背景色がきまれば、自然とそれに合
う文字色やリンク色の候補がでてくるわけです。では、そのもとになる背景色
はどうやって選択するかといえば、そのサイトで表現したい雰囲気や、サイト
の内容、コンセプトに沿ったイメージカラーなどが関係してくることになります。

単純な例ですが、明るい印象のサイトにしたければ、暖色系の色を使うとか、
クールな印象にしたければ、寒色系にするとかというように、使う色により、
そのサイトの雰囲気は大きく変わるので、その選択も慎重に行なう必要がある
わけです。

◆ 色の組み合わせ
色を選択する場合、どこの色から決定していくかという問題がありますが、こ
れもさまざまな考え方ができると思います。
前述の例では、
サイトの雰囲気→背景色の決定→文字色の決定→リンク色の決定
という流れで進んでいくよう説明しましたが、すべてがこれにあてはまるわけ
ではなく、サイトの雰囲気を決めるイメージカラーを、フレームで分割した部
分の背景色にもってきたり、テープルで組んだ背景色に使ったりする場合もあ
るわけです。

結局、色というのは、そのまわりにある他の色との「関係性」が大切であり、
単独で見た色の印象と、その色が他の色と並んだときに見える印象とではかな
り異なるわけです。そういう意味で、それらの色をどう組み合わせるかという
「配色」という考え方が重要になってくるわけです。

◆ 背景色と文字色の決定
「配色」を考える場合のもっともシンプルな例が、背景色と文字色だと思いま
す。背景色を黒にして、文字色を濃紺なんてしたら、非常に読みづらいわけ
で、一般的には背景色にあった読みやすい文字色というものがあると思います。
そういう意味で白背景というのは、さまざまな色の組み合わせが可能なため、
WEB上でも広く使われているのだと思います。

背景を白にして、文字を黒や濃いグレーなどにするのが、もっとも無難な選択
なのかもしれませんが、それでは、どのWEBサイトも同じになってしまうわけ
で、WEB制作者がさまざまな配色に挑戦して、いろいろな雰囲気のサイトを創り
だしてくれているわけです。それらのさまざまな「配色」の例を自分の目で見
ながら学んでいくことは、ひじょうに有効な勉強方法だといえます。

最近、「九谷焼」を紹介するサイトを作っていますが、その際も「九谷焼」の
もともと持っている鮮やかな色を再現するため、背景色はコントラストの強
い、黒やダークグリーンを使って配色してみました。主役は「九谷焼」であ
り、その写真のもつ色あいを生かす目的で、その背景色を決定する場合もある
わけです。

◆ リンクカラーの決定
特にリンクカラーを設定しなければ、ブラウザのデフォルトの色が設定されま
す。Netscapeでいうと、プルーのリンクと、パープルの訪問済リンクカラーで
す。リンクカラーを変更すると、ユーザーが混乱するので、あくまでデフオル
トカラーを使おうという考え方もありますが、背景色を変更した場合、それに
あった色を使ったほうが、全体のバランスもいいので、背景色、文字色に合わ
せて、リンクカラー、訪問済リンクカラーも決めていけばいいかと思います。

これらを決定する場合、その組み合わせを確認した上で決定していきたいの
で、わたしは「BodyBuilder」というフリーウェアのツールを使っています。
背景色、文字色、リンク色がシミュレートしながら決定できるので、今だに重
宝しています。ほかにも、いろいろなツールやHTMLエディターを使っての配色
も便利なので、各自やりやすい方法で配色していけばいいかと思います。
その際大切なのは、何度も繰り返しシミュレーションすることにより最適な
組み合わせを発見することです。

◆ 色をどうまとめるか
印刷物の場合、モノクロ印刷とフルカラー印刷だとコストがかなり違います
が、WEBの場合、いくら色を使ってもコストは変わりません。かといって、色を
多く使えばいいものができるわけでもありません。色はあくまで、そのWEBコン
テンツを表現したり、演出したりするための重要な手段であり、やはりその選
択と組み合わせが大切になってきます。

どちらかといえば、多くの色を使いすぎるより、少ない色をうまく使い、メリ
ハリやコントラストをつけたほうが、シンプルで無難にまとまったりします。
WEB制作に慣れないうちは、つい多くの色を使いすぎてしまいがちになります
が、見やすさからいえば、色をしぼって配色している画面のほうが統一感が
あって、すっきりしています。

もちろん、WEBサイトの目的や内容やよって、その表現手法はさまざまなわけで
すが、「情報伝達」という側面で考えた場合、シンプルで統一感のある配色の
ほうがより多くのユーザーに好まれるような気がします。ときには、一端、
使った色をそぎおとしたりすることも必要でしょう。

そういう意味で、色の選択とその組み合わせは、とても深い世界であり、WEBサ
イト全体の雰囲気にも大きく影響してくるため、サイトの目標達成のための重
要な側面を担っているともいえます。

以下、配色に関するページをいくつかご紹介しておきます。
----------------------------------------------------------------------
◆ 色に関連するページ
┣ http://shinzo.com/6+/laBo/picker/col_set.htmlhttp://www.dakiny.com/color/http://www.snobuy.com/design/d4.htmlhttp://www.hidaho.com/colorcenter/cc.html  

======================================================================
『WEBデザイナー養成講座/実践編』
 WEB制作を行なう上での実践理論〜WEBデザイナーズ・バイブル[6]
 「リンダ・ワインマンWebワークショップ〜Webデザイン解析編」
======================================================================

◆「WEBデザイナーズ・バイブル」
今回から「WEBデザイナー養成講座/実践編」ということで、より実践的な内容
の書籍をご紹介致します。

 「リンダ・ワインマンWebワークショップ〜Webデザイン解析編」
     Lynda Weinman & Jon Warren Lentz 共著
      (MdN/インプレス/\3,800+税)
        [ http://www.ips.co.jp/items/5499/5499.htm ]

「Webデザイン入門編」「Webデザイン配色編」につづく、「リンダ・ワインマ
ンWebワークショップ」シリーズの第3弾です。「入門編」「配色編」もそれぞ
れWebデザインを行なう上での、基礎知識や配色理論が学べますので、書店で見
られた上で、もし自分に必要だと感じられた方は、購入されてもいいかと思い
ます。「Webデザイン解析編」は、6つの良質なサイトをピックアップして、そ
の制作プロセスをさまざまな角度で解説、分析したもので、実際のWebサイトデ
ザインのケーススタディとして、参考になる内容となっています。

とりあげてある6つのサイトを紹介しておきますと、

第1章 デザインと機能
 ┗ http://www.qaswa.com/ 
第2章 Web上の美術館
 ┗ http://www.si.edu/ndm/
第3章 ツールを巧みに用いた品の良さ
 ┗ http://www.boschtools.com/  
第4章 印刷とWebの相乗効果
 ┗ http://www.nationalgeographic.com/features/97/nyunderground/
第5章 テクノロジーを活用したデザイン
 ┗ http://www.akimbodesign.com/ 
第6章 Webマガジン
 ┗ http://www.atlasmagazine.com/ 

基本的な画像処理やレイアウトの手法から、Shockwave、Flash、DTHMLなどの技
術的解説まで、各サイトを詳細に解説、分析していくことにより、実際のWeb制
作に必要な知識や考え方が学べます。 どれも良質なサイトなので、そのメイキ
ングが読めるだけでも、かなり勉強になると思います。

----------------------------------------------------------------------
◆ lynda.com
┣ http://www.lynda.com/
┣ Fireworks tips : http://www.lynda.com/tips/fw2.html
┣ Dreamweaver tips : http://www.lynda.com/tips/dr2.html 
┗ about lynda : http://www.lynda.com/interview.html
----------------------------------------------------------------------
◆「リンダ・ワインマンWebワークショップ〜Webデザイン入門編」
┗ http://www.ips.co.jp/items/5456/5456.htm
----------------------------------------------------------------------
◆「リンダ・ワインマンWebワークショップ〜Webデザイン配色編」
┗ http://www.ips.co.jp/items/5467/5467.htm
----------------------------------------------------------------------

======================================================================
『GREAT WEB CREATORS』
    「IMG SRC」 http://www.imgsrc.co.jp/  Koji Ito
======================================================================
今回は「Kinotrope」「IMG SRC」と常に日本のWEBデザイン業界の先端を走り
つづけている伊藤幸治氏をご紹介致します。

わたしが最初に伊藤氏の存在を知ったのは1996年ごろで、当時の個人サイト
「WEB IN THE RYHTHM」からです。当時そのサイトのコンセプトとデザインが気
に入り、リンク依頼のメールを出したところ、快く了解していただきリンクさせ
てもらいました。その後、キノトロープから本を出版するという企画があ
り、その中で、Gauchoサイトを紹介してもいいですか、というメールをいただ
き、「カッコいいホ−ムペ−ジを作ろう!!」(97年1月初版)で紹介していただ
きました。

その後、97年4月、今の「WDC」 http://www.webdesign.or.jp/ の基礎となる
メーリングリスト「Web Design Mailing List」をスタートし、日本のWEBデザ
イン業界を盛り上げるきっかけを作った立役者ともいえます。

98年5月には「IMG SRC(イメージ・ソース)」を設立し、数々の優れたサイト
を世に送りだしています。(詳細は下記関連サイト参照)

また、WEBデザイナー必見の次世代型ナビゲーション・スキーム
「Navigation Voodoo」 
 ┗ http://www.imgsrc.co.jp/voodoo/ 
や、日本初、XML対応のWEB制作者向けポータルサイト
「Builder - X」 
 ┗ http://builder-x.imgsrc.co.jp/ 
など、数々の先端プロジェクトも手掛けられています。

雑誌 MdNの連載講座「Professional Web Design」も勉強になります。
 ┗ http://www.mdn.co.jp/Wdesign/Pwd/

今後の活躍がもっとも気になるWEBクリエイターのひとりです。

◆ 伊藤幸治氏 プロフィール
┗ http://www.imgsrc.co.jp/~itok/

◆ 伊藤幸治氏 関連サイト
┣ http://www.imgsrc.co.jp/http://netrezonator.imgsrc.co.jp/http://cb.suntory.co.jp/http://www.msdw.co.jp/http://www.vaionet.com/http://www.ntt-east.co.jp/
┗ その他多数

======================================================================
『BOOKMARKS』
  おすすめFlashサイト
======================================================================

今回は、注目の海外Flashサイトをいくつかご紹介します。
----------------------------------------------------------------------
◆ the remedi project
┗ http://www.theremediproject.com/
----------------------------------------------------------------------
◆ hillmancurtis.com 
┗ http://www.hillmancurtis.com/
----------------------------------------------------------------------
◆ wertco.com 
┗ http://wertco.com/flash/
----------------------------------------------------------------------
◆ Randall Larson
┗ http://people.mn.mediaone.net/gonzoz/
----------------------------------------------------------------------
◆ 415 Productions
┗ http://www.415.com/
----------------------------------------------------------------------

======================================================================
『編集後記』
 「Design Wedge/インデックスデザインアワード」「MATRIX」
======================================================================
メールマガジン「Design Wedge」にて開催されている「インデックスデザイン
アワード」で「GAUCHO」が第3回目のアワードを受賞させていただきました。
誠にありがとうございます。読者の皆さまも、一度チャレンジしてみてはいか
がでしょうか。応募方法は、 http://www.karadesign.com/designaward.html

「Design Wedge」もおすすめメールマガジンですので是非ご購読を。
 ┗ http://www.karadesign.com/designwedge.html

あと、映画「MATRIX」 http://japan.whatisthematrix.com/ 
ついに公開されましたね。さっそく観に行きましたけど、いろいろな意味で
スゴかったです。特に映像表現として、多彩なインスピレーションを感じさせ
てくれる作品ですね。ウォシャウスキー兄弟、見事やってくれました。
http://www.gaucho.com/cinema/essay/1999/0912.html


『GAUZINE』に関するご意見、ご感想、メッセージはゲストブックへ
 ┗ http://www.gaucho.com/cgi-bin/gauzine/im_bbs.cgi

次回発行は、10月6日(水)の予定です。
最後までご覧になっていただき、誠にありがとうございました。

====== WEB DESIGNERS MAGAZINE 『GAUZINE』 ==========================
 発 行    G A U C H O  [ http://www.gaucho.com/ ]
 編 集    尾崎 英明  [ mailto:gaucho@hal.ne.jp ]
 登録・解除  [ http://www.gaucho.com/gauzine/home.html ]
 メッセージ  [ http://www.gaucho.com/cgi-bin/gauzine/im_bbs.cgi ]
 Copyright(C) 1999. WEB DESIGN STUDIO GAUCHO. All rights reserved.
======================================================================

このメルマガは現在休刊中です

このメルマガは
現在休刊中です

ついでに読みたい

このメルマガは
現在休刊中です

他のメルマガを読む