DESIGN WEB

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

gladdesign 

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

Recommended Posts

TV

【TVドラマ】2025春(4月開始)ドラマリスト

2025年4月開始ドラマの中で個人的に気になったドラマ絞りに絞っての15本のリストである。
2025年前期の朝ドラ『あんぱん』(今田美桜主演)を除くと、突出して目玉となりそうな作品がないという寂しいラインナップ。
強いて言えば『対岸の家事~これが、私の生きる道!~』(多部未華子主演)が『私の家政婦なぎささん』のようなテイストに感じられ期待はしている。
あとは安定の日曜劇場が安定の阿部寛で臨む『キャスター』、瀕死のフジテレビの最後の徒花とならなければいいなと願う『続・続・最後から二番目の恋』(小泉今日子と中井貴一のダブル主演)に期待。

gladdesign 
MOVIE

【MOVIE】『怪物』(2023:日本)他者との対話で己を知ること

そのラベリングは正しいと言えるのか?
そんな問いを思い浮かべたのだが、観終わって、自分自身に自信がなくなってしまった。
他人の、ある一面だけを見て分かった気にならないように気をつけていても、見えていないことを理解することはとても難しい。
バイアスを持たずに、状況から事実だけを積み上げたつもりが、実は全く違う真相を持っていたりする。
事実がもしかしたら事実ではないかもしれない、と疑い始めたら、では何を信じればいいのだろうか?

gladdesign 
オールド・テロリスト
BOOK

【BOOK】『オールド・テロリスト』村上龍:著 幸福よりも大切なのは今と明日を生き延びること

戦争を経験した最後の世代が、後期高齢者となって現在の日本を憂い、革命を起こすべく立ち上がりテロを起こす。
そんな荒唐無稽な設定が、現実にあり得ないとは言い切れない、と思わせるほどのリアリズムで、精緻な筆致によって綴られている。
本書が刊行された2015年から10年経った2025年は、「団塊の世代」全員が後期高齢者になる。
戦後生まれの「団塊の世代」は戦争を経験していない先頭の世代である。
もう戦争を経験した世代が元気にテロを起こすことはないかもしれない。
だが、本作にはテロを起こすしかないと思えるほどの、ある感情が、今もなお日本を覆い尽くし、閉塞感を突き破るのではないかと問うているのだ。

gladdesign 

1 Comment

  1. […] This post was mentioned on Twitter by D2U. D2U said: [D2U] 【design】インスピレーションを掻き立てる「白」と「黒」のWEBデザイン: WEBデザインにおいて視覚的に重要な要素のひとつ「色」に注目して […]

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.