MENU
CLOSE
DESIGNTRENDSWEB Edit : 2023.09.08 Update : 2024.06.12

【11選から解説】スポーツを盛り上げるためのウェブサイトのコンテンツとデザインUI

スポーツを盛り上げるためにホームページでできることはどんなことがあるのでしょうか?コンテンツやUIデザインについて海外も含めて実際のサイトを元に調査しましたのでご紹介していきたいと思います。コンテンツごとに魅力的な事例を取り上げて解説していきます。


ファーストビュー(FV)

ファーストビューではそのスポーツやチームのチームカラーを基調に、魅力を伝えられる写真を利用している。

FIBA バスケットボール ワールドカップ 2023

FIBA バスケットボール ワールドカップ 2023 出典:https://www.fiba.basketball/jp/basketballworldcup/2023

2023年8月25日から9月10日まで、フィリピン・インドネシア・日本で開催されるFIBAバスケットボールワールドカップ2023のWebサイトです。ファーストビューはロゴカラーに合わせたポップな色調に、最新ニュースがバランスよく構成されています。

JFA|公益財団法人日本サッカー協会

JFA|公益財団法人日本サッカー協会 出典:http://www.jfa.jp/

日本サッカー協会公式Webサイトです。ファーストビューは躍動感あふれるビジュアルが数枚スライドで表現され、インパクトがあります。画面下にはボックス型で並んだ試合スケジュール&結果が整列し、読みやすくまとめられています。

全米プロゴルフ協会

全米プロゴルフ協会 出典:https://www.pga.com/

アメリカ国内ゴルフの統括団体である全米ゴルフ協会のWebサイトです。ファーストビューは大きなビジュアルに自国の国旗とカラーが揃えられてインパクトがあり、直ぐに過去の試合等のストーリー記事に飛べるようシンプルに表現されています。

公益財団法人 日本スケート連盟 – Japan Skating Federation

公益財団法人 日本スケート連盟 - Japan Skating Federation 出典:https://www.skatingjapan.or.jp/

公益財団法人日本スケート連盟の公式Webサイトです。ファーストビューは画面いっぱいにプレイヤーのベストショットを紹介。シンプルですがプレイヤーの表情が分かる、心惹かれる明解なデザインに構成されています。

2022 FIFAワールドカップ カタール

2022 FIFAワールドカップ カタール 出典:https://www.fifa.com/fifaplus/ja/tournaments/mens/worldcup/qatar2022

2022 FIFAワールドカップ カタールのWebサイトです。ファーストビューではプレイベストシーンと試合結果がわかりやすく並んで構成デザインされています。

ゲーム(本日の試合)

スポーツの醍醐味であるゲームの試合結果も観客の注目度の高いコンテンツの一つです。ただ表示するだけでなくデザインで魅力的に表現することが可能です。

WBC

WBC 出典:https://www.wbc2023.jp/

WBC公式Webサイトです。試合速報は野球のスコアボード風にユニークなデザインで表現されています。

NPB.jp 日本野球機構

NPB.jp 日本野球機構 出典:https://npb.jp/

プロ野球12球団の日本野球機構(NPB)の公式Webサイトです。本日の試合ではプレイヤーの写真付きで紹介され、わかりやすく構成されています。

ゲームスケジュール

次の試合を視覚的に確認できるゲームスケジュールもTOPへ掲載すると注目度が上がるコンテンツです。

ホーム|JLPGA|日本女子プロゴルフ協会

ホーム|JLPGA|日本女子プロゴルフ協会 出典:https://www.lpga.or.jp/

ゴルフのグリーンをイメージさせるカラーを基調としたWebサイトで、ツアースケジュールごとにボックス型スライドで 表現されています。

JFA|公益財団法人日本サッカー協会

JFA|公益財団法人日本サッカー協会 出典:https://www.lpga.or.jp/

ファーストビュー で表示されるボックス型で並んだ試合スケジュール&結果です。整列され読みやすくまとめられています。

公益財団法人 日本スケート連盟 – Japan Skating Federation

公益財団法人 日本スケート連盟 - Japan Skating Federation 出典:https://www.skatingjapan.or.jp/

日本スケート連盟のWebサイトは種目ごとにイベントスケジュールが線表(ガントチャート)で表現され、イベント内容、開催場所、期間が一目瞭然です。

高校野球

高校野球 出典:https://www.hanshin.co.jp/koshien/

全試合予定の日程が表記され、日程をクリックすると試合結果が表示されます。見逃し動画、試合詳細、試合写真など様々な情報を選択できるようシンプルに構成されています。

FIBA バスケットボール ワールドカップ 2023

FIBA バスケットボール ワールドカップ 2023 出典:https://www.fiba.basketball/jp/basketballworldcup/2023

縦型のタイムスケジュール型でイベント日程が表示されています。終了したイベントと今後の予定がそれぞれカラー、点線から実線に変化するデザインで簡潔に表現させています。

ランキング

現状のリーグなどでのランキングを表示します。見る人の感情を引き出すコンテンツです。応援している人やチームがランキングが上位であったりすると嬉しくなりますし。下位であったら頑張れと応援したくなります。

ホーム|JLPGA|日本女子プロゴルフ協会

ホーム|JLPGA|日本女子プロゴルフ協会 出典:https://www.lpga.or.jp/

ツアーごとに各種ランキングを表示されます。ランキング1位はプレイヤーのプロフィールも大きく紹介しインパクトのあるデザインが特徴的です。

FIBA バスケットボール ワールドカップ 2023

FIBA バスケットボール ワールドカップ 2023 出典:https://www.fiba.basketball/jp/basketballworldcup/2023

トーナメント戦の試合順位をラウンドごとグループごとに整列でまとめられ、一目で情報を正確に伝えられる構成にしています。

WBC

WBC 出典:https://www.wbc2023.jp/

トーナメント戦の試合がグループごとにまとめられ、グループごとにカラーリングされポップでカラフルな印象と統一感あるデザインに表現されています。

プレイヤー紹介

スポーツをしているプレイヤーの個人の情報を詳しく提示することで、新しい発見やファンの獲得につながります。

オリンピック

オリンピック 出典:https://olympics.com/ja/olympic-games/tokyo-2020

オリンピックプレイヤーのトップの紹介ページは、プレイヤー写真・名前・チーム・競技のみシンプルな表記と、気になったプレイヤーをお気に入り登録することができる構成にデザインされています。プレイヤー紹介の個人ページはチーム名、競技名に国旗・ピクトグラムが追加され説明されています。

NPB.jp 日本野球機構

出典:https://npb.jp/

プロ野球12球団の日本野球機構(NPB)の公式Webサイト内の個人打撃成績紹介はプレイヤー紹介写真と成績表が明解なデザイン構成され、随時最新結果を表示します。

新着情報・ベストシーン

試合の見どころやベストシーンを記事にまとめて紹介しています。

オリンピック

オリンピック 出典:https://olympics.com/ja/olympic-games/tokyo-2020

オリンピックでのベストシーンやハイライトを記事形式で紹介して、大会を振り返ることができます。

2022 FIFAワールドカップ カタール

2022 FIFAワールドカップ カタール 出典:https://www.fifa.com/fifaplus/ja/tournaments/mens/worldcup/qatar2022

2022 FIFAワールドカップ カタールのWebサイトではプレイベストシーンと試合結果がデザイン的にも統一されわかりやすく並んで構成デザインされています。

まとめ

スポーツに関わるウェブサイト制作時には、上で紹介したように、写真や動画を活用して試合のハイライトや選手のインタビューなど独自のコンテンツを視覚的に使いやすいUIで紹介することで、訪問者にとって使いやすいWebサイト制作ができます。 また、最新のニュース、スケジュール、結果を迅速に掲載し、ファンへ向けて常に最新の情報を更新していくことも重要です。

Yuka Fujimoto

美大にいた頃に画面ひとつで世界中の人と繋がれるWebサイトの機能性やデザインへ興味を持つ。インターンを経てIT企業へ就職し、そこで出会った小日向とKOHIMOTOを立ち上げる。実用的なサイトを追求するディレクター兼デザイナー。ラジオと焼き鳥がすき。