2010年7月27日 
ホームページやブログなどで背景にテクスチャ素材を利用したデザインをよく見かけるようになりました。
どれも一般的な単色の背景より、ビジュアル面でのインパクトあるデザインを表現しています。
海外デザインブログWeb Design Ledgerで、質感の高いテクスチャ素材を使ったウェブサイト50個をまとめたエントリー「50 Inspiring Examples of Texture in Web Design」が公開されていたので、今回はご紹介します。
「大学ノート」や「ダンボール」などの紙テクスチャに加え、人気のウッド系テクスチャ、ざらつき感がクールなノイズ系テクスチャなどいろいろなデザインがまとめられています。
ウェブサイトデザイン制作するときにデザイン参考としていかがでしょう。
詳細は以下から。
質感の高いテクスチャを利用したウェブサイトまとめ
デコボコ感がやさしい印象を与えてくれる白い壁をそのまま背景デザインに利用したウェブサイト。
こちらも質感の高い紙テクスチャを利用したウェブサイトデザインの好例。
十分な余白スペースを利用することで、コンテンツをすっきりとカテゴリー分けすることができますね。
古い写真のような黄ばんだ質感を背景全体で表現したデザインのひとつ。
アナログ感たっぷりなタイポグラフィー、配色なども参考になるのではないでしょうか。
ヨガ教室のホームページで、全体に色あせた紙テクスチャをレイアウトしています。
ヘッダー部分に大学ノートのラインをうっすらと重ねたデザインのひとつで、個人的に配色が参考になったのでメモ。
ミニマルでオシャレな印象を与えてくれるウェブデザインとなっており、ダンボール紙のような質感がユニーク。
コンテンツ部分を半透明にすることで背景デザインが透けてみえます。
こちらもカンバス生地を利用したウェブデザインのひとつで、手書き風デザインとうまくマッチしています。
背景全体にボケデザインテクスチャを利用したグラフィカルなウェブデザインのひとつ。
エコ、環境デザインなどでは、土などのアース色と緑を利用することで親しみやすい印象を与えることができます。
淡いグラデーションを利用することで立体感あるデザインに仕上げることができそうです。
ヘッダー部分にくしゃくしゃとした紙テクスチャをレイアウトしたウェブデザインのひとつ、ちょっとした工夫で印象ががらりと変わりますね。
新聞紙を連想させるような紙テクスチャを利用したウェブデザインのひとつ。
画用紙を連想させるような温もりのある紙テクスチャを利用した個人用ポートフォリオサイト。
ビビットピンクがデザイン全体のアクセントになっています。
茶色カンバステクスチャを利用したデザインのひとつで、モニター解像度が大きいときにだけ見せる仕掛けもユニークです。
ダーク系ウェブサイトはイメージが重くなりがちですが、濃い灰色のグラデーションを利用することでエレガントな印象に仕上げることができますね。
全編フラッシュで作成されたウェブサイトですが、「未来」を感じさせてくれる大胆な仕掛けが盛り込まれています。
背景にはグランジテクスチャを利用していますね。
※音がでますのでご注意ください。
黒を基調としたストライプに立体感たっぷりなロゴ、デザインパーツをレイアウトしたデザインのひとつ。
配色が参考になりそうなので個人的にメモとしてエントリー。
言葉で表現しづらいグランジ風背景テクスチャが個性的ですてきですね。
ウッド系テクスチャをデザインに利用するときに参考になりそうなウェブデザインのひとつ。
光の反射を考えてテクスチャをレイアウトすることで、高級感たっぷりな質感を表現することができそうです。
ノイズテクスチャを利用したウェブデザインの好例ではないでしょうか、使われているカラーリングも鮮やかで参考になりそうです。
紙テクスチャを利用し手書きデザインを最大限に利用したウェブサイトデザイン。
ヘッダー部分に使用されているスライダーもユニークで、不要な場合は非表示にすることができるのでユーサビリティの面においてもよいのではないでしょうか。
参照元には今回ご紹介したウェブデザインのほかにも、ユニークでオシャレなデザインがたくさんまとめられていましたので、よろしかったらこちらも一緒に合わせてどうぞ。
[参照元 : 50 Inspiring Examples of Teture in Web Design - Web Design Ledger]
