#Webデザイン
オリンピックの後もまだまだアツい!ハイセンスなスポーツ関連サイト10選

こんにちは。新人クリエイターのMです。

今年もパリオリンピック盛り上がりましたね!

私は普段スポーツ観戦をする方ではないのですが、ここまで連日ニュースやSNSで試合が盛り上がっていると、つい興味がなくてもテレビを見てしまいます。

こんな選手がいたんだ! とか、このチーム出身なんだ! とか思いつつネットで検索してみると、中にはなかなか凝ったハイセンスなWebサイトを持っている団体も実は多いんです!

今回の記事では、そんな「ハイセンスなスポーツ関連サイト」を10個選んで紹介してみたいと思います。

 

 

パシフィックリーグマーケティング株式会社(PLM)

https://www.pacificleague.jp/

「パ・リーグ.com」や「パ・リーグTV」を運営するパ・リーグ6球団の共同出資会社「パシフィックリーグマーケティング(PLM)」の公式コーポレートサイトです。

フォントサイズが全体的に大きく、レイアウトもMVの動画にほぼかかっているほど大胆ですが、流れている歓喜の瞬間の映像が負けないほど力強く、パ・リーグカラーのブルーも相まって爽快さを感じさせます。

個人的に好きなのが、従業員名鑑ページで、従業員の方々の野球選手ばりのレーダーチャートが載っています! 細部まで遊び心と野球愛が詰まったおススメのサイトです。

野球は、女性ファンも多いからか選手にフィーチャーしたバラエティ豊かなサイトも多い気がしました。下記の3サイトもとっても賑やかで楽しいサイトなのでおススメです。

バファローズってなんなん?

ピンクフルデー 2024特設サイト|福岡ソフトバンクホークス

doda PRESENTS: パ・リーグ球団 仕事図鑑2024

 

 

尼崎ボクシングジム|尼崎・立花・武庫之荘

https://amagasakiboxing.com/

尼崎市で40年間運営しているボクシングジム「尼崎ボクシングジム」の公式サイトです。

黒を基調とし、MVもモノクロ写真でボクシングのクールな印象を保ちつつ、太字の英フォントで力強さも印象付けています。

全体にノイズテクスチャが入っているのも渋いですし、ホバーや見出しなどの動きも比較的早くキレがあってジャブのようで、思わずかっこいい! と唸ってしまいます。

ページ数自体のボリュームはそんなにないのですが、MV右下のボタンから飛べるジムのYouTubeコンテンツも充実しており、サイトの雰囲気も相まって重厚感を感じます。

 

 

Asphalt Roots|バスケットボールスキルスクール

 

 

https://asphaltroots.com/index.php

ストリートボーラー達がスキルやマインドを伝える、バスケスクール「AsphaltRoots」の公式サイトです。

画面が2分割されたスプリットレイアウトで、子どもたちの生き生きとした表情の写真側(左)と、スクール概要のメインコンテンツ側(右)が分かれていてインパクトがあります。

スプリットにすることでメインコピーの訴求力が強く感じられますし、モバイル展開も比較的しやすいと言われているので、スマホファーストが多い最近のWebサイトではよく見られるレイアウトです。

右のコンテンツ側は文字も色味もかなりパキッとしているのですが、MVの余白感と、左側の写真のやわらかい光の加減が全体に優しい印象を与えていて惹きつけられます。

 

 

トラックセッション

https://tracksession.jp/

陸上競技を中心としたスポーツイベント企画などを展開する運営会社「トラックセッション」の公式コーポレートサイトです

MVではメインコピーに爽やかな水色の背景が中抜きしてありランナーたちの走る動画は後ろに見えているだけですが、スクロールするに従い、幕が上がるように、視界が放たれ、疾走感を与えます。

とにかく細部までのこだわりが素晴らしく、トラックのようなあしらいが可愛いのはもちろん、斜めの線をメインにしたレイアウトが複雑なのに絶妙なバランスで不思議と読みやすいです!

 

 

アルバモス大阪 オフィシャルサイト

 

https://www.alvamososaka.com

男子プロハンドボールクラブチームの「アルバモス大阪」の公式サイトです。

とにかくMVの選手たちの写真の重なりが雑誌の表紙のようなダイナミックさでかっこいいですね! 動きも全体的にかなりポップで、最下部まで行くと画面の右端から公式マスコットキャラクターのバモろんがひょっこり現れます。ぜひクリックしてあげてくださいね。

あしらいとしてところどころ使われている黄色い丸は朝日をイメージしていて、「誰かにとっての朝日となれるチームでありたい。」というアルバモスの目指すチーム像を表しています。

 

小山弓具

https://koyama-kyugu.co.jp/

創業1780年(安永九年)の伝統ある弓具店「小山弓具」の公式サイトです。

すっと弓で矢を射ったようなローディングから、少し横長な見出しのフォント、矢の形をしたホバーボタンの動き、どれをとってもリッチで伝統と信頼感を感じさせます。

写真もフォントと同じく基本的に横長のフルスクリーン配置で、弓矢の先までしっかり見せれるようにデザインされていますね。写真も光の当たったやわらかな写真が多く、弓道をよく知らない人にも一目で素敵だなと感じさせるサイトになっていると感じました!

 

 

ZEROフットサルパーク堺東

https://zero-fut-sakai.com

大阪府堺東のVeoカメラを導入したフットサルコート「ZAROフットサルパーク堺東」の公式サイトです。

フットサルコートのラインを意識しているであろう、サイト全体の線のデザインがスタイリッシュで、とても見やすいのにオシャレな印象です!

利用料金や施設案内など必要情報がかなり多いと思うのですが、写真のバランスもちょうどよく、文字ばっかりという印象になっていないので参考にしたいなと感じました。

 

 

DeNAアスレティックスエリート [DeNA Athletics Elite]

 

https://athletics.dena.com/

DeNA陸上競技のトップ選手が所属する「DeNAアスレティックスエリート」公式サイトです。

白を基調としたシンプルなサイトながら、文字の置き方や写真の見せ方がかっこよく、スタイリッシュさを印象付けています。

必要情報がきゅっとまとめられていて、サイドメニューのおかげで迷わずに情報を得ることが出来ます。簡潔で無駄がなく、チームカラーを感じとることのできるサイトになっていると思います。

 

 

北牧雅文 / Masafumi Kitamaki

 

https://kitamaki.com/

競技ダンスに革新をもたらした「ダンススポーツテクニック」の第一人者、北牧雅文さんの公式サイトです。

あえてぶれている写真を使いダンスの躍動感を見せ、マウスを動かすと青白い光がサイトに入り込み、陰影が生まれ立体感がでるような世界感たっぷりの美しいサイトです!

使われている写真はすべてモノクロか彩度の低いもので、フォントも華奢なものを使っています。全体としてボタンやホバーアニメーションの動きもゆったりしていて、一層世界観に惹きこまれてしまいます。

 

FESSIダンススクール | 渋谷区幡ヶ谷の社交ダンススクール

https://fessi-dance.com/

幡ヶ谷の社交ダンス教室、「FESSI」の公式サイトです。

今回紹介する中では、他のサイトと違って唯一MVが写真ではなく、イラストのサイトになっています。コミニケイティブダンスコースとスペシャリティダンスコースで2分割されたMVですが、ホバーするとなんとイラストが優雅に踊りだします! これは素敵!

基本的にシンプルでゆったりとした余白感が、清潔感と安心感を感じさせるサイトになっていると思います。対象クラスごとに、MVのアニメーションと同じく実際の生徒たちが踊っている動画が埋め込まれていて、実際に教室を検討している人も通うイメージが付きやすくなって親切だなと感じました。

 

 

まとめ

 

いかがでしたでしょうか?

スポーツ関連のサイトはとにかく写真が素晴らしいものが多く、スポーツの疾走感や躍動感などダイナミックな印象を与えるサイトになっているケースが多いです。

今回取り上げた以外にも、あなたの推し選手、推しチームのお気に入りサイトがあればぜひ教えてくださいね♪

最後までご覧いただきありがとうございました!

 

CONTACT

この度は当社へご興味お持ちいただき
ありがとうございます。
Webに関するお悩みございましたら、
是非一度お気軽にご相談ください。
平日10:00~19:00