GU(ジーユー)

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

1. カラフルさがたまらない！トーンを合わせたカラフル配色
2. h2要素が面白い
3. 各商品ページの背景はグレーに−ECサイトの意味を再認識

私はWebデザインのココを見た！

• Tweet
• 

ユニクロの姉妹ブランド、「GU」のECサイトです。ECサイトをデザインするとは、商品をお客様へ見せるとは、どういったことなのか、とても作りこまれているWebデザインです。

そのトップページはカラフルで、観ていてとっても楽しいサイトです。…ですがその前に、GUは先日ロゴをリニューアルしたという話がちょっと話題になっていましたね。レビューの前にそちらを見てみましょう。

GUのロゴリニューアル、その意味とは

上図はリニューアルされたGUのロゴ画像。

このロゴには以下のような意味合いが含まれているそうです。

ファッションブランドとして、カワイイ・女性っぽいではなく、シャープさ・強さと、ポップさ・丸さが詰まったデザインが、おしゃれでちょっとやんちゃなユニクロの妹であるジーユーを表現している

ちなみに今までの既存のロゴはこちら↓

ふむー。新しいGUのロゴは、女性っぽさではなく、「ちょっとやんちゃな妹」を表現しているということ。

この配色は皆さんご存知、IKEAやTSUTAYAのものと同じ配色ですね。確かに既存のものと比べると、GUという文字が力強く、存在感が増しています。

それに比べると既存のGUロゴには、「強さ」という概念は感じられませんね。カワイイではなく、やんちゃな想いを込めているロゴ、みなさんにはどう映ったでしょうか。

カラフルさが素晴らしいGUのトーンを合わせた配色

では、そんな心機一転GUのWebデザインをレビューしていきましょう。

トップページのカラフルさは屈指のものです。上図はGUの背景のキャプチャ。多彩な色を使用しています。これはトーンを目が疲れないように合わせて、色と色の間に中間色を混ぜていることにより実現しています。よく見ると、左の緑とピンクの中間には、かすかな異なる色が、そして右の紫と水色の間には白が中間色となっています。

このように連続しない配色を行うと、目が疲れず色を受け入れられるんですね。

h2要素が面白い−間を分けたh2要素

このWebデザイン、h2要素が秀逸だと思いました。それぞれのコンテンツタイトルにはh2が指定されていますが、これが凄く良いですね。

まず、h2タイトルのみが独立しています。h2下は開いており、カラフルな背景が覗いていますよね。この「ちょっと合間がある」ことにより、コンテンツ自体に目がいくようになっています。

上図も同じくh2要素が独立しています。

一度、背景を断ち切ることによって、逆にコンテンツ自体を目立たせるデザイン手法は頂きです。

また、当ブログでも利用していますが、タイトル上にバーをつけることで存在感を強調している点も良いですよね。

商品ページでは背景はグレー｜ECサイトの宿命とそのデザインの意味

他のページもカラフルなのかなーとか思っていたら、そんなことありませんでした。個別ページの背景はグレーとなっています。

確かに、ずっとあんなカラフルが続いていたら、商品が目立たなくなりますもんね。ECサイトという商品が主役のWebサイトでは、この考えは忘れてはいけないなと思いました。

Webデザインをしていると、どうしても自分の感性を主張したいときがあると思います。そういった時も、あくまでもこのサイトの主役は誰なのか？ということを意識してデザインすると良いんでしょうね。その点で言っても、このサイトは格好の良い例ですよね。

トップページではワクワクを強調してユーザーを各ページへ導く。そして商品ページでは、商品そのものに注目してもらう。

この流れを、Webデザインが作っています。

ちなみに、トップページ以外はユニクロのWebデザインと背景もグローバルメニューもほとんど同じものです。

ですがトップページでは、先ほどのロゴに込められた「ちょっとやんちゃな妹」というイメージを全体で表現しています。ブランドの差別化をWebデザインでも行なっているんですね。

んー！勉強になりました！

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•