海外デザインブログDesignM.agで、テクスチャ素材を効果的に利用したWebデザイン35個をまとめたエントリー「35 Beautiful Textured Web Designs」が公開されていたので、今回はご紹介します。
言われなければ気付かないほど、細かいテクスチャ素材を何枚も重ねることで、独特の雰囲気を演出しているサイトが多くまとめられています。
詳細は以下から。
背景テクスチャにこだわった、Webサイトデザインまとめ
思いっきり自然に触れるアドベンチャー系Webサイトで、みどり色を中心としたテーマに沿ったカラーリングで、滑らかな動きを表現したパララックスエフェクトがとても印象的。
数クリックで個人の販売サイトを作成可能なWebサービスのプロモーション用サイト。ざらざらとしたノイズ系テクスチャ素材が各コンテンツで利用されています。
太字フォントが印象的なデザインとなっており、イラストを使ったダーク系テクスチャの質感をそそられます。
コンテンツ全体を、れんが造りの壁に表示したような効果を演出したユニークなサイトデザイン。パン屋さんだったのですね、。
黒板ボードの質感を背景テクスチャに利用し、手書きフォントやおいしそうな食材が映えたレイアウトになっています。
インパクトのある黄色テクスチャ素材からはじまる、ユニークな仕掛けがたくさんのWebサイト。左側の固定ナビゲーションメニューより、コンテンツ移動どうぞ。
ロックバンドの公式ホームページで、ビンテージ加工以外に動きのあるユニークな動きにも注目です。
レトロな配色も素敵なのですが、気付かないほど細かい質感系テクスチャを重ねたWebデザイン。
「トレイラーハウスでハンバーガーを食べよう。」と言うアメリカンな企画告知ページ。UIデザインや背景に程よいテクスチャが採用されています。
Inspire Conference | Leiden, The Netherlands
オランダで行われるカンファレンス告知ページで、イラストを用いたかわいいキャラクターが◎。背景にはウッドテクスチャを利用しています。
細長いレトロ系ロゴフォントが印象なサイトで、同時に古紙のような質感を背景に利用しています。
ロンドンで行われるカンファレンス告知ページで、すべての情報を１ページにまとめており、コンテンツ毎にわかりやすく背景テクスチャを変更しています。
ダーク系のテクスチャ素材を利用しながらも、リボン素材やタイポグラフィー、配色などを考慮することで、すっきりとしたレイアウトを完成させています。
カラフルな配色とユニークなフォント、タイポグラフィーの組み合わせのヘッダーデザインを利用した料理屋さんのWebサイトで、個人的なカラーリングの参考メモとして。
新しいデザイントレンド？
ぼかしを加えた背景テクスチャの活用法
背景デザインに、ぼかし効果を加えたイメージ写真を活用するケースも増えているようです。
背景をぼかすことで、ユーザーの視線をよりコンテンツに集めるというメリットもあり、今後が楽しみなデザインですね。
わざと背景をぼかしたアート写真に、ドット柄パターンを組み合わせて、映画のようなエフェクトを演出したサイト。
背景をぼかすことで、ユーザーの視線をアプリソフトに集中させる工夫がされています。
iPhoneなどのスマートフォンでクレジットカード決済を可能にするサービスで、操作している手元にフォーカスされています。
ポスター販売サイトでは、部屋の様子をぼかすことでポスターに注目を集めるように考慮されています。
シンプルなアドレスも面白いですが、ワークスペース全体を映し出した背景テクスチャを採用しています。
サムネイル@ : Hipstamatic D-Series – Bring the Story Together with One Communal Camera
