ガジェット通信

見たことのないものを見に行こう

今っぽい!色使いの手法が参考になる素敵なサイトデザインまとめ

DATE:
  • ガジェット通信を≫

こんにちは、デザイナーの藤田です。
皆様の中には、デザイン時に配色で悩まれる方も多いのではないでしょうか。今回のブログでは、色使いの手法が素敵かつ斬新なサイトを取り上げたいと思います。

色使いの手法が参考になるサイトまとめ

今回は3パターンにわけてピックアップしてみました。

1. 脱フラットデザイン!?今っぽいグラデーション

海外のサイトやファッショナブルな題材を扱ったサイトでは、フラットな配色ではなく、グラデーションを用いたものが多く見られるようになってきましたね。

フラットデザインが流行する前は、「明度」や「彩度」の変化でグラデーションを作成することが主流でしたが、そこに「色相」の変化を加えることでより今っぽい印象になるように思います。

また、グラデーションを使用する箇所についても、以前はリンクなどのインタラクションを起こすパーツに使っていたのに比べ、現在はプログレスバーや画像の背景、画像の前面などにオーバーレイさせる手法が多いようです。

グラデーションを取り入れた参考サイト

plantica
http://plantica.net/
Malte Demuth
http://www.maltedemuth.com/
VN Star
http://vnstar.com.ua/en/
株式会社3ミニッツ
http://www.3minute-inc.com/

2. 潔く、オシャレ!カラーが引き立つモノトーン

アクセントカラーを一つに絞ることにより強い印象を残すことができ、ミニマムなデザインにとても相性の良い手法かと思います。

ワントーンのデザインには印象が重くなりすぎる懸念がありますが、以下の事例ではレイアウトに余白を十分もうけたり、ボタンをゴーストボタンにしたりと、色の占有面積が大きくなりすぎないような工夫がなされています。

モノトーンの参考サイト

Nine Sixty
http://www.ninesixty.co.uk/
Phoenix the Creative Studio
http://agencysurvivalkit.com/
Alessandro Risso
http://www.alessandrorisso.com/

3. マンネリ防止!補色や反対色で印象をコントロール

個人的な話ですが、私は同系色や同トーンでまとめることが多いので、補色や反対色を用いたサイトを見ると、すごく色使いの上手なデザイナーさんだなと思ってしまいます。
また、このような配色にすることで、色の本来持っている印象以上に印象をコントロールできるのではないでしょうか。

補色や反対色を配色に用いたサイト

MABE
http://www.mabehair.com.au/
jour couture
http://jour-couture.jp/
PANIC
http://www.panic.lv/en/

まとめ

いかがでしたか?
私はデザインを行う際に写真の色味調整も含め「色」に多くの時間をかけてしまうことが多いので、苦手意識を払しょくするために、今後も多くのサイトを見つつ勉強していこうと考えております。

それでは、また次回のブログでお目にかかりましょう!

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。