スポーツ アプリ
スポーツ アプリは、熱心なファンに最新のスポーツ ニュースを伝える場合でも、アスリートがフィールドでのパフォーマンスを高める手助けをする場合でも、ユーザーに大きな影響を及ぼします。タイルやセマンティック ズーム、検索コントラクトや共有コントラクトのような Windows の機能は、特にスポーツ ファンにアピールするアプリを設計するときに役立ちます。 この記事では、このような機能を簡単に紹介し、あわせて、その機能を使ってすばらしいユーザー エクスペリエンスを実現しているスポーツ アプリの実例を多数、紹介します。新しいスポーツ アプリのアイデアは、スクロールすると、すぐそこに転がっています。
.png "Bing Sports アプリのメイン ページ")
スポーツ アプリの種類
一般的なスポーツ アプリの種類をいくつか次に示します。
.png "ESPN アプリのメイン ページ") |
ニュース、情報、動画 この種のアプリは、記事、動画、スライドショーで最新のスポーツ ニュースを配信します。コンテンツは定期的に更新され、多くの場合、アプリの最初のページに表示されます。たとえば、ESPN アプリを開くと、最新のスポーツ コンテンツに直ちに触れることができます。Windows ストアで入手できるニュース中心のスポーツ アプリには、ESPN、Sports Illustrated、NASCAR、Yahoo! Sports、THE Football App などがあります。 |
.png "Chicago Blackhawks アプリのメイン ページ") |
ファンのお気に入り この種のアプリは、特定のスポーツ チームのファンをわくわくさせることが目的です。特定のチームに関するニュースや写真、動画を提供します。Chicago Blackhawks アプリはその良い例です。ここに示したアプリのランディング ページを見たファンは、Blackhawks の歴史において誇らしい瞬間であるスタンレー カップの優勝場面に引き戻されます。 Seattle Sounders FC と AC Milan も、ファンお気に入りの Windows ストア アプリの例です。 |
.png "NFL Final Fantasy アプリでチーム成績を比較したグラフ") |
ツールとユーティリティ この種のスポーツ アプリは、チーム統計の比較、特定の技の説明、ファンタジー リーグへの参加など、特定の機能を実行します。これらのアプリは、多くの場合、直線的なナビゲーション パターンを採用して、特定のタスクをユーザーが実行するのを手助けしています。アイデアを得るには、Windows ストアにある Decision Maker アプリ、Winchester Ballistics、One Basketball、NFL Fantasy Football 2013 などをご覧ください。 |
タイルと通知を使ってユーザーの関心を引く
Windows 8.1 には、たとえアプリが実行中でない場合でも、ユーザーの関心を引く方法が多数、用意されています。たとえば、タイルを使うと、スタート画面にライブ情報をダイナミックに表示することができます。ライブ タイルでは、ユーザーのお気に入りチームのドラフト指名選手についてニュース速報を表示したり、得点状況を刻々と更新したりできます。アプリでは、ユーザーが有効にする通知機能を使って、スポーツ ファンがゲームを見逃すことがないようにすることもできます。
.png "スタート画面にすべての異なるサイズで表示されたスポーツ アプリ タイル")
アプリを明瞭に表したスタート画面用のタイルを作成します。このスクリーン ショットでは、タイルのサイズに小、普通、ワイド、大の 4 種類あることがわかります。 ユーザーには、うまくデザインされたタイルをスタート画面の目立つ場所に配置する傾向があり、そうなれば定期的に利用されます。タイルが魅力に乏しいアプリは、スタート画面に場所をもらうことができず、忘れられる可能性が高くなります。魅力的なタイルの持つ力を過小評価しないでください。
ライブ タイル: スポーツの世界はペースが速いものです。勝利を決めるプレー、シーズンが終わる大怪我、有望なドラフト指名が瞬く間に起きます。ライブ タイルを使うと、たとえアプリが実行中でない場合でも、お気に入りのチームに関係した最新の見出しをスポーツ アプリでファンに知らせることができます。ニュース速報、スコア更新、ゲーム予告をライブ タイルに表示することを検討してください。概要については「ライブ タイル」、詳しくは「Guidelines for tiles and badges」をご覧ください。
ライブ タイルは、Bing Sports アプリには不可欠な要素です。ここではスタート画面でアプリのライブ タイルが見出しと画像を共有しています。
.png "ライブ タイルで見出しとサッカー選手の写真を表示")
セカンダリ タイル: スポーツ ファンは常に、お気に入りの選手やチーム、リーグの動きを追いかける簡単な方法を探しています。セカンダリ タイルを使って、最も気にしているコンテンツに熱心なファンが即座にアクセスできるようにしてください。スポーツ アプリがセカンダリ タイルをサポートしている場合、ユーザーはアプリ内の特定のコンテンツに対するショートカットをスタート画面に直接ピン留めすることができます。詳しくは、「Guidelines for secondary tiles」をご覧ください。さらに詳しい要約は「セカンダリ タイルの概要」をご覧ください。
ESPN アプリでは、たとえば Toronto Blue Jays ファンがチームの統計ページをスタート画面にピン留めすることができます。このコンテンツはピン留めできるように設計されているため、ファンは下部のアプリ バーにあるピン アイコンをクリックすることができます (次のスクリーン ショットを参照)。
.png "ESPN アプリで野球チームのページの上下にアプリ バーが表示されているスクリーン ショット")
ピン アイコンをクリックすると、スタート画面にタイルをピン留めするか確認する画面が表示されます。
.png "アプリのページをスタート画面にピン留めするときに表示されるポップアップ")
"[スタート画面にピン留めする]" ボタンをクリックすると、新しいセカンダリ タイルがスタート画面に表示されます。新しいタイルを、他のスポーツ アプリのそばに移動します。これで、スタート画面に 2 つの ESPN タイルが表示されるようになりました。1 つは一般的なコンテンツ用で、もう 1 つの新しいセカンダリ タイルは、お気に入りチームのページを直接表示できます。
.png "スタート画面にすべての異なるサイズで表示されたスポーツ アプリ タイル")
セカンダリ タイルを使うと、この Blue Jays ファンは気になる統計にクリック 1 回でアクセスすることができます。ユーザーが直接アクセスすることを望むコンテンツがある場合は、コンテンツをピン留めできるようにしてください。
タイルのサイズ変更: ユーザーはタイルのサイズを変更できるため、アプリがサポートするすべてのタイル サイズでタイルがきちんと表示されるようにしてください。各タイル サイズ用にタイル画像をカスタマイズします。次のタイルは、小、普通、ワイドのタイル サイズごとにデザインが変更されています。
.png "SofaScore アプリの小、普通、ワイド サイズのタイル")
Windows ストア アプリはあらゆる種類のデバイス上で実行できるため、次の画面解像度で鮮明に表示されるように、拡大/縮小したタイル画像を用意します。
- 1.0 = 1024 x 768 ピクセル
- 1.4 = 1440 x 1080 ピクセル
- 1.8 = 1920 x 1440 ピクセル
タイル サイズについて詳しくは、「タイルとトーストの画像サイズ」をご覧ください。拡大/縮小について詳しくは、「Guidelines for scaling to pixel density」をご覧ください。
トースト通知: スポーツ イベントは 1 日中いつでも起こります。ライブ タイルは、スタート画面でスポーツ界の新しい動きをファンに伝えるというすばらしい仕事をしますが、もっと直接的なアラートが必要な場合は、スポーツ アプリでトースト通知を用意することができます。トースト通知でゲームの開始を通知する場合でも、お気に入りのチームがワールド シリーズに優勝したことを通知する場合でも、トースト通知をクリックすると、アプリが開いて詳細を知ることができます。
トースト通知について詳しくは、「Guidelines for toast notifications」をご覧ください。さらに詳しい説明は、「トースト通知の概要」をご覧ください。
.png "SportsCenter アプリからのトースト通知")
この画像は、SportsCenter アプリからのトースト通知を示しています。ご覧のように、トースト通知は画面の右上隅に表示されます。
セマンティック ズームを使ってコンテンツをクリエイティブに表示する
スポーツ アプリは、しばしば 1 ページに高品質のコンテンツを多数掲載します。アプリが多くの異なるメジャー スポーツに関する新しい記事を対象としている場合、ランディング ページがごちゃごちゃしてくることがあります。セマンティック ズームは、多数のコンテンツを含むページを整理するスマートな方法です。この機能を使うと、コンテンツが論理的なグループにまとめられてコンパクトに表示されるため、利用できるすべてのコンテンツをユーザーが把握しやすくなり、目的とする特定の種類のコンテンツにアクセスしやすくなります。
Sports Illustrated アプリはセマンティック ズームを使ってコンテンツを管理しやすくしています。このアプリは最初に開いたとき、右にパンすると、アプリのコンテンツをすべて確認できます。以下は既定の表示のスクリーン ショットです。
.png "Sports Illustrated アプリの既定のコンテンツ表示")
ただし、利用できるコンテンツをすべて確認するには、何度もパンする必要があります。何が利用できるのかという全体像を把握するには、セマンティック ズームを使います。タッチ ジェスチャを使うか、"Ctrl" キーを押しながらマウス ホイールをスクロールしてズームすると、コンテンツが異なるカテゴリに整理されて便利な見出しとサムネイルが表示されます。
.png "ユーザーがセマンティック ズームを使って縮小表示した後の Sports Illustrated アプリ")
これで、ユーザーは簡単にコンテンツにざっと目を通して、特におもしろそうなセクションに移動することができます。その他の例については「セマンティック ズーム」を、さらに詳しくは「Guidelines for semantic zoom」をご覧ください。
ハブを使ってファンを引き付ける
スポーツには、強烈なアクション、歓喜の瞬間、印象的な見せ場がたっぷりあります。ハブ コントロールは、"ヒーロー" アートをアプリの中央前面に配置します。ヒーロー アートは、ランディング ページでユーザーを歓迎し、アプリの記事にユーザーを引き込む大きな高解像度画像です。
この Chicago Blackhawks アプリは、ヒーロー画像でチームの最も誇らしい瞬間を表示しています。アプリを開いたときにユーザーが最初に目にするのがこの画像です。
.png "Chicago Blackhawks アプリを開いたときにユーザーが目にする大画像のスクリーン ショット")
Bing Sports アプリは、ヒーロー画像で最新の見出しを表示しています。この写真はユーザーの注意を引き付け、記事から引用したキャプションを示しています。
.png "Bing Sports アプリのメイン ページ")
詳しくは、「ハブ コントロールのガイドライン」をご覧ください。
全画面コンテンツを使って最大のインパクトを与える
Windows ストア アプリのシルエットに関連付けられたグリッドがあるからといって、アプリのコンテンツがすべてその内側に収まらないといけないというわけではありません。スポーツ アプリのデザインでは、遠慮なく境界を広げたり、さらには境界を越えることができます。以下は、グリッド線を越えたコンテンツの例です。アプリの左側では、ロゴとコンテンツがグリッドの内側に収まっています。ところが、ヒーロー画像は画面の一番上から下まで画面いっぱいに表示されて、最大の視覚効果を上げています。
.png "キックする直前のサッカー選手の大画像を掲載したスポーツ アプリのランディング ページ")
次の画像は、Windows ストア アプリのシルエットのマージンを同じアプリ画像の上に重ねて表示したものです。アプリのコンテンツの大半は、マージンによって区切られた青い領域の内側に収まっていますが、選手の画像は境界を越えて画面の端まで広がっています。
.png "グリッド線を重ねて表示したスポーツ アプリのランディング ページ")
Seattle Sounders アプリも、画面全体に広がるグラフィックでインパクトを与えています。衝撃的な背景画像の上に目を引く特集コンテンツが表示されています。画面の右端にあるフル サイズ広告でさえも、Sounders エクスペリエンスとかみ合うようにデザインされています。
.png "Sounder FC アプリのコンテンツを示すワイドなスクリーン ショット")
画面上のあらゆるピクセルが、スポーツ アプリのデザインではかっこうの標的になります。
アプリ バーを使って簡単に移動する
アプリの中央前面でコンテンツをきれいに見せて、必要でないときにはコントロールが画面を見づらくしないようにします。Windows ストア アプリでは、ナビゲーション バー (上部のアプリ バーとも呼ばれます) と下部のアプリ バーは、ユーザーが右クリックするか、画面の上端または下端をスワイプするまで、隠されています。多くのスポーツ アプリは、ナビゲーション バーにアプリのさまざまなセクションに対するショートカットを配置しています。たとえば、THE Football App のナビゲーション バーには、世界各地のサッカー リーグのタブが用意されています。また、ホーム、ニュース、動画、ソーシャル メディアにもすばやくアクセスできます。
.png "THE Football App の上部のアプリ バー")
ナビゲーション コントロールに加えて、ESPN アプリではナビゲーション バーに最新のゲーム スコアが表示されます。ユーザーは、ナビゲーション バーから、アプリのセクション間を移動し、現在のゲーム スコアをすばやく把握し、各ゲームの詳細なコンテンツにジャンプすることができます。
.png "現在のゲーム スコアとナビゲーション コントロールを表示した ESPN アプリの上部のアプリ バー")
下部のアプリ バーには、通常、現在の表示に関連したコントロールが表示されます。たとえば、テキストが大量にあるスポーツ記事を含むページの場合、下部のアプリ バーにテキスト サイズを変更するボタンが用意されていることがあります。Sports Illustrated アプリでは、アプリ バーからスポーツ リーグ別にコンテンツを絞り込むことができます。
.png "Sports Illustrated アプリで下部のアプリ バーが表示されているスクリーン ショット")
検索をシンプルにする
スポーツの世界には知るべきことがたくさんあります。アプリ内検索を有効にして、検索コントラクトを使うことで、システムのあらゆる場所からアプリを検索できるようにすると、ユーザーは必要な情報をまさに必要なときに入手することができます。
アプリ内検索: アプリに検索ボックスを追加して、スポーツ ファンが必要なコンテンツにすばやくアクセスできるようにします。 ユーザーが入力するのは検索クエリだけというページがアプリにある場合は、検索入力機能を有効にして、キーボード入力をすべて検索クエリとして自動的に取り込むことができます。検索入力機能が適している場面について詳しくは、「Guidelines for search」をご覧ください。
既にあるスポーツ アプリで使われている検索の例として、Bing Sports アプリを取り上げます。特定の選手について知りたい場合は、アプリを開いて、選手の名前の入力を開始します。Bing Sports アプリではメイン ページで検索入力機能が有効になっているため、ユーザーが入力を開始するとすぐに検索ボックスが開いて、ユーザーの入力内容が取り込まれます。
.png "Bing Sports アプリのランディング ページでの検索入力機能")
Bing Sports アプリは、ユーザー入力に合わせて検索結果候補を表示します。
.png "ユーザー入力に合わせて検索結果を絞り込む Bing Sports アプリ")
わずか 8 回のキー入力で、必要な情報を入手できました。
.png "Bing Sports アプリの選手プロフィールのスクリーン ショット")
検索コントラクト: 検索コントラクトを使って、アプリのスポーツ コンテンツをシステム検索で利用できるようにします。アプリが検索コントラクトに参加している場合、ユーザーは検索チャームを使って、アプリの該当する検索結果をシステムのあらゆる場所から検索できるようになります。コントラクトについて詳しくは、概要については「チャームとコントラクト」を、詳しい説明については「アプリ コントラクトと拡張機能」をご覧ください。
スポーツへの思いを共有する
スポーツは、ゲーム、チーム、共通の体験について思いを共有する人々のコミュニティを中心として回っています。Windows では共有コントラクトを使って共有が簡単にできるようになっています。アプリを共有ソースにすると、ユーザーは、Twitter、Facebook、メールなど、別のインストール済みアプリを使って、アプリのコンテンツを共有できます。 共有機能はアプリのユーザーを満足させるだけでなく、アプリの秘かな宣伝にもなります。Windows ストア アプリで利用可能なコントラクトの概要については、「チャームとコントラクト」をご覧ください。
アプリを共有ソースとして登録した場合、ユーザーは共有チャームを使って、そのアプリのコンテンツをいつでも共有できます。 たとえば、ユーザーが NFL Fantasy Football アプリで録画されたゲームの一場面を視聴しているとします。前日の午後、友人との会話でそのプレーが話題になったばかりで、その場面を友人と共有することにしました。 そこで、画面の右端からスワイプしてチャームを表示し、共有チャームを選びます。
.png "NFL Fantasy Football アプリに表示されたチャーム。")
NFL Fantasy Football アプリは、ユーザーが共有したいコンテンツをシステムに提供します。Windows は、ユーザーのシステムにインストールされたこの種のページ コンテンツを処理できるアプリの一覧を表示します。この例では、Twitter、メール、Evernote Touch、Flipboard などのアプリがこの種のコンテンツを共有できます。ここで、ユーザーはこの情報を共有する方法を選びます。つぶやきたいのか、友人にリンクをメールしたいのか、他のアプリと共有したいのか、いずれの場合であっても、ユーザーが NFL Fantasy Football アプリを離れる必要はありません。
.png "NFL Fantasy Football アプリで共有ポップアップを表示したスクリーン ショット")
ユーザーがアプリのコンテンツを共有したときにアプリを表す方法をカスタマイズすることができます。たとえば、既定では共有されたコンテンツに対するリンクだけが提供されますが、そのリンクにアプリのロゴや、共有されたコンテンツのサムネイルを付けることもできます。
他のアプリが共有したコンテンツをアプリで受け取る場合は、アプリを共有ターゲットにします。アプリを共有ソースまたは共有ターゲットにする方法について詳しくは、「Guidelines for sharing content」をご覧ください。サンプル コードについては、共有ソースのサンプルに関するページと共有ターゲットのサンプルに関するページをご覧ください。
ソーシャル メディアの活用: アプリにソーシャル メディアを組み込んで、スポーツの世界で話題になっていることについて最新情報を入手できるようにします。Twitter の力を利用する場合でも、Facebook と同期して、スポーツの話題について友人がどのような話をしているかを知らせる場合でも、ソーシャル コンテンツをクリエイティブに提示する場合でも、そのインパクトは大きなものがあります。
この FX のエンターテインメント アプリでは、タイムラインを使ってソーシャル メディアのトレンドを表示しています。ユーザーはトピック別 (この場合はテレビ番組別)、ソーシャル メディア ソース別にタイムラインを絞り込みます。すると、そのトピックに関連したすべての会話のタイムラインと個々の投稿が表示されます。
.png "テレビ番組 Archer に関する twitter 投稿を表示した FX アプリのタイムライン")
データを対話的にする
スポーツの世界は、スポーツ ファンの体験に大きな影響を及ぼす統計データであふれています。ファンタジー スポーツで情報を得た上でトレードの決定を下す場合でも、お気に入りのホッケー チームの活躍を楽しむ場合でも、MLB の 2 人の指名打者の打点を比較する場合でも、データを視覚化し対話的に処理するクリエイティブな方法を用意すると、他のアプリとの違いを際立たせることができます。
NFL Fantasy Football 2013 アプリは対話的なメディアを使ってゲーム統計をおもしろくしています。ファンタジー チームのスコアが時系列でプロットされ、グラフの特定の場所をクリックすると、スコアを変えるプレーのビデオ クリップを見ることができます。
.png "NFL Fantasy Football 2013 の対話的なデータ表現")
関連トピック
概要とガイドライン
サンプル