シンプルな赤が特徴のWebデザイン
CAMPER
世界を股にかける靴の専門店「Camper」のWebデザインのご紹介。配色が赤と白のみ使われたとてもシンプルなものにまとまっていて、とても好感が持てます。
Webデザイン3つの良いとこ : 3 Good Point!
- シンプルな赤と白の配色
- スライドショーを特徴付ける影使い
- ヘッダーメニューが素敵
私はWebデザインのココを見た!
赤がメインカラーとなっているこのWebデザイン。キツ過ぎず、まろやか過ぎない、この色合いはとっても好印象です。
ですが、実際「赤」のみを使用してWebデザインを作るとなった場合、私だったらとてもその色合いには困惑させられるでしょう。赤といえば、「強い」印象が非常に強い色です。それをこのようにコンパクトにまとめるためには大変な労力がかかった・・はず。
マウスホバーまでも赤
綺麗だなーと思ったのは、マウスホバーの際にも感じました。大きなスライドショー下にあるコンテンツをホバーすると、コンテンツが赤く装飾されます。ここだけは軽い黒色で、上品にまとめるということも出来たと思うんですが、イメージカラーのレッドを採用しています。いいですね!
スライドショー特徴づける影使い
このシンプルな赤が特徴のWebデザインですが、実はシャドウが凄く、小さいんですが、効果的に使われていると感心したのが、スライドショー上部とヘッダー下部です。
この影を使っていなかったら、だべーーっとした印象になっていると思います。影を使って「奥」を印象づけることで、このスライドショーに使用してる画像の上部が切れてるうまみも出てきますし、単調すぎる印象を脱却できます。
これはスクロールした際のコンパクトなヘッダーにも利用されています。この影使いはとても良いと思いました。
私もそうだったのですが、一度”影”の使用を覚えると、なんだかんだで影影シャドー!と使って、いつの間にかゴタゴタした印象のWebデザインが出来上がらることがありました。
このように、”そっと”影効果を使うスキルは覚えたいですね!
ユーザーの直感的な分かりやすさを配慮したWebデザイン
スクロールした際のヘッダーですが、高さが調度良く短くなり、そしてメニューがとても秀逸に感じるようになります。メニューをクリックしたらがとてもかわいい吹き出しで表示され、そしてそのままついてきます。見失うことがありません。
また、言語も沢山の地域のものが選べるのも好印象。ユーザビリティを配慮した世界を視野に入れたブランドショップなんだなと思いました。勉強になります!
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー