STEPHEN KNOLL
NEW YORK

スティーブン・ノルブランドサイトのリニューアルデザインを担当しました。商品はBtoC向け（店頭で購入）とBtoB向け（美容サロン向け）があります。国内での認知度向上、ブランドの世界観、商品理解が素早くできるサイトを目指しました。WEBサイトでの体験を通し店頭での購買へつなげていく事を目的としています。競合コンペからスタートし、ローンチ後もキャンペーンページ、LPなどの更新・運用を担当しました。

プロジェクト背景と目的

古くなったサイトを一新し、WEBサイト上でも魅力的な発信が急務。アメリカNYでは認知度があるが、日本では美容に携わる方や美容リテラシーの高い方のみに認知されるブランドの為、認知を強化していきたい。

大手企業様ですので、当然ですがマーケティング、宣伝部がありますので課題は整理された形でご依頼がありました。課題としては以下になります。

• デザイン（見た目）をブラッシュアップ
• スマホへの最適化
  ターゲット層は20〜30代前半の女性であるが、最適化ができていない為、顧客接点を逃している
• ユーザビリティの向上
• 既存サイトでは商品が一般向け（店頭で購入）とプロ向け（美容サロン向け）があるがわかりづらい為、わかるような見せ方を提案してほしい
• 短時間の訪問でもブランド世界観がわかるようなサイト、そしてライフスタイルマガジンのようなサイトづくりをしていきたい
• 新商品の追加、キャンペーンやイベントとの連動があるため、ロングスパンで管理できるサイトを希望している
• SEO対策、アクセスログ（GA）解析

市場調査

リサーチとして実際に女性用コスメコーナーへ行きスティーブン・ノルの商品を購入しました。商品を手にする、陳列棚を見る、使って見る事で資料からではわからない事が沢山あります。例えば書体は何を使っているのか、基本カラーはどんな感じか、競合商品はどんな感じか？など。下調べができる為、実際に使ってみて愛着がわき、自然と自信をもって発言ができます。

既存サイトの調査

アメリカNYのサイトはブランドビジュアルを全画面に使いブランドの世界観を重視しています。グロナビは面積が小さくわかりづらい、下部のボタンをクリックしないと、他コンテンツへ遷移できない懸念点があることがわかりました。

日本の既存サイトは課題としてあげられているパッと見た時に商品が一般向け（店頭で購入）とプロ向け（美容サロン向け）があるのがわかりづらい点と、バナー画像のフォントルールがバラバラな為、ごちゃっとした印象があり、ユーザーがどこを見ていいのかわかりづらい。また、最新情報がテキストリンクのみな為、情報が入ってこない印象を受けました。下記は既存サイトのトップページです。

デザイン提案

調査結果を元にトップページのデザインの方向性はアメリカNYを踏襲しブランド世界観重視案（A）とWEBマガジン風 一般向け・プロ向けを差別化案（B）の２軸で考えました。（A）はその時推したいビジュアルや商品を訴求でき、数秒経過後キービジュアルが切り替わる仕様を想定しています。

（B）はファーストビューに一般向けとプロ向けの入口を設け、最新情報は更新時にカードが追加していくイメージを想定をしています。結果はWEBマガジン風 一般向け・プロ向けを差別化案（B）が採用され、受注に成功しました。下層ページや他画面もご提案しています。

デザインルールの整理

既存サイトでは書体、カラー計画がされておらず、まずはWEBサイトの基本となるデザインルールやUIパーツ、コンポーネントを見直しました。商品数が約70点あり、それぞれ商品一覧、商品詳細ページを用意する必要があります。

制作サイドからするとテンプレートから量産を効率化、パーツ部品の共通使用やコンポーネント化が重要になります。メリットとしてサイト更新や管理する際、メンテナンスに優れたサイトになります。そこで下記のようにイレギュラーを除き、基本ルールを決めました。

結果

Googleが推奨するSEO対策のひとつレスポンシブデザインを早い段階で採用できた為、検索からの流入が増え、SNSでのプレゼントキャンペーンなどからの流入や美容イベント、ファッション誌からの相乗効果もあり、新規・既存ユーザーの再訪率・平均ページ滞在時間の向上に貢献することができました。

また、リニューアル当初はトップファーストビューで一般向け（店頭で購入）とプロ向け（美容サロン向け）と明確に入口を分けていましましたが、定期的にキャンペーンや新商品が発売されることもあり、その時推しを重視するカルーセルバナーに仕様を変更しています、ワイドディスプレイへの対応など幅広くサポートさせていただきました。