MENU
CLOSE
DESIGNWEB Edit : 2022.12.06 Update : 2023.01.23

FIFAワールドカップ2022で見つけたアプリ・サイトのUIデザイン

FIFA ワールドカップ カタール 2022が盛り上がりを見せています。 スマートフォンでアプリを開いていると、ワールドカップを盛り上げるための工夫が見受けられ面白かったので、今回はデザインの視点から、FIFAワールドカップを見た時にみつけたUIデザインについてご紹介します。

FIFAワールドカップとUIデザイン

ご存知の方も多いと思いますが、FIFAワールドカップは4年に一度開催されるサッカーの世界選手権です。今回の開催国である、カタールは初めてワールドカップを開催し、また、中東での初めての開催となり、北半球でも秋と冬の時期に初めて開催される大会となりました。 世界中の多くの人が注目している大会なので、日本でも様々な取り組みが行われています。 まず初めに、UIとはUser Interface(ユーザーインターフェイス)の略で、情報をやりとりするための機械と利用者が接する部分を指します。UIテクニックなどについて詳しく解説した記事がありますのでよろしければご覧ください。


いかに分かりやすく情報を伝えられるか

サッカーの試合結果や日程など、様々な情報を発信する必要がある場合、ユーザーにいかに分かりやすく情報を伝えるかが重要となります。 FIFA公式サイトでは、パープルをメインカラーとしたデザインになっていました。 また、サイトを開いた際に試合の結果が一見分からないようになっており、録画で見る方や、見逃し配信などを見る方への配慮がされているようです。 分かりやすさだけでなく、情報の見せ方を精査する視点も必要なのだと感じます。 FIFA公式サイト

情報量の多いUIデザインでは、見せ方を工夫する

今回ABEMAのデザインに取り組んだCyberAgentによると、かなりUIを意識してデザインしたそうです。 試合のデータは情報量が多いことから、スマートフォンのアプリ画面にどう見やすく落とし込むかがポイントだったようです。 中でも、「なるほど!」と思ったのは、同系色で見にくい状態だったバーグラフの境目に、余白を持たせることで、境界を強調し、解決した工夫でした。この変更で断然見やすくなっていますが、デザインに追われる中では、意外と気づかない点ではと思いました。 出展:https://developers.cyberagent.co.jp/blog/archives/38640/

FIFAワールドカップ UIデザイン事例

JFA

FIFAワールドカップ UIデザイン事例 - JFA サムライブルーということで、ネイビーを基調としたデザイン。日本代表のコンテンツだと一目でわかります。 また、日本の試合までのカウントダウンがFVで表示されています。  

ABEMA

本大会の放映権を取得しているABEMAは流石の力の入れようで、アプリのアイコンではキャラクターがサッカーボールを持っていました。 FIFAワールドカップ UIデザイン事例 - ABEMA メニューにワールドカップのジャンルが表示されており、右下に日程・結果、順位などのリンクボタンが配置されていました。 FIFAワールドカップ UIデザイン事例 - ABEMA  

Google

Googleでワールドカップと検索したところ、いつもとは違った検索結果が現れました。 FIFAワールドカップ UIデザイン事例 - Google
  • 組み合わせや順位などのリンクボタンが横スクロールになっており、日程・結果、順位、などの情報が縦に配置されている。
  • 右下にサッカーボールのアイコンが配置され、アニメーションでボールが転がっているように表現。アイコンをタップするとMini Cupという世界中のサッカーファンが参加できるサッカーゲームのポップアップが出現→ゲーム以外にもデータやニュースなどの情報も確認できる
 

LINE

FIFAワールドカップ UIデザイン事例 - LINE LINEでは、ニュースのカテゴリーにサムライブルーを思わせるネイビーのバナーを配置し、右上の+をタップすると、LINEスマート通知からLINEがきて通知設定が可能になる工夫がされていました。

Twitter

FIFAワールドカップ UIデザイン事例 - Twitter Twitterでは、メニューにWorld Cupを配置、ツイートがすぐに確認できるようになっていました。 また、メニューのスポーツを確認すると、試合結果やトレンドなどの情報が確認できます。

BizReach(ビズリーチ)

FIFAワールドカップ Ad広告デザイン事例 - BizReach(ビズリーチ) こちらは、アプリではありませんが、調べている際に表示された広告バナーです。 サッカーについて調べている方をターゲットにしたこの時期だからこその広告だと思いました。

まとめ

今回はFIFA ワールドカップ カタール 2022というビッグイベントの陰で、イベントへ合わせてUI/UXを考えながら準備を進めてきたデザイナーさん達の想いが花開いた瞬間を紹介させていただきました。 KOHIMOTOでは、今回アプリ等のUIデザインのご相談等も承っております。どうぞお気軽にご相談くださいませ。

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。