カラフルを黒で締めるWebデザイン
家具・ホームセンターの島忠・HOME'S(ホームズ) シマホ
Webデザイン3つの良いとこ : 3 Good Point!
- 魅力あるヘッダー。黒でカラフルを引き締める!
- 各所でカラフルを利用してコンセプトを表現
- 面白さをスライドショーで。
私はWebデザインのココを見た!
家具・ホームセンターの島忠ホームズのホームページです。先日私用で家具や小物を買う際にシマホに行ったんですが、楽しかったー。家具屋さんって楽しいですよね。
行く前にサイトを見たりしてたのですが、サイトや企業のデザインとしてはロゴから見てわかるように、「カラフル」をコンセプトとしていますよね。ワクワクさせるような色合いです。
ワクワクさせるといえば、広告が面白いことでもちょっと有名。
そんなシマホですが、その企業イメージがWebサイトでも活かされていたので、シマホのWebデザインをレビューします。
魅力あるヘッダー。カラフルを黒で〆る!
まずこのサイトのヘッダーがいいですよねー!「シマホ」というカラフルなロゴの横にはグローバルメニューが配置され、各メニューの英語にも色をつけてカラフルを表現しています。
そんなカラフルなヘッダーですが、それを最上部の黒バーで締めているのがシマホのWebサイトのポイント。けっこうこの構成にするのは勇気が必要だったのではないでしょうか。せっかくのカラフルを黒で壊すことになるのではないか。デザインする際にそんな不安がよぎっても不思議じゃありませんよね。
で、実際に見てみると、なかなか無理なく合っています。白背景が漠然とならず、黒ボーダーでカラフルがきゅっと引き締まっていますよね。ちょっと黒がキツすぎるかな、とも思いますが、強い黒はサイト全体を引き締めています。
けど、他にも沢山の方法があったはずですよね。たとえばカラフルなパターンの上部バーを配置したり、先日紹介したカラフルなGUのWebサイトのように、そもそも背景をカラフルなものにしてしまう方法もあったはずです。ですが、そうすると「シマホ」のロゴが映えません。シマホのカラフルなロゴを最大限に活かすためにはサイト全体を引き締める効果を利用したほうが良い、という判断でしょうか。んー、実際にデザイナーがどのような判断をしたのか聞いてみたい。私は今の構成はなかなか良いなと思っています。
各所で色を利用する
カラフルなコンセプトを最大限に活かすため、各コンテンツごとに異なる色が着色されています。
こんな風にいろいろな色が使えるのはデザイナーとしたら面白いですよねー。と思ってしまったんですが、そんなことはないかな?カラフルなのは良いけど、色って合わせるのが大変!それはどんなデザイナーでも感じたことがあることでしょう(私だけかもしれませんが(;´Д`))。
多色になればなるほど、統一感が薄れユーザーは目が疲れてしまいます。ですが、シマホのサイトではそこまで統一感がないとは感じませんよね。トーンを合わせ優しい色合いにすることで雑然とするところを抑えています。
ただ、もう少し統一感を演出するために丸角を統一したり、サイドバーもメインコンテンツと同じく上部バーに色をつけたシンプルなものにする、というデザイン構成にするのも良い手だったりするかもしれません。ですが、サイトを見ていると、この構成が一番良いのかなとも思いますけども!
スライドショーで面白さを
トップページにあるスライドショー。切り替えの方法が毎回変わることに気づきましたでしょうか。シマホのCMでは面白い映像の後にある「切り替え」が特徴的だったりします。それを切り替えで表現している点がGOODです。
シマホのCMすっごく面白くて、店内においてあるテレビの前にけっこう立ち止まって見てしまったんですがw、よく出来てますよねー!Webデザインもそうですが、CMや電車内広告などもとても観ていて面白いのでぜひチェックしてみてください。
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー