茶色を使ったシンプル、エレガントなウェブサイトデザイン50個まとめ

50brownwebsite

かちびとさんでも紹介されていたのですが、参考になりそうなウェブサイトデザインが多く集められていたので個人的なメモとしてエントリーです。

ウェブサイトデザインに茶色を使うことで、シンプルで、親しみやすく、信頼性を潜在的に表現することができるカラーとなります。

今回はそんな茶色を使ったクリエイティブなウェブサイトデザインを50個まとめた「50 Beautifully Brown Web Designs」をご紹介します。

 

まとめられたウェブサイトは、ブログやショッピングサイトなどさまざまなので、ウェブデザイン制作の参考になるかもしれませんね。

その中でも特に印象に残ったウェブサイトデザインをいくつかピックアップしてみました。

 

 

詳細は以下から。

 

 

茶色を使ったウェブサイトデザインまとめ


 

SpoonGraphics

UKを拠点に活動されているデザイナーさんのポートフォリオサイト。

茶色を基調とした落ち着いた印象のウェブデザインと水彩画のようなブラシがよく合っていますね。

brown_designs_2

 

 

AdFlovor

引っかき傷のついたウッドテクスチャを背景に使うことで自然の風合いをデザインしたサイトのひとつ。

シンプルですが、親しみやすい印象を与えてくれるウェブサイトではないでしょうか。

texturedsites18

 

 

Washtenaw Community College

アメリカの短期大学の公式ホームページなのですが、ポップで親しみやすいデザイン、カラーリングが特長。

手描きデザインがあちこちに配置されており、ユーザーの興味を惹きつけています。

オレンジ色がよいアクセントカラーとなっています。

brown_designs_1

 

 

New Concept

質感のユニークなテクスチャ素材を背景に使ったウェブデザインのひとつ。

半透明に透けたボックス枠などを使っており、スタイリッシュなイメージを与えてくれるウェブサイト。

茶色系のデザインの補色としては、オレンジや赤などの暖色系や緑などの自然系のカラーリングがうまくまとまります。

brownsites01

 

 

Nine Lion Design

ウッドテクスチャにベクターでデザインされたカラフルなイラストをあわせることでオリジナリティを出すことができます。

ベクターデザインももちろんサイトデザインと合った色を選ぶことが重要になってきそうです。

brownsites02

 

 

The Youth & Student Ministry of Open Doors

グランジデザインを使ったデザインにも茶色系ウェブサイトはうまくデザイン全体をまとめることができます。

テキストに使う色とのバランスもばっちりです。

brownsites03

 

 

Arqangraph

再生紙のようなちょっとした汚れのあるテクスチャを効果的に使ったデザイン。

グリッドを使った正方形を組み合わせることで、統一感のあるデザインを表現することができます。

背景に使われているテクスチャもユニークではないでしょうか。

brownsites06

 

 

RZmota

普段使っている机の上をそのままデザインしたような、一度見たら忘れられないデザインのひとつ。

デザイナーさんなどのポートフォリオサイトなどのデザインなどにもよいのではないでしょうか。

brownsites07

 

 

Youandgraphics

毛糸を編んだようなファブリックテクスチャを背景にデザインした面白いデザインのひとつ。

カラフルな煙状のデザインがサイトのアクセントカラーにもなっており、ポップな印象に仕上げています。

brownsites10

 

 

Momentify

デザイナーさんのポートフォリオサイトのひとつですが、明るいウッドテクスチャ背景がエレガントでオシャレに仕上がっています。

企業用ウェブサイトなどでも親しみやすいデザインの参考になるかもしれませんね。

brownsites11

 

 

Life in Mono

写真画像のみをシンプルに表示するギャラリー風デザインにウッド系の茶色デザインを使用したサイト。

茶色デザインにすることで、写真画像を引き立たせることができますね。

brownsites12

 

 

Casino Lemonade

茶色系デザインとライティングエフェクトをうまくあわせたデザイン性の優れたウェブデザインのひとつ。

背景に使用された幾何学模様のパターンと使われているマスコットキャラクターによってレトロな印象を与えてくれます。

brownsites16

 

 

Lounge Lizard

こちらも机の上をそのまま撮影したようなデザインを使ったサイトのひとつ。

最近良く使われているデザイン方法ですし、オリジナリティを出しやすいレイアウトではないでしょうか。

brownsites17

 

 

James Lai Creative

茶色系ウェブデザインには水彩絵の具で描いたような手書き風グランジデザインがよく合いますね。

またウィンドウ幅に関係なくデザインされた背景テクスチャが印象的でオリジナリティを出すことができます。

brownsites18

 

 

SugarRhyme

幻想的なライティングエフェクトを背景に使ったエレガントなウェブサイトのひとつ。

※ウェブサイトを開くと音がでるので閲覧にはご注意ください。

brownsites20

 

 

Alleviate Poverty

大きなタイポグラフィがインパクトのなるポップな印象を与えてくれるウェブサイトのひとつ。

テキストカラーに水色を使うことで、親しみやすい雰囲気を作り出すことができますね。

brownsites48

 

 

Julius Mattson

ウッドテクスチャの質感を整えるだけで印象ががらりと変わります。

こちらはデザイナーさんのポートフォリオサイトですが、ダーク系のウッドテクスチャが重厚なイメージに仕上がっています。

ヘッダー部分にデザインされた緑の葉っぱとウッドテクスチャの組み合わせ、個人的に好みです。

brownsites47

 

 

Pa Vej Hjem

茶色は自然を連想させる色でもあるため、ボランティアなどのウェブサイトデザインなどにも良く使われています。

brownsites33

 

 

The Things We Make

落ち着いた印象のダーク系ウェブデザインにウッドテクスチャを使うことでさらに重厚でエレガントな印象に仕上げることができます。

brownsites29

 

 

Mayflower Brewing Company

筆記体やレトロ感たっぷりなフォントを使うことで、歴史を感じさせるデザインを作り出すことができます。

このサイトの様にウッドテクスチャとクリーム色の軽いグランジデザインをあわせるところもポイントとなります。

brownsites26

 

同系色のウェブサイトをまとめて集めてみると、アクセントカラーの使い方やフォントの種類など共通するデザインアイデアを見つけることができそうです。

これからも色ごとに色々なウェブサイトデザインをまとめていこうと思います。

 

参照元サイトにはこのほかにも参考になるウェブデザインがたくさんまとめられていますので、よろしかったらこちらも一緒に合わせてどうぞ。

 

[参照元 : 50 Beautifully Brown Web Designs – WebDesignLedger]