ペルーの女性向けスパ「LeRogue」のウェブサイト。スパだけではなく、ヘアサロンやブティック、エステ等のサービスも行っている施設の公式サイトです。

[ via LeRouge : Home ]

トップページのメインビジュアルとして、横並びで5つのイメージを掲載していますが、単純な横並びではなく曲線により分割されています。
この曲線はロゴを再現していると同時に、女性らしい肉体を感じさせるラインになっており、女性向けの「スパ」「エステ」といったサービス内容をより印象付けるデザインではないでしょうか。

ベースとなる画像は、曲線で切り抜かれた背景透過の画像ですが、SVGによるベクターグラフィックとして扱われています。
画像にマウスオーバーしてみると、リンクエリアの形状が曲線で構成されていることが確認できると思います。

２階層目以下のページでも、画像やメニューなどの要素には曲線が用いられています。
この辺りはCSSによる角丸なのですが、トップページの複雑な曲線の印象が強く残っているせいか、リッチな表現に感じられます。

サイトはレスポンシブデザインが採用されていますが、スマートフォン版はSVGイメージは表示されません。

Androidの2.3以下や、iOS Safariの4.3以下のバージョンではSVGの一部の機能がサポートされていないことを考慮しているのかもしれません。

個人的には、スマホでもSVGを積極的に利用してもよい時期には来ていると思っていますが、ユーザーが利用しているブラウザの状況も調査の上で採用を決める必要がありそうです。

AppleのRetinaディスプレイを筆頭にディスプレイの高解像度化がどんどん進んでいます。SVGによるベクターグラフィックのなめらかな曲線表現の利用を、是非検討してみてはいかがでしょうか。

[ via LeRouge : Home ]