スポーツがWeb上でもアツイ!イケてるデザインのサイトまとめ☆

スポーツがWeb上でもアツイ!イケてるデザインのサイトまとめ☆

ヴィクトリア

ヴィクトリア

こんにちは、ヴィックトリアです!

最近スポーツといえば、アジア大会の話題で日々賑わっていますね!

中学三年間吹奏楽部、高校ではバンド活動をしており、スポーツとは無縁の人生でした。

そんな私も社会人になり、誰とでもフラットな会話ができるのはスポーツの話題なんじゃないかと気づいたのです。

性別・年代関係なく、平和に楽しめる話題じゃないかと!

そこで、スポーツについて勉強しようと思い、いろいろと調べていたところ、デザイン性が豊かで素敵なサイトをいっぱいみつけたので、私のお気に入りを紹介させてください♡

サッカー

ユニフォームのサイト


World Cup in Pattern
各国のサッカーユニフォームを紹介しているサイトです。

動きが楽しすぎてずっと見ていられます。いろんな色が使われていてすごく鮮やかなのに、統一感があってまとまっています。シャドーの付け方やパターンがさりげにおしゃれで好きです。

クラブチームのサイト


PSG.fr: Site officiel du club
パリ・サンジェルマンFCの公式サイトです。見やすくまとまっていますね。

情報が多すぎず、色のアクセントでメリハリがあってとても素敵です。クラブの最新情報のほかにも、ショッピングやライブストリーミングサービスが提供されているので、ファンがクラブ製品の購入やコンテンツの視聴ができようになっています。

こちらのサイトを制作した会社のページに詳細が載っていたので合わせてご覧ください!

Index
こちらのページもだいぶ素敵です。シンプルなデザインに動きで遊びがあるの好きです。

野球


AlpenGroupBaseball | アルペングループベースボール
アルペングループのサイトです。

写真がダイナミックに使用されていてイマドキっぽいです。使用されているアイキャッチのサムネイル画像も、情報が多いなりにシンプルに仕上がっているため、ゴテゴテせずページの印象を壊さないで素敵です。勉強になります!

そもそもアルペングループのサイトもイケてるのでこちらも合わせてご覧ください!
アルペングループ | AlpenGroup

バスケットボール


香西宏昭オフィシャルサイト | Hiroaki Kozai Officialsite
バスケットボール選手・香西宏昭さんのページです。

丸い図形のアニメーションがボールの動きをリアルに再現していてバウンドするイージングにこだわりを感じます。ページ遷移のアイコンやコンテンツのアニメーションも動きがあって楽しいです。

バレーボール


バレーボールステーションVIVA
「Vリーグオフィシャルグッズ」の公式オンラインショップです。

白が基調のフラットなデザインで、爽やかかつインパクトのある文字で強さを出していて素敵です! 選手の顔ぶれが見られるのもテンション上がりますね! あとキャラクターが可愛くてずるいです!

その他


U SPORTS
カナダの大学スポーツの統治機関……らしいです。詳しくはWikipediaを御覧ください。

紙面っぽいデザインに奥行き感のある動きがあって素敵です。

余白を大きめにとったり、線と文字の差がはっきりしていてとても見やすいです! ページ自体が白く色数が少ないため、大学のロゴや写真、差し色が映えていて気持ちがいいです。

でもパキッとしたカラーを使用していてインパクトがあります。フォントにもこだわりを感じるのでとても好きです。

番外編

ラグビーの基礎知識 | ホンダラグビー部
Webデザインじゃないのですが、こちらのラグビーのルール説明動画がめちゃくちゃかわいかったので共有させてください!笑


Full Movie

ラグビーは来年W杯が日本で行われるため、今からルールをおさらいしておくと楽しめそうですね!!
ラグビーワールドカップ2019公式ホームページ

まとめ

いかがでしたか?

ひとえに「スポーツのサイト」といえど、ページの役割によって魅せ方がガラッと変わりますね。

目的・役割を明確にした上で情報設計を考え、それに適したデザインを考えていくのがクリエーターの面白みだなあとつくづく思いました。

日々精進します!

以上、ヴィクトリアでした〜。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーのヴィクトリアです。 スーパーモデルとハリウッド映画が大好きです。 体力には自信があります! よろしくお願いいたします!

このメンバーの記事をもっと読む
デザインのトレンド | 46 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL