絶妙な質感のテクスチャを利用したウェブサイトデザイン50個まとめ

50texturedwebsite

 

ホームページやブログなどで背景にテクスチャ素材を利用したデザインをよく見かけるようになりました。

どれも一般的な単色の背景より、ビジュアル面でのインパクトあるデザインを表現しています。

 

海外デザインブログWeb Design Ledgerで、質感の高いテクスチャ素材を使ったウェブサイト50個をまとめたエントリー「50 Inspiring Examples of Texture in Web Design」が公開されていたので、今回はご紹介します。

 

「大学ノート」や「ダンボール」などの紙テクスチャに加え、人気のウッド系テクスチャ、ざらつき感がクールなノイズ系テクスチャなどいろいろなデザインがまとめられています。

ウェブサイトデザイン制作するときにデザイン参考としていかがでしょう。

 

 

詳細は以下から。

 

 

質感の高いテクスチャを利用したウェブサイトまとめ


 

Kritzel Music

デコボコ感がやさしい印象を与えてくれる白い壁をそのまま背景デザインに利用したウェブサイト。

texturedsite2_01

 

 

Six11ink

こちらも質感の高い紙テクスチャを利用したウェブサイトデザインの好例。

十分な余白スペースを利用することで、コンテンツをすっきりとカテゴリー分けすることができますね。

texturedsite2_47

 

 

Rocket Club

古い写真のような黄ばんだ質感を背景全体で表現したデザインのひとつ。

アナログ感たっぷりなタイポグラフィー、配色なども参考になるのではないでしょうか。

texturedsite2_05

 

 

Pilates El Paso

ヨガ教室のホームページで、全体に色あせた紙テクスチャをレイアウトしています。

texturedsite2_07

 

 

New Adventure

ヘッダー部分に大学ノートのラインをうっすらと重ねたデザインのひとつで、個人的に配色が参考になったのでメモ。

texturedsite2_08

 

 

Simple Bits

ミニマルでオシャレな印象を与えてくれるウェブデザインとなっており、ダンボール紙のような質感がユニーク。

コンテンツ部分を半透明にすることで背景デザインが透けてみえます。

texturedsite2_10

 

 

Greenolivz

こちらもカンバス生地を利用したウェブデザインのひとつで、手書き風デザインとうまくマッチしています。

texturedsite2_42

 

 

Life Church

背景全体にボケデザインテクスチャを利用したグラフィカルなウェブデザインのひとつ。

texturedsite2_13

 

 

eone

エコ、環境デザインなどでは、土などのアース色と緑を利用することで親しみやすい印象を与えることができます。

淡いグラデーションを利用することで立体感あるデザインに仕上げることができそうです。

texturedsite2_15

 

 

MapBox

ヘッダー部分にくしゃくしゃとした紙テクスチャをレイアウトしたウェブデザインのひとつ、ちょっとした工夫で印象ががらりと変わりますね。

texturedsite2_17

 

 

Fig Tree

新聞紙を連想させるような紙テクスチャを利用したウェブデザインのひとつ。

texturedsite2_39

 

 

Solid Giant

画用紙を連想させるような温もりのある紙テクスチャを利用した個人用ポートフォリオサイト。

ビビットピンクがデザイン全体のアクセントになっています。

texturedsite2_03

 

 

Trapp Family Lodge

茶色カンバステクスチャを利用したデザインのひとつで、モニター解像度が大きいときにだけ見せる仕掛けもユニークです。

texturedsite2_02

 

 

Couch Creative

ダーク系ウェブサイトはイメージが重くなりがちですが、濃い灰色のグラデーションを利用することでエレガントな印象に仕上げることができますね。

texturedsite2_04

 

 

Carlos

全編フラッシュで作成されたウェブサイトですが、「未来」を感じさせてくれる大胆な仕掛けが盛り込まれています。

背景にはグランジテクスチャを利用していますね。

※音がでますのでご注意ください。

texturedsite2_19

 

 

Cafundo Estudio

黒を基調としたストライプに立体感たっぷりなロゴ、デザインパーツをレイアウトしたデザインのひとつ。

texturedsite2_20

 

 

Salt of the Earth

配色が参考になりそうなので個人的にメモとしてエントリー。

言葉で表現しづらいグランジ風背景テクスチャが個性的ですてきですね。

texturedsite2_46

 

 

Web Lounge

ウッド系テクスチャをデザインに利用するときに参考になりそうなウェブデザインのひとつ。

光の反射を考えてテクスチャをレイアウトすることで、高級感たっぷりな質感を表現することができそうです。

texturedsite2_43

 

 

Huge for Monsters

ノイズテクスチャを利用したウェブデザインの好例ではないでしょうか、使われているカラーリングも鮮やかで参考になりそうです。

texturedsite2_29 

 

 

Marie Catrib’s

紙テクスチャを利用し手書きデザインを最大限に利用したウェブサイトデザイン。

ヘッダー部分に使用されているスライダーもユニークで、不要な場合は非表示にすることができるのでユーサビリティの面においてもよいのではないでしょうか。

texturedsite2_44

 

参照元には今回ご紹介したウェブデザインのほかにも、ユニークでオシャレなデザインがたくさんまとめられていましたので、よろしかったらこちらも一緒に合わせてどうぞ。

 

[参照元 : 50 Inspiring Examples of Teture in Web Design – Web Design Ledger]