今日のデザイン#067 SVGによるベクターグラフィックを駆使したペルーの女性向けスパ「LeRogue」のウェブサイト

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

[ via LeRouge : Home ]

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

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

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

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

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

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

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

[ via LeRouge : Home ]

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です