目次
BRIK GALLERYについて
デザインやコンテンツの参考になる国内最大規模のWebサイトリンク集・デザインギャラリーの BRIK GALLERY では、日々クリエイターの方々の参考になる作品を更新しています。
クリエイティビティを刺激し、デザインの参考になり、仕事に役に立つ、Webサイトなどを中心に紹介しています。BRIK GALLERYでは、カテゴリーやタグから検索し、気になった作品はお気に入り機能で保存可能な機能があります。
作品は、INDUSTRY (業種)、TYPE (Webサイトなどの種類)、COLOR (キーカラー)、DESIGN (デザイン表現の方法) などのカテゴリーで分類されています。ここから目的としているデザインを絞り込んで探すことが可能です。
本特集では、BRIK GALLERYに掲載されている作品の中から、特定のテーマで作品をピックアップしていきます。
スポーツ系Webサイトに求められることとは？🤔
スポーツ系のWebデザインは「爽やか」「ダイナミック」「スタイリッシュ」といったテイストのものだけでなく、様々な角度からスポーツの魅力を伝えるサイトが多く存在します。また、スポーツ系のWebサイトは情報量が多い傾向にもあり、そこをどうクリアするのかがWebデザイナーの腕の見せ所とも言えるでしょう。そこで本記事では、イラストを使ったWebサイトを作る際にデザインやコンテンツなどの面で参考になる、優れたウェブサイト11選を紹介します。ぜひ参考にしてみてください。
ご紹介する作品は、以下の3つの基準を元に選出しました。
- ✅チームやブランドの世界観が表現できているデザイン
- ✅大量の情報が整理され、操作しやすくなっているデザイン
- ✅ターゲットの属性に合わせたデザイン
参考になるスポーツ系Webサイトのご紹介🎨
Venezia FC
イタリアのヴェネチアを拠点に活動するサッカークラブVenezia FC。トップページでは、選手のプレイ中の写真やヴェネチアの街の美しい写真が配置されており、Venezia FCというチームの雰囲気をすぐに掴むことができます。画面の横幅を2分割や4分割する大胆なレイアウト、オレンジ×グリーンの色の独特な組み合わせや数種類のフォント使いなど細かいこだわりが感じられ、全体として新鮮でお洒落な印象を見るものに与えるでしょう。
WOMEN IN SOCCER
女子サッカー業界で活躍する女性たちを支援するアメリカのコミュニティ。ネオ・ブルータリズムを思わせるややレトロなデザイントーンと、トレンドカラーの蛍光色のグリーンを使うことで、先進的な組織であることがアピールできています。また、選手らの写真を用いたコラージュは、カジュアルな雰囲気を演出しています。サッカーボールを連想させる丸のモチーフがたくさん散りばめられている点も注目です。
卒業RECORD’23
コロナ禍で様々な制約を受けた高校3年生たちに、卒業前の思い出をつくってもらおうという思いで企画されたスポーツバラエティ番組のWebサイト。Z世代のターゲットを意識したトップページのイラストやモーションからは、若さや疾走感が感じられます。また曲線の多さによって、勝負にフォーカスした大会ではなく、参加者や主催者たちの様々な想いが込められたイベントであったことが伝わってきます。
FESSI
幡ヶ谷にある社交ダンス教室FESSI。トップページの滑らかな動きで社交ダンスを踊る男女のアニメーションPNGによって、社交ダンスが何たるかという事を視覚的に理解することができます。クラスのレベルについて紹介するページでは、各レベルを説明するためのショートムービーが配置されており、容易に自分のレベルを判断することができます。
Acte
フィットネス、ヨガ、瞑想などのオンラインクラスを提供するフランスのサブスクリプションサービスActe。インストラクターの身体やトレーニングの様子を映し取ったムービーは、本能的で大胆でクールな印象を受けます。イラストなどの装飾は削ぎ落とされ、前述した独自性のある動画を主軸にしたストイックなデザインにすることで、身体と真摯に向き合うブランドの姿勢が感覚的に伝わってきます。
Dr.TRAINING
パーソナルジムのDr.トレーニング。アクティブな印象を受ける赤というカラーを使用し、先進的なマウスオーバーのアクションや、余白を活かし細めの枠線や小さめの文字を採用したことによって、「アクティブさ」と「繊細さ」という２つのイメージを両立して表現することに成功しています。世に多く存在するスポーツジムの中でも先進的手法を取り入れている点のアピールに成功し、独自性を目指しています。
GIANTS
読売ジャイアンツの公式サイト。ジャイアンツを象徴する黒とオレンジのカラーがサイト全体に用いられており、引き締まった印象を与えます。また、背景の白に余白を活かしたデザインを採用することで情報が整頓され、見やすいだけでなく垢抜けた印象も演出できています。試合・チケット、選手、グッズ、ファンクラブなど多くのコンテンツがあるウェブサイトですが、情報整理もうまく実現しています。
RUGBY WORLD CUP FRANCE 2023
2023年のラグビーワールドカップ公式サイト。全試合結果やゲームのショートビデオ、試合予想などが公開されており、情報量たっぷりのサイトです。しかし、色のコントラストがはっきりしていたり、文字の大きさのちょうど良いバランス、角丸の採用によって、非常に操作しやすい構成となっています。英語、フランス語、スペイン語、日本語の多言語に対応しており、いずれの言語でも違和感なく美しく見えるデザインを実現しています。
HEROs
アスリートに対して、競技以外の場所で社会貢献ができる機会を生み出し提供している団体。赤を基調とし老若男女のアスリートの方々が集合したトップページの写真は、皆が自身に溢れた表情をし颯爽としていて引き込まれるものがあります。ページ中部では、色鮮やかな青〜緑 赤〜橙のモーション付きのグラデーションが背景に採用されており、アクティブなイメージを作り出しています。また文字サイズなどにも気を配られており、ユニバーサルデザインを意識している様に伺えます。
Paris Saint-Germain JAPAN TOUR 2023
Paris Saint-Germain JAPAN TOUR 2023
日本にて、世界各国のスター選手を擁するパリ・サンジェルマが来日し国内外のサッカーチームと試合をしたイベントのWebサイト。サイト全体のカラーは、パリ・サンジェルマが拠点とするフランスの国旗のカラーである、赤・青・白を基調としています。また各チームのユニフォームカラーで構成された絵の具の筆跡は、ダイナミックでかつ洗練されたイメージを与えます。カラーのバランスやアイデアが秀逸なデザインと言えるでしょう。
Fencing Visualized DATA ARCHIVE
Fencing Visualized DATA ARCHIVE
技術と表現の新しい可能性を探求するクリエイティブチームのライゾマティクスが手がける、スポーツ観戦をテクノロジーの力でアップデートするプロジェクト「Fencing Visualized Project 」のWebサイト。実際のフェンシングの試合での選手たちの動きをARなどのテクノロジーを用いて、剣の軌跡の可視化が行われています。フェンシングというスポーツのダイナミックさを感じられ、競技の魅力を伝えることに成功したデザインです。
まとめ
スポーツの分野のWebサイトの制作時にデザインやコンテンツの面で参考になる、優れたWebサイト11選をピックアップし解説していきましたが、いかがでしたでしょうか。チームや教室、ブランドの魅力が様々なテイストで伝えられていたかと思います。また、情報が整理されているサイトはスポーツ以外のWebサイト制作時にもヒントになるはずです。本記事が、これからの制作の参考になれたら幸いです！
