オススメWebサイト「ROOT CO」

こんにちは、Okkyです。

iPhone3GSが日本で発売されて来月で14年が経とうとしています。
iPhoneを始めとしたスマートフォンが世の中の必需品となり、さらにインターネットが発達したように思います。
インターネットと共にWebサイトも大きく発展をしてきました。
自分なんて、そのWebサイトの勉強をしているわけですから、Webが世の中にとってどれほど重要なのかは計り知れません。
Webサイトは主に視覚情報、目に入るのであれば、それを見てどう思われるかを考えることも大事なのではないでしょうか。
簡易的なものもあれば手の込んだ芸術品のようなものまで様々。見ていて飽きません。

そこで今回はWebのデザインを学ぶ学生という視点から、個人的にぜひみなさんにも見ていただきたいWebサイトをご紹介したいと思います。

見ていただきたいポイントは大きく分けて３つ。

①ブランドコンセプトとWebサイトのデザインが一致している
（Webサイトからブランドのイメージを正しく連想させられるか）
②商品に対して興味を持ちやすく、見やすく紹介されているか
③商品購入への導線が違和感なく作られているか。

メーカーの商品ページともなると商品が最も詳しく書かれているページで、そこから購買へ繋がることも少なくありません。WebデザインのうちでもUI/UXからの視点からが多めですが、その３つのポイントを踏まえて紹介していきます。

ROOT CO

ROOT CO は神奈川県箱根町に本拠地を構えるモバイルギアブランドで、アウトドア向けのカラビナやストラップ、スマートフォンケースなどを販売しています。

サイトのベースとなる色はアースカラーで、自然界に存在しないような派手な赤や黄色などは使用されていません。文字色も黒と白のみで、主張は小さめに思えます。

トップページ
商品紹介ページ
商品詳細ページ
終わりに

トップページ

サイトにアクセスした最初の画面。
いきなり商品紹介をするのではなく、ブランドコンセプトが背景の動画とともに表示されます。
動画の内容も10秒程度の動画が数本組み合わさったもので、サイトの訪問者を飽きさせないような仕組み、アウトドアや旅をしているような感覚にさせます。
また、この背景の動画は再生マークをクリックすることで詳しく見ることができます。

スクロールすると最初に商品画像がフェードイン、続いて商品名、詳細がスライドインしてきます。

商品画像と商品名の配置は左右交互になっているので、例えば商品画像をが左にある場合、視点を左のままスクロールすれば次の商品の詳細に目がいく構造になっています。
また、商品詳細の背景画像には使用シチュエーションの画像を採用することで、擬似的な使用体験を連想させることができるかもしれません。

商品紹介ページ

商品紹介ページです。このページには上部の[PRODUCTS]から遷移できます。
インスタグラムのような画像配置で、馴染みの深い、見やすいページとなっています。(Instagramは関係なく、単にこの配置が見やすいということでInstagramでも採用されている？)
画像のみなので、他の文字などの情報に目移りしにくい、統一感のあるレイアウトだと思います。

商品画像にカーソルを合わせると商品名、画像から商品詳細にアクセスすることができるので、無駄な情報を見させられるような煩わしさもありません。

商品詳細ページ

商品詳細ページです。
左側に商品の画像、右側に商品説明のよくあるパターンです。
関連する商品などは出てこずに、他の商品を見る場合は上部左右にある次の商品名をクリックするか、
上部中央にある４つの四角のアイコンをクリックすることで、商品紹介ページに遷移することができます。

背景色は白ではなく#F5F5F5（若干グレーががっている）文字色ははブラックで特段アクセントカラーとなるものもないので、ページが全体的に馴染んでいます。
自分なら右の商品説明のボールドになっている部分を暗めのオレンジなどにしてしまいそうですが、よくよく考えてみればそこまで強調するような場所ではないので、変にアクセントカラーをつけるものでもないのかもしれません。単純な見やすさで言えば統一感があった方が良いのかも。