サイクルスポーツのユーザー参加型コミュニティサイトのデザイン制作
ライト層から中間層まで男女問わず参加しやすい UI/UX を実現株式会社ジェイ・スポーツ様のクラウドを活用した導入事例

https://www.jsports.co.jp/cyclevillage/

掲載日：2023年3月24日

サイクルスポーツのユーザー参加型コミュニティサイトのデザイン制作

株式会社ジェイ・スポーツ様（以下、ジェイ・スポーツ様）は、専門チャンネル J SPORTS を運営されています。このたび、サイクルスポーツを楽しむユーザーが交流できるコミュニティサイト「サイクルビレッジ」を新規開発するにあたり、アイレットがデザイン制作を担当しました。

男性的でコア層向けの既存サイトが多い中、ライト層や女性ユーザーも気軽に参加できるコミュニティづくりを計画

ジェイ・スポーツ様はスポーツ専門チャンネル J SPORTS を運営されており、野球やサッカー、バスケットボール、サイクルロードレースなど豊富なジャンルのスポーツ中継を配信するチャンネルとして根強い人気を誇ります。

同社は新規事業として、マウンテンバイクやロードバイクなどのサイクルスポーツを楽しむユーザーに向けて、ユーザー同士で交流を楽しめるコミュニティサイトの開発を企画されました。そして、社内で生まれたさまざまなアイデアを形にすべく、デザイン制作をアイレットにご依頼いただきました。

アイレットにオーダーいただいたポイントは大きく2つあります。まず、ジェイ・スポーツ様が構想された「写真を共有し合う機能」や「楽しい道を紹介し合う機能」を、ユーザーにとって親しみやすくコミュニケーションが取りやすい UI/UX で表現すること。もう1つが、ライト層から中間層まで男女問わずに受け入れられるようなデザインにすること。サイクルスポーツは男性のユーザー層がメインで、ベンチマークしていた各種 Web サイトもカッコ良さやスタイリッシュさを前面に押し出したコア層向けのデザインが多くありました。ジェイ・スポーツ様は女性のユーザー層も増やすことを目指していたため、既存サイトとは異なる方向性のデザイントンマナを作成する必要がありました。

アイコンやカラーの工夫で親しみやすさを演出
既存 SNS を参考に、新規ユーザーも感覚的に使いやすい UI/UX を実現

サイトデザインのトンマナは、J SPORTS 公式サイトの共通デザインを踏襲しつつ、カラーリングはカッコ良さに寄りすぎず、明るく元気なビタミンカラーをフックにしながら、全体的にコントラストを付けていきました。ボタンなどのアイコンの形も四角ではなく角に丸みを持たせたものを多用することで、やわらかく親しみやすい印象を演出しています。

また、コンテンツについては、既存の J SPORTS のサイトとは使い方が異なるコミュニティサイトであるため、「サイクルビレッジ」の楽しみ方や登録方法をステップで分かりやすく説明するコンテンツを作成し、イラストを交えて親しみやすさや楽しさを訴求しました。

ユーザー同士がコミュニケーションを取り合う「TALK ROOM」画面の背景には、自転車のパーツをアイコン化してデザインに取り入れました。マウンテンバイクとロードバイクでパーツの形状が異なるため、画像をリストアップしてジェイ・スポーツ様に監修いただき、パーツの違いを再現することでファンの好感度を高める工夫をしています。

なお、「TALK ROOM」の UI は既存の大手 SNS やコミュニケーションツールの UI を参考にすることで、初めて利用する方でも感覚的に使えるようにしております。フロントエンジニアサイドでは、投稿された画像が横長でも縦長でも同じ領域内で画像全体が見えるように配慮しました。

今回は SP 版、タブレット版、PC 版のレスポンシブデザインにおけるブレイクポイントがすでに仕様で決まっていたため、あらかじめブレイクポイントを想定したレイアウトにするなど、既存サイトに合わせるべき部分は柔軟に対応いたしました。また、一部のデザインに関しては J SPORTS の他ページで使用しているモジュールを活用し、HTML 構造を変えずに流用することでコスト最適化にも貢献しています。

このような取り組みを経て、お客様が当初イメージされていたとおり、ライト層から中間層まで男女問わずサイクルスポーツファンのコミュニティを醸成するユーザー参加型ウェブサイトが完成いたしました。

アイレットでは Web サイト制作をはじめ、アプリ、システム・サービスの開発など、企画から UI/UX 設計・デザイン・構築・運用までをワンストップでお引き受けすることが可能です。近年注目が集まっているコミュニティサイトの制作にも対応し、お客様のご要望やユーザーニーズを踏まえた最適な提案をさせていただきますので、ぜひお気軽にご相談ください。

案件名	サイクルスポーツのユーザー参加型コミュニティサイトのデザイン制作 ライト層から中間層まで男女問わず参加しやすい UI/UX を実現
クライアント	株式会社ジェイ・スポーツ様