Off & RelaxさんのWebサイトを分析してみた

温泉の成分を使用し頭皮にアプローチした、シャンプー等ヘアケア商品の紹介サイトOff & Relaxさんのサイトを分析させて頂きました。ファーストビューから引き込まれるモーションで興味を持たせられる素敵なサイトです。
余白を使って落ち着いたレイアウトに仕上げることで商品の魅力を伝えています。

KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。

デザイン分析元の基本情報

商品の特徴：温泉の成分を使用し頭皮にアプローチした、シャンプー等ヘアケア商品（Off & Relax）のブランディングサイト
＃20代　＃30代　＃女性　 #EC #ブランディング #シャンプー #温泉
URL：https://offandrelax.jp/
企業名： 株式会社オー・アンド・アール

トップページ

動きと、写真がマッチしていて、商品の世界観を引き出しつつ、統一感がある

-ファーストビュー

波紋の動きが滑らかで気持ち良い動き=お風呂(シャンプー)の心地よさが伝わる。

-コンテンツ

ストアのバナーがシンプルで嫌な感じがなく、世界観を壊さずデザインに溶け込んでいることで、違和感なくショップへ誘導させられるデザインだと思います。
余白を使ったレイアウトで上品。リラックス感が出る商品にとてもマッチしたデザインになってます。

-共通箇所（サイトマップ、フッター）

必要最低限のコンタクトとプライバシーポリシーのみ。シンプルでサイトの美しさのトーンを維持しているデザインになってます。

スマホデザイン（レスポンシブ）

スマホと、PCで画像を分けたりなどして、それぞれ見る端末で一番見やすい形になっています。

下層ページ

解説に画像やイラストを用いて分かりやすい。文字のサイズの小ささ、文字間隔、彩度の低さで主張を抑えています。

写真

写真の世界観が、温泉の成分と、高級感をうまくバランスが取れており、全体やアップなど色んな角度から見れるし、ジャンプ率があって飽きの来ないレイアウトになってます。
また、商品の台(石)はパッケージの色と合わせていて商品を邪魔せずに存在感を出している。

動き

画像とテキストがゆっくり出てきて上品。落ち着いた雰囲気でリラックス感を出しています。
画像上の水の動きが気持ち良く、お湯も連想させる世界観を大切にしてます。

フォント

ゴシックだが細い書体と字間を広めにすることで、高級感がありつつ、やさしい印象になってます。

日本語デバイスフォント：游ゴシック
英語：Montserrat（googleフォント）
フォントのカラー：黒だと重い印象になるので、グレー系を使用して優しい＆高級感がでる色味

游ゴシックはどのデバイスにも入っていて見た目が統一されるフォントです。googleフォントを使用することで、軽量化され、表示スピードが早くなったり・SEO対策に良いといわれています。googleフォントを使用することで、軽量化され、表示スピードが早くなったり・SEO対策に良いといわれています。

カラースキーム分析

水色：温泉・商品・水のイメージ
グレー：パッケージ色・背景色
黄色：アクセント

カラースキームは色単体で見ると、パステルカラーでかわいい印象になりそうですが、余白のとり方、写真を大きく使うことで高級感がありつつ、女性らしい印象になってます。パッケージのマット感とサイトの優しい色味があっています。

ファビコン

タイトル

【公式】OR Off & Relax（オーアール オフアンドリラックス）

温泉ミネラル成分を含んだ、新発想のスカルプケア。うるおい、ハリ、艶めきを髪にもたらします。

この記事を書いているメンバーが働いている会社
よかったら見に来てください！