KUROADのサイトを分析してみた
シェアサイクリング用の自転車として開発されたKUROADさんのサイトを分析させていただきました。スタイリッシュな商品にマッチしたサイトになってます。
KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。
デザイン分析元の基本情報
商品の特徴：次世代シェアサイクルKUROADさんの紹介サイト
#愛車の日 #自転車 #シェアサイクル #黒 #スタイリッシュ
URL：https://kuroad.com/
企業名：OpenStreet株式会社
トップページ
黒背景に商品が引き立つスタイリッシュなデザイン。文字の配置やあしらいが勢いを感じられます。
-ファーストビュー
マウスを動かすと自転車と背景の文字がずれ、文字の影が動くことで近未来的な雰囲気が出ています。黒一面になって自転車のスタイリッシュさとかっこよさがサイトでも表現されています。
車輪で今のサイトの位置がわかるのがアクセントにもなっていて、機能性もあります。
-コンテンツ
-Brand
文字が大きくメリハリがあります。最近デスクトップも大きくなりつつあるのでこのぐらいの文字の大きさのサイトも増えている気がします。
単調にロゴを載せるのではなく、製品に写ったロゴを載せているところがスタイリッシュな印象を与えます。
タイトル部分もメインビジュアルの文字の影みたいなものをイメージしており統一感があります。黒背景に白い文字がスマートな印象です。
-Solution
-Product
ちょっとした映像のループで使うシーンがこだわりを感じられます。サイトが黒いので、モノトーンの映像にも合っています。一緒に文字も入れることや、映像の上下にすることで単調にならずメリハリが出ています。
-Spec
ギアの写真を使用しており、マウスオーバーすると画像の前後が変わります。使用されている写真はギア部分に光を当てて、そこだけハイライトになることでこだわりが感じられスペックの高さが伝わってきます。
スペックだけで画面をもたせようとして横長にすると隙間が気になってしまいますが、うまく画像を使用して見やすくデザインされている印象でした。
-共通箇所（サイトマップ、フッター）
ヘッターに線が入ってることで、他のコンテンツと競合せず見やすくなってます。スクロール量に応じて車輪が動くようになっており、今自分がどれくらいサイトを見たか分かり、ストレスなく見れます。
スマホデザイン（レスポンシブ）
文字の影はスクロールする際の指の位置で変動しました。QandAなどPC版では入っていたあしらいをスマホではなくしてスッキリ見やすいデザインに変更するなどレスポンシブデザインをしながら、より見やすいものに調整されていました。
写真
ライティングがとてもきれいで黒背景で使用されることを想定されているような写真で、背景が黒なので何枚重ねても違和感がない感じでした。
プロダクトの画像は光を強めにしたパキッとした写真で、乗っている人のイメージ画像は優しい色あいが素敵なライフスタイルを連想させられる雰囲気の写真と使い分けられてました。
動き
マウスを動かすとそれに合わせて、全体的に文字の影が動く演出がされています。文字がずれることで自転車で走った時の躍動感や疾走感が出る印象でした。
フォント
背景が黒一色のサイトなので、そこに映えるよう文字は全て白でデザインされています。見出しタイトルのフォントは存在感のあるウェイトで使用しています。
日本語デバイスフォント：NotoSans CJK jp
英語：Proxima Nova
フォントのカラー：#FFFFFF
フォントの説明
Proxima NovaはAdobe Fonts等から使用できます。力強く安定感のある形から、見出しに使いやすいフォントです。Gothamにも似ているように思えます。
カラースキーム分析
「KUROADは黒子」と言っているように、何にでも合う「黒」を全面に使っています。商品写真、商品写真の背景も黒く統一しているため、サイトを見るだけでKUROADのブランドイメージが伝わってきます。
ファビコン
OG画像
タイトル
KUROAD - 誰もが⾃由に乗れるe-BIKE
KUROAD（クロード）はSHIMANOやSR SUNTOURなど高品質のパーツを使用し、500whの大容量バッテリーを搭載したイーバイクです。シェアサイクリングにぴったりの新しいe-bikeとして開発されました。
この記事を書いているメンバーが働いている会社
よかったら見に来てください！
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？