白を基調とした鋭いスクロールで切れ味を表現Webデザイン

Webデザイン３つの良いとこ : 3 Good Point!

包丁メーカーのWebデザインが白を基調とした優れたものだったのでご紹介。

まず、包丁メーカーということで、「鋭さ」を強調しているように感じます。また「旬」というブランドを掲げていることもあって、海外のサイトですが、和風なイメージを受ける表情も持ち合わせていますね。更に白を基調とすることでクリーンな演出もされています。

レスポンシブウェブデザインに対応しているのですが、画面サイズが変わる際の、コンテンツのpositionをfixedからrelativeに変更している点はスマホ対策として「なるほど」と思いました。

トップページはスクロールすると、スライドショーが隠れるように演出されます。この「隠れる」ようにスクロールされる点が、「切れている」ように感じました。あくまで私の主観ですが、このサイトが提供するプロダクトと、このスクロールはとてもマッチしていると感じます。

ちなみにこの表現は、position:fixed;を指定することで実現できます。簡単に出来ますが、実装する際には他コンテンツとの兼ね合いも考慮しなくてはならないので、目的を持って実装できているこのサイトは、そこも参考になるポイント。

また、ヘッダーの「線」が個人的にとても絶妙だなー！と感じました。

このcssは、

border-bottom: 1px solid #e6e6e6;

といずれも簡単なものばかりなのですが、それを各所で統一することによって、程よい「区切り」が生まれています。特にヘッダーのロゴ部分の左右、特に左のボーダーが、全体のwidthと同じ線状にあるので、まとまりを感じますね。

シンプルでいて区切りを魅せる。包丁、ナイフを扱うサイトとして、とても優れたWebデザインでした。

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！