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

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

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

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

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

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

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

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

JFA

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

ABEMA

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

Google

Googleでワールドカップと検索したところ、いつもとは違った検索結果が現れました。  

LINE

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

Twitter

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

BizReach(ビズリーチ)

こちらは、アプリではありませんが、調べている際に表示された広告バナーです。 サッカーについて調べている方をターゲットにしたこの時期だからこその広告だと思いました。

まとめ

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