傘専門店water frontさんのサイトを分析してみた
もうすぐ梅雨入り！？雨に備えて一足早く、日本一の傘のシェアを誇るwater front（ウォーターフロント)さんのデザインを分析させていただきました。カラフルな傘が映えるデザインです。
KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。
デザイン分析元の基本情報
商品の特徴：種類が豊富で国内シェアNo.1の傘
#梅雨 #傘 #レイングッズ
URL：https://www.water-front.co.jp/
企業名：株式会社シューズセレクション
トップページ
品揃え、カラーバリエーションの多さが伝わるサイトです。
-ファーストビュー
店舗の写真を出すことで品揃えの多さがわかります。また、様々な場所で販売されている商品なのでブランド名自体はどこかで見たことのあるものですが、実店舗があるという訴求にもなっています。
奥行き感のある写真なので、種類やカラー展開の豊富さが伝わってきます。
-コンテンツ
ストーリーが展開されていることで、傘は単純に雨をしのぐものではなく、傘のある暮らしがイメージできます。ユーザー目線の丁寧な商品であることが伝わってきます。
傘が擬人化されたような写真で優しい雰囲気が伝わります。高級路線ではなく、日常で使う傘が多いので、手書きの雰囲気がハードルを上げずに親しみが持てるものになってます。
動きがかわいい！文字が落ちてくる感じとか、水たまりなど、演出がおもしろい。ストーリーを引き立てる。読みたくなる雰囲気があります。
下層ページ
-プロダクト
ポートフォリオ風に写真だけで商品の特徴を見せています。パーツなどアップの写真も多いので、細部までのこだわりや柄のイメージが伝わります。背景がカラフルなのも目を引きます。マウスオーバー画像で45cmなど簡単な特徴を入れているので、詳細ページに行く前に少し情報が事前に分かりイメージしやすいです。
モーダルがマウスオーバーと一緒の背景色になっているのが、細かいところへのこだわりや、背景のカラーが変わるので「虹色」の印象でブランディングされています。
下層ページのタイトル部分では、写真をフル画面で使用しておりカラフルで傘の色印象が残ります。
-FLAGSHIP SHOP
傘を選ぶ空間を追求した特化型ショップなのですが、店舗の空間へのこだわりも伝わる情報になってます。
カタログ
商品の多さに圧倒される見せ方でありつつ、テーマごとに商品が分かりやすくレイアウトされています。バーコードが付いており、商品在庫などがすぐに確認できそうなのが機能性とデザイン性が両立したものになってる印象でした。
-オンラインショップ
通常は右の引いた状態のデザインですが、マウスオーバーすると、左のように閉じたアップ画面の物など商品の特徴的な画像に変化します。
写真
全体的に傘が主役でありながらストーリーを感じられるものになっています。明るくカラフルな写真が多くて楽しい雰囲気が出ています。
動き
スクロールをするとフォントと線画が優しく動き出します。写真とマッチしており、優しい雰囲気が出ています。
フォント
情報を伝える部分はヒラギノを使用していますが、ブランドコンセプトを伝える部分ではんなり明朝が使われていました。明朝体を使うことで丁寧な印象があり、また、癖のあるはんなり明朝を使うことでブランドのこだわり、商品の個性を感じることができます。
日本語デバイスフォント：はんなり明朝、Hiragino Sans
英語：Futura-Book
フォントのカラー：#241817 #FFFFFF
フォントの説明
はんなり明朝は空気を含んだようなふんわり感があります。柔らかいイメージの商品や優しい雰囲気のサイトデザインに味を出すことができます。
カラースキーム分析
全体としては青系の色味が多く使われていますが、ブランドのイメージである虹色を所々使用し華やかに彩られています。色数の多い虹色を使うことで商品の豊富さも伝えることができますね。
ファビコン
OG画像
タイトル
Waterfront ～傘 国内シェアNo.1ブランド～
日本一の傘のシェアを誇るwater front（ウォーターフロント)公式ＨＰ。water front（ウォーターフロント)はコンパクト性に優れ豊富なカラーバリエーション、気軽に買える価格でありながら高品質。沢山の方にご愛用頂いております。
この記事を書いているメンバーが働いている会社
よかったら見に来てください！
