UIキットを使ってスポーツファンを魅了するアプリをデザインしよう！ | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

モントリオールはスポーツの街として有名です。カナダの都市の中でもホッケーとのつながりが特に深いのは、1875年に初めてインドアのホッケーがモントリオールで開催されたためかもしれません。

世界的なクリエイティブエージェンシーSid Leeは、モントリオールに大きなオフィスを構えています。新しいUIキットの主題を探していた彼らにとって、ホッケーは当然の選択でした。実のところ、彼らが作成したのは架空のホッケーリーグのUIキットではありますが、野球、サッカー、バスケットボールなど、どんなスポーツにも適用できるものです。

彼らが空想上のスポーツリーグをUIキットのテーマに選んだ決め手は、スポーツアプリに求められるデザインとUIが持つ可能性だったと、アーティスティックディレクターのトミー・ヴィンセント・マシューは語ります。

「Sid Leeのチームは、自分たちに最適な主題を見つけようと知恵を出し合っていました。私たちは何か自分たちを触発してくれるものを求めていましたが、現在進行中の作業の改善や解決に役立てることができそうだということにすぐに気がつきました。架空のスポーツアプリで使われるデータ可視化やその他のコンポーネントは、その目的に最適な選択に見えました」

Sid League UIキットを使ってスポーツアプリをデザインする手順

このUIキットは、スポーツアプリのプロトタイプに興味のあるデザイナーを触発するためにつくられました。特に空想上のスポーツリーグ、すなわちファンタジースポーツに挑戦したい人には最適です。

Adobe XDでSid League UIキットを使い、スポーツアプリのプロトタイプを作成するデザイナー

  1. Adobe XDをダウンロードします
  2. Sid League UIキットをダウンロードします
  3. XDファイルの一番左側にあるアートボードにはタイポグラフィがまとめられています。これを確認したら、アセットパネル内の文字スタイルを編集してみましょう。同じ大きさと色の組み合わせ（明色と暗色）を使うと、コンポーネント内のテキスト変更が容易になります。まずは大きなタイトルから変更を始めて、感覚を確かめてみましょう
  4. 左から2番目のアートボード内にある色を確認します。最初の2つのカラムは4つのチームそれぞれの2色、最後のカラムは背景用として使われています（注：明るいオレンジはCTA用にも使われています）。このルールを変更せずに色を変えるようにしましょう
  5. フォトグラフィのアートボードを確認しておいてください。後で必要になったときに使いましょう

Adobe XDでSid League UIキットを使ってUIをプロトタイプしているデザイナー

  1. UI要素のアートボードにはマスターコンポーネントが含まれています。全体のトーンにフィットする範囲で修正してみましょう。Logoのセクションのマスターコンポーネントを独自のロゴと置き換えると、すべてのインスタンスを更新できます
  2. ここまでの手順で、マスターコンポーネントを好みのブランドにすることができたでしょうか。大きさ、パディング、レスポンシブの振る舞いなども設定しましょう。インスタンスによるバリエーション作成は、マスターコンポーネントへの作業の後に行いましょう
  3. 以上を何回か繰り返して試してみてください。新しいチームやデバイスのためにコンポーネントを追加してもよいかもしれません

ファンタジースポーツがテーマに選ばれた理由

ファンタジースポーツリーグに参加した経験のない人は、なぜそれがUIキットのテーマに選ばれたのか疑問に思うかもしれません。Sid Leeにとっては明らかだったその答えは、既に存在していてさらにポテンシャルのあるものを改善するというものです。

トミーは次のように語りました。「私たちはこの機会を既存の何かの問題点をレビューするために使おうと決めました。ファンタジースポーツをテーマに選んだのは、チームのメンバーが揃ってその手のアプリを好んで使っていたからです。結果として、デザインや機能を見直すことによって、市場に出ているファンタジースポーツアプリの改善を達成できたと考えています」

ファンタジースポーツアプリの異なる画面のプリントアウトを確認するSid Leeのデザイナー達

ファンタジースポーツへの参加者は年々増え、増加の一途をたどっています。ニールソンのデータによれば、ファンタジースポーツの競技者はアメリカ国内だけで、2012年の830万人から1600万人へ増加しました。アメリカの人口の6.2％です。

レトロなスタイルでデータの可視化をデザイン

スポーツ好きなら誰でもお気に入りの選手の成績が何より気になるでしょう。その点に関してはファンタジースポーツも例外ではありません。

Sid Leeはこの点にとにかく注力し、スポーツファンが、お気に入りの選手に関する山のようなデータをシームレスに見て回れるようなUIキットに仕上げています。トミーはこれこそがUIキットの最高の達成だったと主張します。「私たちは、分かりやすく興味深いデータ可視化のシステムを構築できたと思います。新しいXDのデザインシステムの機能を最大限に利用して、実際のプロジェクトに効果的に適用できるものを考え出しました」

スポーツアプリのいくつかのワイヤーフレームをホワイトボードに描くSid Leeのデザイナー

もっとも、データを扱うユーザー体験は、間違いなく古めかしい感じのUIによりサポートされています。ユーザーが向き合うことになる画面の多くに、1940年代からやってきたかのような印象を受けるでしょう。これは、Sid Leeのモントリオールのチームが最高のホッケーチームのロゴは1940年代のものだったと固く信じているからです。

「私たちはスポーツの古めかしい感じが大好きです。それがデザインに関しては主要なインスピレーションになりました。上品で丁寧な感じを持ちつつ尖った面もあるデザインの実現に貢献していると思います。特に我々のデジタル時代において、古いデザインを蘇らせることにはワクワクします。今どきのスポーツのデザインは成績や結果が中心ですが、私たちのプロジェクトでは、感情やスポーツの文化としての側面に注目しました」とトミーは話しています。

Sid Leeのチームが目指したゴールのひとつは、Adobe XDの可能性を追求するUIキットの作成でした。その結果、チームはXDをとても気に入って、クライアントの仕事でもどんどん使うようになったそうです。彼らがスポーツファンに敬意を表してつくったUIキットを使って、自分自身のスポーツプロジェクトのプロトタイプをつくってみてください。

この記事はHow to Design a Fantasy Sports App That Will Get Fans Cheering（著者:Marc Schenker）の抄訳です