logo
デザイン

更新日

スポーツイベントのWebサイトを作る時のポイントや実例

私の個人的SNSでちょこちょこ投稿しているのですが、今年からトライアスロンを始めまして、様々なスポーツイベントのWebサイトを閲覧する機会が増えました。そこで気づいたスポーツイベントや大会のWebサイトの特徴や、デザインのポイントをまとめてみます!

スポーツイベントの Web サイトをデザインする時のポイント

さまざまなスポーツイベントの Web サイトを調査しながら感じた共通点や、制作時のポイントなどを見ていきましょう。

動画や画像を大きく使う

スポーツやイベントに関連する写真や動画を使用して、イベントの雰囲気を強く表現するといいでしょう。自分の興味のあるスポーツをかっこいい画像や映像で見れれば、ユーザーの心も惹きつけられます。

世界的に有名なIRONMANの Web サイトでは、ファーストビューで競技者だけでなく、イベント会場付近をドローン撮影した映像も交えて表示しています。

重要な情報を見えやすい位置に表示

スポーツイベントはだいたい開催される半年くらい前には告知やエントリーが開始されます。日付や場所、登録ボタンなどの重要な情報は、他よりも目立つように配置しましょう。

Swimrun Australiaの Web サイトは開催日までのカウントダウンが表示されています。参加者は徐々に大会が近づく感じがしてドキドキしちゃいますね!

イメージしやすいコース・開催地の紹介

トライアスロンやランなど、屋外を移動するスポーツの場合、競技中に迷子になっては大変です。事前に丁寧な案内があると安心です。屋内のイベントであっても、その開催場所に迷えずたどり着けるよう案内があるといいですね!

最近はランやトライアスロンなどのコースを動画で紹介している Web サイトも増えています。LAKE BIWA TRIATHLONの Web サイトでは、画像にアニメーションを加えて道順を丁寧に紹介しています。

鮮やかな配色

各スポーツをイメージするような配色、例えば山の中を走るトレイルランでは緑、海を泳ぐトライアスロンやオープンウォータースイムでは青などがよく使われています。同じ色でも比較的彩度の高い、鮮やかな色が使われている印象です。

ホノルルマラソンの Web サイトではホノルルの陽気な雰囲気をカラフルな色彩で表現しています。

魅力的なスポーツイベントの Web サイト実例

Townsville Multisport World Championships

湯来 SPA&ADVENTURE TRAIL

福岡トライアスロン

伊賀いち

Mt.富士トライアスロン富士河口湖

大紀町シーサイドトレイル

平尾富士トレイルランニングレース

New York City Triathlon

とねぬま自転車ひとっ旅

志賀高原マウンテントレイル

余談ですが

冒頭でも書いたように、今年からトライアスロンに挑戦しております!2023 年は 2 大会に出場して、年代別女子で 3 位や 5 位に!やったね!まぁ女子人口が少なすぎるので、地方の大会では入賞しやすいのですが w

トライアスロンをはじめ、ランやロードバイクなどのスポーツに興味のある方、すでに個人的に楽しんでいるけど、目標なくやってるだけだな〜って方は、ぜひ大会にも出てみましょう!私がよくチェックしている国内のイベント一覧ページはこちら:

どこかしらの大会やイベントで私を見かけることがあれば、お気軽にお声がけください〜

そして、いろんな Web サイトを見てみましたが、なんだかスポーツ関連の Web サイトって古くて見づらいものも多いんですよね。案件を募集している Web デザイナーさんはスポーツ界隈でアプローチしてみてもいいと思います!