Advertisement

 

Webサイトを制作するときにテクスチャ素材を利用することで、デザインに質感や奥行き感を表現できます。

またオリジナル性の高いデザインを表現しやすいというメリットもあります。

 

海外デザインブログWeb Design Ledgerで、少しかすれたようなグランジテクスチャを利用したWebサイト24個をまとめたエントリー「24 Examples tof Texture Usage in Web Design」が公開されていたので、今回はご紹介します。

 

デザインアイデアの種になりそうなクリエイティブなデザインが揃っています。

 

 

詳細は以下から。

 

 

かすれたグランジテクスチャを利用したWebサイトデザインまとめ

 

Big Daddy Weave

黒板テクスチャにチョークで描いたような手描き感を表現したWebサイトデザイン。

texture01

 

 

Thismanslife

テクスチャ素材の他にも影を利用して立体感を表現したWebサイトデザイン、透明感のあるナビゲーションメニューもポイントです。

1100

 

 

Mid-Carolina Timber Company

古い紙の上にデザインされた様な質感を忠実に再現したユニークなWebサイト、スライダーがいい味出しています。

texture22

 

 

Racket

ヘッダー全体にユニークなデザインパーツで独自の世界観を演出したWebサイトデザイン、手描き風メニューボタンなどアイデア満載です。

3510

 

 

Fueled by Design

青色を基調とした絶妙なグラデーション具合をデザインしたWebサイトデザイン、奥行き感がアップされています。

texture06

 

 

Moment Skis

レトロ風のアース色を基調にデザインされたWebサイト、サムネイル画像にもビンテージ加工を加えて統一感を表現。

texture07

 

 

Hangin up the Moon

トイカメラで撮影したようなきれいな写真を並べたオシャレサイト、ロゴもかわいいですよ。

texture16

 

 

Kenny Saunder

スクラッチ傷がついたグランジテクスチャと青色グラデーションを組み合わせた質感の高いシンプルなWebデザイン。

1016

 

 

Peter Granfors

黒い白鳥がパイプをくわえたアート性の強いポートフォリオサイト、水彩絵の具のような質感がナイス。

1317

 

 

So10

大学ノートのような紙テクスチャを使ったシンプルなマネージメントツール用Webサイト、シンプルなビジュアルがオシャレ。

texture09

 

 

Cheese Survival Kit

すこしかすれた紙テクスチャを利用しており、「チーズ・サバイバルキット」というユニークなコンセプトが気になります、。

texture04

 

 

Media Soldier

レザーチェアの独特の質感を表現しているダーク系Webサイト、配色が参考になりそうなのでメモとして。

3213

 

 

War Child

画面全体に利用されたグラフィックデザインの色合いを押さえることで、質感をアップしています。

texture12

 

 

DJD

圧倒的なグラフィクデザインが印象的なWebサイトデザイン、ややかすれたグランジテイストで表現されています。

2414

 

 

The Beehive

紙の上にスタンプを押したようなデザイン、フォントを利用したユニークなWebサイト。

1516

 

 

Code School

デザインは好き嫌いありそうですが、絶妙な虹色グラデーションテクスチャを利用したWebデザインのひとつ。

916

 

 

Portfolio de Emillie Crssrd

手描きスケッチをそのままWebサイトにしたようなクリエイティブなデザイン、紙テクスチャ人気ですね。

816

 

 

The Peach Design

タイポグラフィーポスターのようですが、実はWebフォントで作成されたメニューです。紙テクスチャをリアル感を表現。

texture13

 

[fancy_box][参照元 : 24 Examples of Texture Usage in Web Design – Web Design Ledger]

[参照元 : 35 Grunge Web Designs – SpyreStudios][/fancy_box]