Advertisement

blurred-1

 

海外デザインブログDesignM.agで、テクスチャ素材を効果的に利用したWebデザイン35個をまとめたエントリー「35 Beautiful Textured Web Designs」が公開されていたので、今回はご紹介します。

 

言われなければ気付かないほど、細かいテクスチャ素材を何枚も重ねることで、独特の雰囲気を演出しているサイトが多くまとめられています。

 

 

 

詳細は以下から。

 

 

 

背景テクスチャにこだわった、Webサイトデザインまとめ

 

Vail Resorts Summer 2014

思いっきり自然に触れるアドベンチャー系Webサイトで、みどり色を中心としたテーマに沿ったカラーリングで、滑らかな動きを表現したパララックスエフェクトがとても印象的。

52

 

 

 

ShopLocket

数クリックで個人の販売サイトを作成可能なWebサービスのプロモーション用サイト。ざらざらとしたノイズ系テクスチャ素材が各コンテンツで利用されています。

202

 

 

 

Paid to Exist

太字フォントが印象的なデザインとなっており、イラストを使ったダーク系テクスチャの質感をそそられます。

312

 

 

 

Ithaca Bakery

コンテンツ全体を、れんが造りの壁に表示したような効果を演出したユニークなサイトデザイン。パン屋さんだったのですね、。

212

 

 

 

G’nosh

黒板ボードの質感を背景テクスチャに利用し、手書きフォントやおいしそうな食材が映えたレイアウトになっています。

262

 

 

 

VonDutch

インパクトのある黄色テクスチャ素材からはじまる、ユニークな仕掛けがたくさんのWebサイト。左側の固定ナビゲーションメニューより、コンテンツ移動どうぞ。

172

 

 

 

The Thomas Oliver Band

ロックバンドの公式ホームページで、ビンテージ加工以外に動きのあるユニークな動きにも注目です。

242

 

 

 

BadRacket

レトロな配色も素敵なのですが、気付かないほど細かい質感系テクスチャを重ねたWebデザイン。

112

 

 

 

Trailer Park Truck

「トレイラーハウスでハンバーガーを食べよう。」と言うアメリカンな企画告知ページ。UIデザインや背景に程よいテクスチャが採用されています。

222

 

 

 

Inspire Conference | Leiden, The Netherlands

オランダで行われるカンファレンス告知ページで、イラストを用いたかわいいキャラクターが◎。背景にはウッドテクスチャを利用しています。

62

 

 

 

Lyudmil Shoshorov

細長いレトロ系ロゴフォントが印象なサイトで、同時に古紙のような質感を背景に利用しています。

142

 

 

 

HDLive 2012

ロンドンで行われるカンファレンス告知ページで、すべての情報を1ページにまとめており、コンテンツ毎にわかりやすく背景テクスチャを変更しています。

92

 

 

 

Dress Responsivly, LTD

ダーク系のテクスチャ素材を利用しながらも、リボン素材やタイポグラフィー、配色などを考慮することで、すっきりとしたレイアウトを完成させています。

342

 

 

 

Wicked Palate

カラフルな配色とユニークなフォント、タイポグラフィーの組み合わせのヘッダーデザインを利用した料理屋さんのWebサイトで、個人的なカラーリングの参考メモとして。

72

 

 

 

新しいデザイントレンド?
ぼかしを加えた背景テクスチャの活用法

 

背景デザインに、ぼかし効果を加えたイメージ写真を活用するケースも増えているようです。

背景をぼかすことで、ユーザーの視線をよりコンテンツに集めるというメリットもあり、今後が楽しみなデザインですね。

 

Foto Bout

わざと背景をぼかしたアート写真に、ドット柄パターンを組み合わせて、映画のようなエフェクトを演出したサイト。

213

 

 

 

Pulse

背景をぼかすことで、ユーザーの視線をアプリソフトに集中させる工夫がされています。

blurred-14

 

 

 

Square

iPhoneなどのスマートフォンでクレジットカード決済を可能にするサービスで、操作している手元にフォーカスされています。

blurred-6

 

 

 

Try Art Prints

ポスター販売サイトでは、部屋の様子をぼかすことでポスターに注目を集めるように考慮されています。

blurred-16

 

 

 

Do – Get Word Done

シンプルなアドレスも面白いですが、ワークスペース全体を映し出した背景テクスチャを採用しています。

blurred-17

 

 

サムネイル@ : Hipstamatic D-Series – Bring the Story Together with One Communal Camera

参照元リンク : 35 Beautiful Textured Web Designs – DesignM.ag