クラブらしさと使いやすさを両立させたオフィシャルサイトのデザイン・UI/UX提案

Client
横浜マリノス株式会社
Date
2019.10〜2020.3
Tags
#ブランド強化・リブランディング

Overview

名門サッカークラブ「横浜F・マリノス 」のオフィシャルサイトリニューアルにあたり、フロントデザインとUI/UXの提案を行いました。様々な情報が存在し、サイトを見に来る目的も多岐にわたっているオフィシャルサイトについて、分析と整理・提案を繰り返し行いながら、名門クラブとしてのF・マリノスらしさの発信と、新規/既存双方のサポーターにとって適切な情報を届けられるサイトづくりを共創しました。

調査分析・ビジネス構想

様々なサポーターに使いやすいサイトを目指して

既存の熱烈なファンからはじめてスタジアム観戦に訪れる新規客まで、様々なサポーターが訪れるオフィシャルサイト。そこに求められる要素を分析するため、ヒアリングやSNSのリサーチをはじめ、海外クラブを含む、多数のクラブチームサイトの分析を行いました。その結果として、試合開始前~試合中~終了後のそれぞれのタイミングで分かりやすい試合情報の発信や、選手の魅力をより際立たせる構成の提案に繋がっていきました。

コミュニケーション設計

F・マリノスの未来を見据えたコンセプト提案

地域からさらに愛されていく存在を目指したいというクラブの姿勢を踏まえ、毎日のくらしの中にF・マリノスがある楽しさを発信していく「Life with F.マリノス」のサイトコンセプトを提案。スタジアム観戦やグッズ、選手のSNSなど、試合以外からもF・マリノスに興味を持ってもらえるようなコミュニケーションを設計していきました。また、様々なコンテンツが存在するサイトの情報整理をクラブのカラーに基づいて行っていく「トリコロールストラクチャー」というデザインコンセプトを提案。情報ごとに色を割り当てることで、サイトの閲覧者に対する分かりやすさはもちろん、その後のサイト運用もよりシンプルに行っていけるというアイデアをベースに、サイトの構築を行っていきました。

実装

伝統的なトンマナを継承したサイトデザイン

伝統的なクラブの風格をサイトにも落とし込むべく、クラブのシンボリックなトリコロールカラーを活かしたサイトデザインとしました。従来のカラーリングから視認性や伝統的な要素を考慮し、少しダークな色合いを採用することでF・マリノスらしいサイトデザインを実現しています。構築と運用は共同でプロジェクトに取り組んでいたハムステッド社が担い、FRACTAで構想したデザインを忠実に実装していただきました。

実装

情報へのアクセス性を高めるメニュー表示

多岐にわたる情報の見づらさを解消するため、トップメニューは「観戦する」「クラブを知る」という動詞的な分け方を採用しました。ユーザーが直感的に「この情報を見たいときはこのメニューの中にあるかな?」と選べるようにしています。

アクティベーション

社内外で活用できるシンプルなデザインレギュレーション設計

既存サイトではデザインの外部委託の際に、納品物のトンマナが統一されていないという課題もあったため、デザインレギュレーションはできるだけシンプルにして、スタイルガイドを作成することでクラブ側での更新性を担保しました。

※サイトデザインイメージはすべて2021年8月2日時点のものです。

credit

構築・運用:株式会社 ハムステッド
https://www.hampstead.jp/