【design】インスピレーションを掻き立てる「白」と「黒」のWEBデザイン

zaum.co.uk

WEBデザインにおいて視覚的に重要な要素のひとつ「色」に注目して、さまざまなサイトを集約。勉強の糧とする。
過去には当ブログでも「【WEB】31の緑いっぱいなWEBデザイン」などを取り上げてきましたが、今回は「白と黒」。
55 Inspirational Original White and Light Web Designs | reADactor
45 Original Dark and Black Web Designs | reADactor

個人的に好きなものを挙げてみます。

白を基調とした55のインスピレーションを掻き立てるWEBデザイン

「白」を基調とした場合、「空間の表現」「余白の表現」「見せるべきコンテンツをより際立たせる配慮」がポイントでしょうか。
手を抜くと没個性に見られてしまいますし、サイトの役割やコンセプトにもよりますが、際立った個性を演出するのは相当難しいと個人的には感じています。

The Typographic Desk Reference [TDR]
The Typographic Desk Reference [TDR]

Rebecca Ruth Photography | London Wedding Photography
Rebecca Ruth

Neutra: Theme for WordPress | Artmov: Blog – Frontend Agency
Neutra (Free WordPress theme)

Minimal WordPress Portfolio Preview – ThemeForest
Minimal

FRKT
Forrykt


黒を基調とした45のダークテイストなWEBデザイン

日本では個人サイトに多い黒背景ですが、企業サイトやECサイトでは滅多にお目にかかれません。
やはり黒は不吉なもの、邪悪なものとして捉える傾向があるからです。

日本人古来の感覚かと思われがちですが、私はそうではなく、現代日本人特有の感覚なのだろうと思っています。
黒というと商慣習上忌み嫌われる色として捉えられていますが、上手に使えば高級感・贅沢感を演出することもできますし、特に「光の演出」においては非常に有効な色合いです。

海外のWEBサイトを見ていると、黒という色は必ずしもネガティブなイメージでは捉えられていないように思います。
大手企業のサイトでも黒基調のものがありますし、演出の中でうまく使っていますね。

Outstander.net – Need I say more?
Outstander

Download XP Codec Pack
XP CodecPack

Beautiful web design & development | Two24 Studios – Denver, CO
Two 24 Studios

Starbucks Coffee At Home
Starbucks Coffee

Joomla Templates – Quasar – January GPL 2010
Quasar 2013 Free joomla template from RocketTheme

Homepage » IDC
IDC

Magnifico HTML/CSS Preview – ThemeForest
Magnifico


白と黒、モノトーンな色彩感覚は、実は日本人には馴染みが深く、表現のバリエーションも豊かなはずだと思っています。
というのも、古くは水墨画があり、近代では漫画であり、モノトーン独特の感覚は自然と身についているのではないかと。

それなのに、商業デザインにおいて、特に企業のWEBサイトにおいては、無難なデザインに終始している現在の傾向は、勿体無いというか、ある種の憤りすら感じられます。
もっと自由に、表現の多様性を認められるよう、表現者も表現を依頼する側も表現を享受する側も成熟していく必要があるかなあとも思いますね。

日々勉強ですね。


Balance in Design 美しくみせるデザインの原則
Balance in Design  美しくみせるデザインの原則 Kimberly Elam

おすすめ平均5つ星のうち4.5
5つ星のうち3.0バランスとは何か
5つ星のうち4.0一つのアプローチとして
5つ星のうち5.0「美しい」という概念についてのデザイン法則
5つ星のうち5.0これからデザインを学ぶ人へ
5つ星のうち5.0数学的理論の先にあるもの…デザイン?

Amazonで詳しく見る by AZlink


Design rule index―デザイン、新・100の法則
Design rule index―デザイン、新・100の法則 William Lidwell,Kritina Holden,Jill Butler

おすすめ平均5つ星のうち4.5
5つ星のうち5.0デザインは心理学
5つ星のうち4.0美しい装丁!
5つ星のうち5.0納得できる1冊
5つ星のうち4.0良い物を作るために感覚としてプロが行っていることを文章にした本
5つ星のうち5.0デザイナーじゃなくても

Amazonで詳しく見る by AZlink


デザイン・ルールズ デザインをはじめる前に知っておきたいこと
デザイン・ルールズ デザインをはじめる前に知っておきたいこと 伊達千代,内藤タカヒコ

おすすめ平均5つ星のうち4.0
5つ星のうち5.0初心者にお薦めしたい本
5つ星のうち2.0初心者向けでわかりやすいけど
5つ星のうち4.0誤解を恐れずに言えばWebの人向け
5つ星のうち3.0キャリアのある人には向かない
5つ星のうち5.0シンプル イズ ベスト

Amazonで詳しく見る by AZlink


ノンデザイナーズ・デザインブック [フルカラー新装増補版]
ノンデザイナーズ・デザインブック [フルカラー新装増補版] Robin Williams,吉川 典秀

おすすめ平均5つ星のうち4.5
5つ星のうち5.0デザインの初歩の本では一番良かった
5つ星のうち4.0素人には最適
5つ星のうち5.0「当たり前」を再確認して「素人にしては上出来」が作れるようになる一冊。

Amazonで詳しく見る by AZlink


7日間でマスターする配色基礎講座 (Design beginner series)
7日間でマスターする配色基礎講座 (Design beginner series)

おすすめ平均5つ星のうち4.5
5つ星のうち4.0読みやすかったです。
5つ星のうち5.0自分のイメージに近づける一冊
5つ星のうち4.0お堅い専門書と違って、
5つ星のうち5.0わかりやすいのが一番!
5つ星のうち5.0配色のなんと奥の深いことか!

Amazonで詳しく見る by AZlink