海外のウェブサイトから学ぶ、ディテールにこだわったデザインのテクニックのまとめ
Post on:2012年4月11日
多くのユーザーはその繊細なディテールに気がつかないかもしれませんが、ディテールにこだわることでデザインの全体的な印象に大きな影響を与えているウェブサイトをVandelay Desingから紹介します。
下記は各ポイントを意訳したものです。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-01.png)
繊細なテクスチャを背景にし、ちょっと面白いドロップシャドウ、ロゴのホバー時のエフェクトもかっこいいです。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-02.png)
ページ上部の真ん中にあるユニークなシャドウのエフェクトが目をひきつけます。
[ad#ad-2]
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-03.png)
スライダーのコントロールに使用しているドロップシャドウがあるとないとでは使い勝手が変わるでしょう。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-04.png)
ナビゲーションの各アイテムはホバー時にカラーが異なります。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-05.png)
繊細なテクスチャ、ボーダー、カラーを使った垂直型のナビゲーションが美しいです。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-06.png)
ヘッダで使用しているテクスチャは、フラットなカラーやグラデーションではこのクオリティはだせないでしょう。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-07.png)
背景に繊細なテクスチャとウェーブ状のボーダーが印象的なデザインです。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-08.png)
コンテンツエリアは背景の上に繊細なシャドウのエフェクトをもっています。
[ad#ad-2]
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-09.png)
ポートフォリオのサムネイルに使用しているドロップシャドウは、とても印象的です。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-10.png)
このサムネイルはとてもユニークな背景をもっています。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-11.png)
このサムネイルは角丸とドロップシャドウです。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-12.png)
ナビゲーションはレトロちっくな3Dのエフェクトで、とても面白いです。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-13.png)
背景にとても繊細なパターンが使用されています。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-14.png)
ヘッダのボーダーは単に細い線ではなく、手書き風の面白いボーダーを使用しています。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-15.png)
背景に繊細なざらっとしてテクスチャ素材を使っています。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-16.png)
ヘッダにはライトが使われており、背景のパターンのテクスチャはフラットなものを使うより繊細なタッチになっています。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-17.png)
繊細なパターンのテクスチャを効果的に使用しています。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-18.png)
宇宙空間を連想させるグリッドのオーバレイが面白い外見を与えています。
![サイトのキャプチャ](/wp-content/uploads-2012/2012041103-19.png)
ヘッダに繊細なテクスチャを使い、背景のざらっとしたテクスチャにフィットしています。
sponsors