Advertisement

 

 

Webデザインにおいてテクスチャ素材を利用して質感を高める方法はよく利用されています。

たとえば背景デザインやUIデザインパーツ、サムネイル用画像としてなど視覚的なインパクトを作り上げます。

 

海外デザインブログDesign Instructで、繊細なテクスチャ素材を利用したWebサイトデザインを30個まとめたエントリー「30 Beautiful Web Design with Subtle Texturing」が公開されていたので、今回はご紹介します。

テクスチャ素材の有効的な利用方法や色使いなどこれからWebサイトのデザイン制作するときの参考になるのではないでしょうか。

 

 

詳細は以下から。

 

 

繊細なテクスチャ素材を利用したWebサイトデザインまとめ

 

Instagallery

ザラザラとした質感のノイズテクスチャを利用したiphone&iPad用アプリのプロモーション、販売サイトで、Instagramのレトロなイメージをうまく表現しています。

 

 

Foundation Six

淡い色使いとグランジテイストを組み合わせた背景テクスチャを利用することで、エレガントな印象に仕上がったウェブサイトデザイン。

 

 

IconSweets 2

ミニマルデザインのフリーアイコン素材を公開しているWebサイトですが、ノイズテクスチャ素材にグラデーションと幾何学模様パターンを一緒に利用したデザインが魅力的。

 

 

CXXVI Clothing Co.

アパレル系オンラインショップのひとつで、ヘッダー部分にやや汚れたようなグランジテクスチャ素材を利用しています。

 

 

Tinkering Moneky

材木を利用した家具や小物などを製作、販売しているサイトで、クリーム色のノイズテクスチャ素材を背景に利用したぬくもりを感じるデザインのひとつ。

 

 

Rothco

ヘッダー部分に微妙なグラデーションを書けることで立体的に魅せることが可能となったノイズテクスチャを利用。

レタープレス(型押し)を自然に強調したいときなどに便利なテクニックかもしれません。

 

 

Orange You Glad

パステルカラーを基調とした色使いとの組み合わせもばっちりなやや青みが買った灰色ノイズテクスチャを背景に利用しています。

 

 

Big Related

ヘッダーに利用したビンテージテイストのテクスチャ素材と歴史を感じるモノクロ写真のスライドを見事に組み合わせたWebサイトデザイン。

 

 

Dawghouse Design Studio

インパクトのあるイラストをヘッダーにレイアウトしたウェブサイトで、オレンジ色をアクセントカラーとすることで統一感のあるデザインを完成させています。

 

 

Dropr

アニメーションを利用したアート性の強いクリエイティブなウェブデザインで、こちらにもザラザラとしたノイズテクスチャが利用されています。

ページトップ部分にマウスカーソルをあわせると、ここにもアニメーションエフェクトが、、。

 

 

Dribble

世界中のウェブデザイナーの作成中の作品などを閲覧することができるサイトで、繊細なグラデーションを利用した背景デザインがナイス。

 

 

Hoban Cards

サムネイル画像ではわかりにくいのですが、大学ノートをモチーフにしたような紙テクスチャを背景に利用しています。

 

 

Full Stop

レトロ、ビンテージな印象を表現したデザイン会社のポートフォリオサイトで、ノイズテクスチャ素材だけでなく、Webフォントとの組み合わせも見事です。

個人的に色使いの参考にしたいのでメモとして。

 

 

Hungarian Wine Society

ワインに関するウェブサイトということで、背景にぶどうを連想させる紫色を利用したウェブサイトデザイン。

 

 

Matchball

全編アニメーションを駆使してデザインされたウェブサイトデザインのひとつで、こちらにも淡いノイズテクスチャ素材を背景に利用しています。

 

 

Odsketch

手書きでスケッチされたような手作り感を表現したかわいいウェブサイトデザインのひとつ。

デザインパーツを思い切って手書きしてみるのも面白いかもしれませんね。

 

 

These Are Things

影をうまく利用した立体的なデザインパーツを多用したウェブサイトで、オレンジ色とスケッチデザインの組み合わせ、フォントの利用方法など参考に。

 

 

Andrew McClintock

ダーク系のウェブサイトデザインにテクスチャ素材を利用したいときに参考にしたいサイトデザイン。

ノイズテクスチャにヘッダーを中心としたミステリアスなグラデーションの質感が良い具合。

 

 

Texido

古い再生紙の様な質感を背景デザインとして取り入れているウェブデザイン会社のウェブサイト。

黄色のアクセントカラーとミニマルデザインの組み合わせでとても読みやすいデザインに仕上がっています。

 

 

テクスチャ素材を利用したウェブサイトデザインをいくつか閲覧していると、いくつかの共通するデザイントレンドがあるように感じます。

・ グリッドレイアウトのすっきりとしたミニマルWebサイトデザインが中心。

・ ザラザラとしたノイズテクスチャをベースに、ほかのパターンテクスチャなどを重ねて利用。

・ 単色でデザインせずに、グラデーションを利用することでリッチなインターフェースを実現。

・ WebフォントやCSS3など新しいテクニックを利用し、ウェブサイトイメージとマッチするようにデザイン。

 

[参照元 : 30 Beautiful Web Designs with Subtle Texturing – Design Instruct]