ジャンクワードの森:[Webサイト構築]Webセーフカラーを使わないデザイン

2008-09-08

[Webサイト構築]Webセーフカラーを使わないデザイン

最近、周りでちょっとしたサイト構築ブームがあって、構築方法について聞かれることが増えてきています。

そこで、Webサイト構築についてまとめようかと思っている最中なんですが、ちょっと盛り込み過ぎてしまい完成までに時間が掛かりそうな雰囲気があるので、取りあえず小出しにしていこうかと思います。※「Webサイト構築」ってカテゴリー作りました。

その第一弾がWebセーフカラーを使わないデザインです


Webセーフカラーはどんなパソコンでも間違いなく表現できるので、使った方が安心なんですが、216色しかなく、色的にもはっきりとした色(明度が高い色)が多くて、ばっちりした印象にはなりますが、ベタ塗りの領域が増えると若干(?)野暮ったくなっていきます。


そこで、Webセーフカラーへの拘りを捨てて、それ以外の色も使いながらデザインしていくと表現の幅が広がり、何気におされなサイトになっていきます。

Webセーフカラー以外の色


そうはいっても、あまりにも数が多くなってしまい、どんな色がいいのか迷ってしまう事もあると思いますので、サンプルカラーを作ってみました。

緑系
  • 若芽色
    わかめいろ
    #e0ebaf

  • 若菜色
    わかないろ
    #d8e698

  • 苗色
    なえいろ
    #b0ca71

  • 夏虫色
    なつむしいろ
    #cee4ae

  • 柳色
    やなぎいろ
    #a8c97f

  • 白緑
    びゃくろく
    #d6e9ca

  • 浅緑
    あさみどり
    #88cb7f

  • 錆青磁
    さびせいじ
    #a6c8b2


青系
  • 白菫色
    しろすみれいろ
    #eaedf7

  • 藍白
    あいじろ
    #ebf6f7

  • 水色
    みずいろ
    #bce2e8

  • 秘色色
    ひそくいろ
    #abced8

  • 空色
    そらいろ
    #a0d8ef

  • 勿忘草色
    わすれなぐさいろ
    #89c3eb

  • 浅縹
    あさはなだ
    #84b9cb

  • 天色
    あまいろ
    #2ca9e1


紫系
  • 淡藤色
    あわふじいろ
    #bbc8e6

  • 藤色
    ふじいろ
    #bbbcde

  • 紅掛空色
    べにかけそらいろ
    #8491c3

  • 白藤色
    しらふじいろ
    #dbd0e6

  • 藤紫
    ふじむらさき
    #a59aca

  • 薄葡萄
    うすぶどう
    #c0a2c7

  • 紅藤色
    べにふじいろ
    #cca6bf

  • 浅紫
    あさむらさき
    #c4a3bf


赤系
  • 薄桜
    うすざくら
    #fdeff2

  • 虹色
    にじいろ
    #f6bfbc

  • 薄紅
    うすべに
    #f0908d

  • 鴇色
    ときいろ
    #f4b3c2

  • 撫子色
    なでしこいろ
    #eebbcb

  • 梅鼠
    うめねず
    #c099a0

  • 鴇浅葱
    ときあさぎ
    #b88884

  • 赤紫
    あかむらさき
    #eb6ea5


橙系
  • 土色
    つちいろ
    #bc763c

  • 江戸茶
    えどちゃ
    #cd8c5c

  • 狐色
    きつねいろ
    #c38743

  • 萱草色
    かんぞういろ
    #f8b862

  • 柑子色
    こうじいろ
    #f6ad49

  • 黄丹
    おうに
    #ee7948

  • 小麦色
    こむぎいろ
    #e49e61

  • 赤朽葉色
    あかくちばいろ
    #db8449


黄系
  • 蒸栗色
    むしぐりいろ
    #ebe1a9

  • 女郎花
    おみなえし
    #f2f2b0

  • 淡黄
    たんこう
    #f8e58c

  • 鳥の子色
    とりのこいろ
    #fff1cf

  • 蜂蜜色
    はちみついろ
    #fddea5

  • 刈安色
    かりやすいろ
    #f5e56b

  • 金糸雀色
    かなりあいろ
    #ebd842

  • 芥子色
    からしいろ
    #d0af4c


黒系
  • 胡粉色
    ごふんいろ
    #fffffc

  • 白磁
    はくじ
    #f8fbf8

  • 乳白色
    にゅうはくしょく
    #f3f3f3

  • 白練
    しろねり
    #f3f3f2

  • 灰青
    はいあお
    #c0c6c9

  • 薄鈍
    うすにび
    #adadad

  • 錫色
    すずいろ
    #9ea1a3


  • すみ
    #595857




テキスト(黒)が読みやすいのと、個人的な趣味でピックアップしたので、これ以外でもいい色はたくさんありますから、気になった方は各自調べて見てください。

ここに色相環の見方とか、色の組み合わせとか、色々やっていくともっといいんですが、知識的に足りなので、これくらいです。


Posted by yuji at Monday

Permalink | Comments [5] |

コメント

はちみつ色!かわいいですね〜。
この色のチョイスいいなぁ。使わせていただきます^^

Posted by: オレンジスカイ at 2008-09- 8 08:21 PM
私ごのみのびみょーな色がたくさん。。ありがとうございます。おされなさいとが作れるようになりたい!
続編楽しみにしております。

yujiさんはグレーの使い方がすんごい上手ですよね。グレーを上手く使っているサイトって上品で大好き♪

Posted by: ゆっぴ at 2008-09- 9 12:33 AM
◆オレンジスカイさん
色の雰囲気もそうですが、呼び名がまたいい幹事なんですよね。秘色色(ひそくいろ)なんて知らないですよ普通

◆ゆっぴさん
>yujiさんはグレーの使い方がすんごい上手ですよね。グレーを上手く使っているサイトって上品で大好き♪
ありがとうございます。色使いに自信がないので、モノトーンになっているのが、本音のところなんですけど、、、

濃い目の色もいいんですが、塗りの面積が大きくなると思ったより濃くみえてしまうので、小さいときには薄いくらいのほうが丁度よくなります。


Posted by: yuji at 2008-09- 9 01:04 AM
これ、スゴイ!
淡い色は、怖くて使えなかったんだけど、
使いたかったんですよ!
これは、永久保存版です!


Posted by: ちわまま at 2008-09- 9 08:15 AM
◆ちわままさん
画面でみればわかるとおり、淡い色でもしっかりとでていると思いますから、使っちゃって大丈夫です。
※書いていませんが、この色は画像ではないです。

>これは、永久保存版です!
いやいや。。。もっと沢山いい色もありますから、色々調べてお気に入りの色を見つけてください。


Posted by: yuji at 2008-09- 9 02:33 PM

このエントリーへのダイレクトリンク

<a href="http://wjw.boo.jp/blog/archives/001592.html" target="_blank">ジャンクワードの森:[Webサイト構築]Webセーフカラーを使わないデザイン</a>

このエントリーのトラックバックURL

http://wjw.boo.jp/cgi/mt/mt-tb.cgi/1509

このエントリーへのトラックバック

Copyright (C) 2004-2008 Junk Word All Rights Reserved