0

自然と人工的な配色

自然に見える配色と、人工的に見える配色について説明します。

 

◎ナチュラルハーモニー
=ナチュラルな配色。
暖色系の色は明度を高くし、寒色系の色は明度を低くすることで
自然な色を演出できます。
さらに、明るい色は黄みよりの明るい色にし、
暗い色は青みよりの暗い色にすると自然な印象になります。

 

◎コンプレックスハーモニー
暖色系の色は明度を低くし、寒色系の色は明度を高くすることで
不自然な色を演出できます。
さらに、明るい色は青みよりの暗い色にし、
暗い色を黄みの明るい色にすると不自然な印象になります。

 

※人工的なイメージがある配色
基本的には鮮やかな色をぶつけあうと、人工的でぎらぎらとした
刺激のある色になります。
ですので、上記の二つを表現したいときはこのような鮮やかな色の
使いすぎは極力さけたほうが良いでしょう。

人工的なイメージの配色の組み合わせは
「不思議さ」「未来的」「幻覚」などをテーマにホームページ制作を
する際には当てはまります。そのときは、100%鮮やかにすることをおすすめします。

0

スタイリッシュな配色

スタイリッシュな配色

 

スタイリッシュとはハイセンスという意味になります。
余白を多めにとる・寒色をベースに色数を少なくしてシンプルにまとめる。
などするとスタイリッシュな配色に近づけることが出来ます。

 

●スタイリッシュのイメージとは

無彩色で無機質を演出し、寒色のグレイッシュ・トーンを基調にまとめると
スタイリッシュを表現できます。
色の数を最小限に抑えれば抑えるほど、スタイリッシュ感が出ます。

 

●クールさをイメージさせる配色

透明感のある色を高明度・中彩度でまとめると、都会かつ清楚な印象になります。
明るいトーンの同一色相でまとめるとクールさをイメージさせる配色となります。

 

●スタイリッシュな配色においてのNG

・暖かさを感じさせる色の使用
※人工的で無機質な感じを表現することがスタイリッシュな配色に
なるので、基本的にはワンポイントでも暖色が入るとイメージが変わってきてしまいます。

0

色面積で印象を強くする

色の面積を大きくして形をよりはっきりと見せることで、力強い印象になります。

 

色面積を大きくして、力強い印象にする

 

ホームページ制作のデザインにおいて、デザインにメリハリをつけるために
ある箇所を強調したいときがあります。
そういったときは、色ベタの面積を多くすると力強い印象になります。

 

注目させたい部分には大きな面積を配置することも効果的です。
例えば、タイトル部分に大きな色面積を使用すれば、そこに視線が集まり
目立ちやすくなります。

 

また、少し話がそれますが、
そこの近くに同じ色の小さな色面積を配置すると、大きなものと比べて
色の濃淡が異なって見えます。
大きな色面積は本来の色よりも「薄く」見えます。
小さな色面積は本来の色よりも「濃く」見えます。
これを「面積対比」と言います。

 

※色ベタとは
指定した範囲に濃淡をつけずに、色をおくこと

 

0

共通色を使った表現

■ホームページ制作時のデザインにおける配色について説明します

 

共通色を上手く使った表現方法

 

コンテンツの内容が豊富で要素が多く、全体がごちゃごちゃしてしまった・・・
そんなときは離れた場所に同じ色や同系色・類似色を配置することで全体が
まとまりやすくなります。

 

ここでポイントなのは、近い場所ではなく、離れた場所かつ
大きな色面積と、小さい色面積を組み合わせた方が効果が
出るということです。

 

これらを上手く活用することで、全体がまとまり、
引き締まった印象を与えることが出来ます。
また、色面積を大きくすると力強く活気のある印象を与えることも出来ます。
こちらに関しては、また次回に説明させていただきます。

 

0

中性色でまとめる配色

 

ホームページ制作における
緑や紫などの中性色で配色をした際のポイントや効果について

説明します。

 

中性色で独特な雰囲気を出す配色方法

 

●ポイント
中性色は寒暖や男女らしさのイメージがつきにくく、不思議なイメージを
与えます。
明度の高い組み合わせだと、軽さが出るので比較的他の色にも合わせやすい
ところがあります。
また、彩度が高いとミステリアスなイメージを与えます。

 

紫でまとめると優雅で上品、大人の女性をイメージさせます。
緑でまとめると癒しや、落ち着いたイメージになります。

 

最後に紫と無彩色(黒、白、グレー)を合わせるとクールに見せたり、
モダンに見せることも出来ます。

 

ホームページ制作で中々こういった色を使うことは少ないかも
知れませんが、こういった配色もあります。

0

モノクロにして色を強調する方法

 

ホームページを制作するときのデザインについて、
目立たせたい箇所をカラーにし、他の箇所をモノクロにすることで
そこのカラー部分が強調される法則について説明します。

 

モノクロにして色を強調する方法

●モノクロ画像の特徴について
モノクロの画像は彩度よりも明度で表現する分、カラーよりも
情報量が少なく、やや抽象的な印象になります。
モノクロの一般的な特徴としては
時代感を出したり、まるで時が止まっているような感覚を
見る人に与えます。
また、被写体によっては知的で芸術的な印象を与えます。

 

●一部分のみカラーを残して、モノクロにする
色を強調するうちの一つとして、一部分のみカラーを残し
ほかをモノクロに加工することで、カラー部分が浮き上がり
ドラマチックな印象になります。

 

色を多く使用すると、悪い言い方ではありますが雑な印象に見えることがあります。
そういったときに、上記の方法を行うことで印象が落ち着き、
文字や素材が配置しやすくなります。

ホームページ制作をしていく中で、配置について悩んだりした際は
この方法もぜひ、視野に入れてみてください。

0

デザイナーの仕事で用意する物(初心者向け)

こんにちは!

デザイナーの仕事に少し興味がある方へ、実際使っている物を紹介します。

Windows 7

ボールペン
シャープペンシル
えんぴつ(いきなりマウスで絵は描けません)
消しゴム
タブレット
デジカメ(スキャナー代わりにもなります。)

ブルーライトカットメガネ

仕事中のラフやメモ様に、裏紙たくさん。

持っている データなど

ロイヤルティフリーの素材写真CD-ROM(手持ちに無い素材はstock.xchngなどのサイトで探す。)

フォントCD-ROM
自分でせっせと集めたロイヤルティフリーのアイコンたち

 

パソコンにインストールしている物

WinSCP
Photoshop
Illustrator
Dreamweaver
firefox
IE
Chrome
DropBox(お家のパソコンとデータ共有できる。)
など

物ではありませんが、ブラウザにインストールしているもの

MeasureIt! 1.1.3  (バナーやアイキャッチのサイズが測れる。)

Screen Capture 5.0.6(Webページがスクロールの下部まで丸ごとキャプチャできる。)

はてなブックマーク GoogleChrome 拡張 1.3.4(ブラウザがバビロンにやられてブックマークが消えても
オンライン上にあれば安心。http://css3button.net/などのジェネレータをマーク。)

?