トップページ > ロジックオブデザイン【目次】 > レイアウト【目次】 > 配色の決定 > 色見本
色見本
色の組み合わせによってサイトの印象は変わります。といっても配色が絶対ということはありません。 レイアウトとや各要素の性質、そして配色の関係の中で総合的な印象というものは決まります。
ただ、その中でも配色の持つ意味は大きいと僕は思います。サイトの「第一印象」を決めるのは 配色であるといってもいいでしょう。
以下は各印象ごとの配色ポイントと色見本です。サイト制作の参考にしてみてください。 ちなみに色は全てWebセーフカラーで表現しています。カラーコードも添えておきます。 よかったらコピー＆ペーストで活用してみてください。
<表示例>以下のような番号でカラーコードを表示しています。
Web Design
Coloring Sample
1.背景色 2.「Web Design」の色 3.「Coloring Sample」の色Coloring Sample
ダイナミックなイメージ
ダイナミックなイメージはインパクトの強い色をキーカラーにし、他の色とのコントラストを強め にすることで生まれます。赤のような刺激の強い色が使いやすいと思います。
Web Design
Coloring Sample
1.#ff3300
2.#ff9900
3.#000000
Coloring Sample
Web Design
Coloring Sample
1.#0033ff
2.#ffff00
3.#ccffcc
Coloring Sample
Web Design
Coloring Sample
1.#000000
2.#ff9900
3.#ff3333
Coloring Sample
クールなイメージ
クールなイメージは寒色系を基調にトーンの低い色で統一しましょう。アクセントとして鮮やかな 色を使うと効果的です。
Web Design
Coloring Sample
1.#cccccc
2.#666699
3.#000033
Coloring Sample
Web Design
Coloring Sample
1.#669966
2.#cccccc
3.#ffffff
Coloring Sample
Web Design
Coloring Sample
1.#666699
2.#cc9999
3.#cccccc
Coloring Sample
キュートなイメージ
キュートなイメージはパステルカラーで統一し、暖色系の色を使いましょう。ピンク系の 色が使いやすいと思います。
Web Design
Coloring Sample
1.#ff9999
2.#ffffff
3.#99ffcc
Coloring Sample
Web Design
Coloring Sample
1.#ff9966
2.#ffccff
3.#ffffff
Coloring Sample
Web Design
Coloring Sample
1.#ffffff
2.#ff9999
3.#ff9900
Coloring Sample
ポップなイメージ
ポップなイメージはできるだけ多くの色相を使って鮮やかな色でまとめましょう。トーンの高い色 を選択します。
Web Design
Coloring Sample
1.#ffffcc
2.#ff3333
3.#ff9933
Coloring Sample
Web Design
Coloring Sample
1.#6699ff
2.#ffffff
3.#ff9900
Coloring Sample
Web Design
Coloring Sample
1.#ff9933
2.#ffff00
3.#ffffff
Coloring Sample
シンプルなイメージ
シンプルなイメージは同じトーンの色で統一しましょう。彩度は下げて、はっきりする色は 使わないのがポイントです。可読性には注意してください。
Web Design
Coloring Sample
1.#cccccc
2.#ffffff
3.#9999ff
Coloring Sample
Web Design
Coloring Sample
1.#cc9999
2.#ffffff
3.#cccccc
Coloring Sample
Web Design
Coloring Sample
1.#cccc99
2.#cc6633
3.#ffffff
Coloring Sample
