背景に粒状のざらざらテクスチャを使った、立体感のあるウェブサイトまとめ

graintextureweb

ウェブデザインのテクニックがどんどん進歩するにつれて、細かい部分まで気を配ったデザインが多くなっています。

今回は、そんな細かいテクニックのひとつで背景にざらざらした粒状のテクスチャを使ったウェブサイトをまとめた「Web Design : Grain Texture」をご紹介します。

とても細かくて非常にわかりにくいのですが、ざらざら感をデザインに加えることで単色の背景を使っているウェブサイトより質感がアップするのが特長です。

ブログ系のデザインよりも、ウェブサービスを基本業務としている企業系ウェブサイトが使っているケースが多いようです。

フォトショップでも簡単にこのざらざらの質感をデザインすることができるので、覚えておくといいかもしれません。

方法としては、フォトショップでエフェクトをかけたいレイヤーを選択し、メインメニューより「フィルタ」>「ノイズ」>「ノイズを加える」を適用するだけのお手軽さです。

 

2009.10.5追記

人気デザイン系ブログコリスさんでも同じ記事に関してまとめられています。

コリスさんのページをのぞいてみる

 

詳細は以下より。

 

Radium

SEOを専門とした会社のウェブサイトで、大画面でデザインされたヘッダー部分全体にざらざらテクスチャを使っています。

海外と日本のSEO会社のウェブサイトの作りはここまで違うんですね。

パッと見たときの情報量(テキスト量)が少ない分、的確に伝えたいことがユーザーに伝わってくるデザインです。

Radium

 

 

MetaLab

先日ご紹介した「フォトショップでプロ仕様のiPhoneアプリ用サイトを作る方法」にも似たデザインですが、背景テクスチャ全体にざらざらテクスチャを使用しています。

型押し文字と一緒に使うことでさらにリアル感が表現できます。

MetaLab

 

 

atebits

2009年Apple Design Awardも受賞しているTwitter(ツイッター)系アプリ用ウェブサイトです。

シンプルで大胆にレイアウトされたアイコンと非常によくマッチしています。

ライティングエフェクトが効果的にデザインされています。

atebits

 

 

Bohemian Coding

ダーク系のウェブデザインによく使われているざらざらテクスチャですが、こちらの明るい灰色にも見事にマッチしています。

この分かるか分からないか程度のエフェクトが他のウェブサイトとの差別化を図ることになります。

Bohemian Coding

 

 

Utterly Ingenious Digital

背景テクスチャだけでなく、ヘッダー部分に配置された枠組みにもざらざらテクスチャを使い、ウェブサイト全体に統一感があります。

Utterly Ingenious Digital

 

 

Note & Point

こちらはプレゼンテーション用のPDFを集めている面白いコンセプトのウェブサイトです。

こちらも背景全体にざらざらテクスチャが使われています。

Note & Point

 

 

いろいろなウェブサイトを考察してみましたが、全体を通して感じた感想は、

.ダーク系(黒や濃い灰色など)のウェブサイトは特に質感がアップする

・「型押し文字」との相性がとても良い

・部分的にライティングエフェクトを使うことにより、立体感をさらに表現できる

などがありました。

 

参照元サイトにはこれら以外にもざらざらテクスチャを使った具体的なウェブサイトがいくつか紹介されています。

よろしかったら、あわせてどうぞ。

 

[参照元 : Web Design : Grain Texture – Abduzeedo]