Advertisement

 

 

ウェブデザインの背景には可読性のよい白地が好まれます。

そんなときにデザインのアクセントにもなるテクスチャ素材を利用してみてはいかがでしょう。

 

海外デザインブログAcris Designで、きめの細かいテクスチャ素材を利用したウェブサイトデザインを30個まとめたエントリー「Showcase: Textures in Web Design」が公開されていたので、今回はご紹介します。

あまり大きな背景画像を利用すると読み込みまでに時間がかかりますが、多くのサイトが小さなパターンをリピートさせているようですので、デザイン制作の参考にどうぞ。

 

 

詳細は以下から。

 

 

テクスチャ素材を利用したウェブサイトデザインまとめ

 

Threadbird

メニューバーやスライダーなど各種デザインパーツにグランジデザインを加えた質感の高いウェブサイトデザイン。

 

 

Amazee Labs

これまでにも何度か紹介していますが、ざらざらとした質感の背景デザインを利用したウェブサイトデザイン。

利用されている背景デザインの作り方はこちらのチュートリアルで紹介しています。

 

 

Solid Giant Web Design

少し汚れたような紙テクスチャを背景に利用することで、親しみやすい印象を与えることができるウェブデザインのひとつ。

 

 

Pound & Grain

ダーク系ウェブデザインレイアウトのひとつですが、真っ黒ではなく灰色を利用し、トップ部分に光の反射を表現したグラデーションがエレガントなデザインとなっています。

色の組み合わせも参考になったので、個人的にメモとしてエントリー。

 

 

Adam Clayton Butler

ヘッダー部分に重厚なレザーテクスチャを利用したポートフォリオサイトデザイン。

落ち着いた色合いがレトロな印象を与えてくれます。

 

 

Ryan Scherf

サイト全体の色合いを茶系でまとめることで統一感のあるユニークなウェブサイトデザインのひとつ。

ヘッダー部分に描かれたイラストがユニークでクリエイティブなデザインに仕上げています。

 

 

Woodinville Whiskey Company

ウィスキーを生産、販売している会社のウェブサイトで、淡い紙テクスチャを利用したウェブサイトデザインとなっています。

余白をたっぷり使うことですっきりとまとまったデザインに仕上げることができます。

 

 

Texido

デザイナー用ポートフォリオサイトのひとつで、コンクリートのような質感のテクスチャ素材を背景に利用しています。

アクセントカラーとして使われている黄色がよく映えますね。

 

 

Cascade Brewery Co

オーストラリアのビール会社のウェブサイトで、レトロな色合いで統一されたグリッドスタイルを利用したデザイン。

お好みでビールをカスタマイズできるなどユニークな仕掛けがたくさん。

 

 

Agency Ball

紙テクスチャを背景デザインとして利用しており、色合いがとてもお気に入りなのでメモとしてエントリー。

 

 

Kenny Ssaunders

淡いグラデーションのかかったテクスチャ素材を利用したポートフォリオサイトのひとつ。

背景デザインが無地だとシンプルなウェブサイトも、質感の高いデザインに生まれ変わります。

 

 

Therefore I Am

ウェブサイトタイトルやすべてのデザインパーツにグランジテイストを加えたウェブサイトデザイン。

一番のポイントは背景いっぱいに利用されている手書きペイントテクスチャではないでしょうか。

 

 

GO Mammoth

黄ばんだ紙テクスチャを背景デザインとして利用したウェブサイトのひとつ。

紙テクスチャ素材はレトロなカラーリングとの相性がとてもよいようです。

 

 

Sibling Rivalry

こちらはコルクボードのような質感のテクスチャ素材を利用したウェブサイトデザイン。

画像などに手書きフォントを利用することで、オリジナリティーの高いデザインを作成することができます。

 

 

Awesome

ヘッダー部分にざらざらとしたテクスチャ素材とイラストを組み合わせたユニークなデザインが特徴。

グリッドラインを利用することですっきりと読みやすいサイトを完成させています。

 

 

Premium Pixels

無料PSD素材を定期的に公開している良質ブログサイトで、こちらもざらざらテクスチャがポイントですね。

 

 

Travel SEO

デザインだけではSEOの会社と思えないほど、エレガントな印象のウェブサイトデザイン。

かすれたグランジテクスチャに古い書物などに使われていそうなセリフ調、筆記体フォントを利用することで表現しています。

 

 

Iron to Iron

方眼紙テクスチャに淡い青色グラデーションを半透明で重ねることでデザインされたウェブサイトのひとつ。

画像読み込みの時間はかかりますが、見た目のインパクトはすごいです。

 

[参照元: Showcase: Textures in Web Design – Acris Design]