見出し画像

KUROADのサイトを分析してみた

シェアサイクリング用の自転車として開発されたKUROADさんのサイトを分析させていただきました。スタイリッシュな商品にマッチしたサイトになってます。

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

画像1

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

商品の特徴:次世代シェアサイクルKUROADさんの紹介サイト
#愛車の日 #自転車 #シェアサイクル #黒 #スタイリッシュ
URL:https://kuroad.com/
企業名:OpenStreet株式会社

トップページ

黒背景に商品が引き立つスタイリッシュなデザイン。文字の配置やあしらいが勢いを感じられます。

-ファーストビュー

スクリーンショット 2021-05-20 13.19.37

マウスを動かすと自転車と背景の文字がずれ、文字の影が動くことで近未来的な雰囲気が出ています。黒一面になって自転車のスタイリッシュさとかっこよさがサイトでも表現されています。
車輪で今のサイトの位置がわかるのがアクセントにもなっていて、機能性もあります。

画像14

画像15


-コンテンツ

-Brand

スクリーンショット 2021-05-20 13.20.13

文字が大きくメリハリがあります。最近デスクトップも大きくなりつつあるのでこのぐらいの文字の大きさのサイトも増えている気がします。
単調にロゴを載せるのではなく、製品に写ったロゴを載せているところがスタイリッシュな印象を与えます。
タイトル部分もメインビジュアルの文字の影みたいなものをイメージしており統一感があります。黒背景に白い文字がスマートな印象です。

画像23

画像17


-Solution

スクリーンショット 2021-05-20 13.20.39

画像18

画像19

画像20


-Product

スクリーンショット 2021-05-20 13.21.01

ちょっとした映像のループで使うシーンがこだわりを感じられます。サイトが黒いので、モノトーンの映像にも合っています。一緒に文字も入れることや、映像の上下にすることで単調にならずメリハリが出ています。

-Spec

スクリーンショット 2021-05-20 13.21.21

ギアの写真を使用しており、マウスオーバーすると画像の前後が変わります。使用されている写真はギア部分に光を当てて、そこだけハイライトになることでこだわりが感じられスペックの高さが伝わってきます。
スペックだけで画面をもたせようとして横長にすると隙間が気になってしまいますが、うまく画像を使用して見やすくデザインされている印象でした。

-共通箇所(サイトマップ、フッター)

スクリーンショット 2021-05-20 13.21.58

ヘッターに線が入ってることで、他のコンテンツと競合せず見やすくなってます。スクロール量に応じて車輪が動くようになっており、今自分がどれくらいサイトを見たか分かり、ストレスなく見れます。

スマホデザイン(レスポンシブ)

スクリーンショット 2021-05-20 13.39.16

文字の影はスクロールする際の指の位置で変動しました。QandAなどPC版では入っていたあしらいをスマホではなくしてスッキリ見やすいデザインに変更するなどレスポンシブデザインをしながら、より見やすいものに調整されていました。

写真

スクリーンショット 2021-05-20 13.23.07

ライティングがとてもきれいで黒背景で使用されることを想定されているような写真で、背景が黒なので何枚重ねても違和感がない感じでした。
プロダクトの画像は光を強めにしたパキッとした写真で、乗っている人のイメージ画像は優しい色あいが素敵なライフスタイルを連想させられる雰囲気の写真と使い分けられてました。

動き

画像23

マウスを動かすとそれに合わせて、全体的に文字の影が動く演出がされています。文字がずれることで自転車で走った時の躍動感や疾走感が出る印象でした。

フォント

スクリーンショット 2021-05-20 13.52.24

背景が黒一色のサイトなので、そこに映えるよう文字は全て白でデザインされています。見出しタイトルのフォントは存在感のあるウェイトで使用しています。

日本語デバイスフォント:NotoSans CJK jp
英語:Proxima Nova
フォントのカラー:#FFFFFF

フォントの説明
Proxima NovaはAdobe Fonts等から使用できます。力強く安定感のある形から、見出しに使いやすいフォントです。Gothamにも似ているように思えます。

カラースキーム分析

画像21

「KUROADは黒子」と言っているように、何にでも合う「黒」を全面に使っています。商品写真、商品写真の背景も黒く統一しているため、サイトを見るだけでKUROADのブランドイメージが伝わってきます。

ファビコン

画像5

OG画像

画像4

タイトル

KUROAD - 誰もが⾃由に乗れるe-BIKE

KUROAD(クロード)はSHIMANOやSR SUNTOURなど高品質のパーツを使用し、500whの大容量バッテリーを搭載したイーバイクです。シェアサイクリングにぴったりの新しいe-bikeとして開発されました。

画像3

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

画像2


いいなと思ったら応援しよう!

この記事が参加している募集