2010年3月23日 
かちびとさんでも紹介されていたのですが、参考になりそうなウェブサイトデザインが多く集められていたので個人的なメモとしてエントリーです。
ウェブサイトデザインに茶色を使うことで、シンプルで、親しみやすく、信頼性を潜在的に表現することができるカラーとなります。
今回はそんな茶色を使ったクリエイティブなウェブサイトデザインを50個まとめた「50 Beautifully Brown Web Designs」をご紹介します。
まとめられたウェブサイトは、ブログやショッピングサイトなどさまざまなので、ウェブデザイン制作の参考になるかもしれませんね。
その中でも特に印象に残ったウェブサイトデザインをいくつかピックアップしてみました。
詳細は以下から。
茶色を使ったウェブサイトデザインまとめ
UKを拠点に活動されているデザイナーさんのポートフォリオサイト。
茶色を基調とした落ち着いた印象のウェブデザインと水彩画のようなブラシがよく合っていますね。
引っかき傷のついたウッドテクスチャを背景に使うことで自然の風合いをデザインしたサイトのひとつ。
シンプルですが、親しみやすい印象を与えてくれるウェブサイトではないでしょうか。
アメリカの短期大学の公式ホームページなのですが、ポップで親しみやすいデザイン、カラーリングが特長。
手描きデザインがあちこちに配置されており、ユーザーの興味を惹きつけています。
オレンジ色がよいアクセントカラーとなっています。
質感のユニークなテクスチャ素材を背景に使ったウェブデザインのひとつ。
半透明に透けたボックス枠などを使っており、スタイリッシュなイメージを与えてくれるウェブサイト。
茶色系のデザインの補色としては、オレンジや赤などの暖色系や緑などの自然系のカラーリングがうまくまとまります。
ウッドテクスチャにベクターでデザインされたカラフルなイラストをあわせることでオリジナリティを出すことができます。
ベクターデザインももちろんサイトデザインと合った色を選ぶことが重要になってきそうです。
The Youth & Student Ministry of Open Doors
グランジデザインを使ったデザインにも茶色系ウェブサイトはうまくデザイン全体をまとめることができます。
テキストに使う色とのバランスもばっちりです。
再生紙のようなちょっとした汚れのあるテクスチャを効果的に使ったデザイン。
グリッドを使った正方形を組み合わせることで、統一感のあるデザインを表現することができます。
背景に使われているテクスチャもユニークではないでしょうか。
普段使っている机の上をそのままデザインしたような、一度見たら忘れられないデザインのひとつ。
デザイナーさんなどのポートフォリオサイトなどのデザインなどにもよいのではないでしょうか。
毛糸を編んだようなファブリックテクスチャを背景にデザインした面白いデザインのひとつ。
カラフルな煙状のデザインがサイトのアクセントカラーにもなっており、ポップな印象に仕上げています。
デザイナーさんのポートフォリオサイトのひとつですが、明るいウッドテクスチャ背景がエレガントでオシャレに仕上がっています。
企業用ウェブサイトなどでも親しみやすいデザインの参考になるかもしれませんね。
写真画像のみをシンプルに表示するギャラリー風デザインにウッド系の茶色デザインを使用したサイト。
茶色デザインにすることで、写真画像を引き立たせることができますね。
茶色系デザインとライティングエフェクトをうまくあわせたデザイン性の優れたウェブデザインのひとつ。
背景に使用された幾何学模様のパターンと使われているマスコットキャラクターによってレトロな印象を与えてくれます。
こちらも机の上をそのまま撮影したようなデザインを使ったサイトのひとつ。
最近良く使われているデザイン方法ですし、オリジナリティを出しやすいレイアウトではないでしょうか。
茶色系ウェブデザインには水彩絵の具で描いたような手書き風グランジデザインがよく合いますね。
またウィンドウ幅に関係なくデザインされた背景テクスチャが印象的でオリジナリティを出すことができます。
幻想的なライティングエフェクトを背景に使ったエレガントなウェブサイトのひとつ。
※ウェブサイトを開くと音がでるので閲覧にはご注意ください。
大きなタイポグラフィがインパクトのなるポップな印象を与えてくれるウェブサイトのひとつ。
テキストカラーに水色を使うことで、親しみやすい雰囲気を作り出すことができますね。
ウッドテクスチャの質感を整えるだけで印象ががらりと変わります。
こちらはデザイナーさんのポートフォリオサイトですが、ダーク系のウッドテクスチャが重厚なイメージに仕上がっています。
ヘッダー部分にデザインされた緑の葉っぱとウッドテクスチャの組み合わせ、個人的に好みです。
茶色は自然を連想させる色でもあるため、ボランティアなどのウェブサイトデザインなどにも良く使われています。
落ち着いた印象のダーク系ウェブデザインにウッドテクスチャを使うことでさらに重厚でエレガントな印象に仕上げることができます。
筆記体やレトロ感たっぷりなフォントを使うことで、歴史を感じさせるデザインを作り出すことができます。
このサイトの様にウッドテクスチャとクリーム色の軽いグランジデザインをあわせるところもポイントとなります。
同系色のウェブサイトをまとめて集めてみると、アクセントカラーの使い方やフォントの種類など共通するデザインアイデアを見つけることができそうです。
これからも色ごとに色々なウェブサイトデザインをまとめていこうと思います。
参照元サイトにはこのほかにも参考になるウェブデザインがたくさんまとめられていますので、よろしかったらこちらも一緒に合わせてどうぞ。
