更新日
スポーツイベントの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 デザイナーさんはスポーツ界隈でアプローチしてみてもいいと思います!